Add graphing to class based tabulation view #127

dgets · 2019-05-11T11:09:01Z

Graphing is the only thing that still needs to be added to the class based tabulation views now.

NOTE: This will need to be accomplished in a loop per each substance, being as we've got multiple substances to graph for in this view, as opposed to the individual substance view before. Not like that should really need to be said.

dgets · 2019-05-12T13:54:27Z

Due to issues with D3.js's graphing capabilities (as far as utilizing more than 1 of each 'type' of graph being in one page), it may be easier to just add a hyperlink from each substance's entries in the class-based page to the individual substance stats dataview, where they can then see the graphing in all its glory.

Then again, maybe an answer can be found within some information like this particular StackOverflow post.

georgedorn · 2019-05-12T17:36:23Z

http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html as well.

dgets · 2019-05-12T19:23:29Z

Cool thnx for the info, @georgedorn.

dgets · 2019-05-13T06:26:05Z

@georgedorn that seems to have led me to getting this almost implemented. Now the problem, after differentiating different div elements for the scripts to attach to, and different json_src variables so that they're not trying to overwrite each other, is that the first set of 2 graphs on the page doesn't display, whilst all of the others do. It doesn't look like I'm going to have time to try to debug this this morning, but I'm a lot closer than I was before, to be sure...

NOTE (edit): It looks like this may have something to do with a divide by 0 issue coming up in my check_for_extremes_from_average code somewhere. I'll have to start looking into that when I get back. Didn't notice a stack trace from it before, due to the fact that the page rendered fine as that caller's routine just dumps json, and doesn't cause the page to stop rendering.

…eding this commit in that particular issue for details regarding the current holdup in all of the proper graphs being displayed.

… little bit, but some of the graphs are still being appended on top of the last set's dosage graph, for some reason. En route to #127.

dgets · 2019-05-13T06:43:06Z

Finagled things a little bit more to get a bit closer. It looks like the missing graphs from the top of the page are, for some reason (or at least one of them is) appending on top of the dosage (1st in the set) graph in the final set on the page. Going to have to look at this more after work, it's definitely time for me to start getting ready.

dgets · 2019-05-13T16:49:27Z

Depending on the data that these different graphing segments are receiving from the json output views they're appearing in different areas. Pretty confounded here. Things were actually looking more proper when a couple of the graphs were receiving 'null' data where they were expecting lists due to a divide by 0 error (#126, I think) that I haven't been able to fix yet. Now that I've got that bit fixed (not the whole bug, just the test data making sure to avoid it) they're all piled on top of each other again at the very last set of graphs.

dgets · 2019-05-15T07:11:22Z

Rendered HTML/JS of the active template follows:

<html lang="en">


 <head>
     <title>LastTime</title>
     <!-- <META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="～"> -->
     <LINK REV="MADE" HREF="mailto:[email protected]">
     <LINK REL="NEXT" HREF="http://d-resources.hopto.org/">
     <!-- <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="～"> -->
     <link rel="stylesheet" type="text/css"
           href="/static/home/lasttime.css">
 </head>
 <body>

  <div class="header">
      <h1 class="slogan">We&#39;ll keep those damn seizures away!</h1>
      <h3 class="mission">Our mission is to provide you with a safe and effective way to monitor your medication levels when professional medical care is not available, as seems to happen so often here.</h3>
  </div>

   <div class="topnav">
      
      
       <a href="/subadd/">
           Substance Listing
       </a>
      
       <a href="/recadm/">
           Administration Records
       </a>
      
       <a href="/dataview/">
           Detailed Admin Data
       </a>
      
       <a href="/dox/">
           Online Documentation
       </a>
      
      
  </div>

  


   <!--
  {# NOTE: Here is where we'll want probably some sort of logo image and some
       text describing things a little more thoroughly than the slogan and
       mission statement #}
    -->

  
  <h2>Substances in Classification</h2>

  
    <ul>
        
            <li><a href="#nicotine (C10H14N2)">nicotine (C10H14N2)</a></li>
        
            <li><a href="#adderall (dextroamphetamine)">adderall (dextroamphetamine)</a></li>
        
            <li><a href="#caffeine (1,3,7-Trimethylxanthine Theine)">caffeine (1,3,7-Trimethylxanthine Theine)</a></li>
        
    </ul>
  

  <h2>Usages Per Substance in Classification</h2>

  
        
            <a name="nicotine (C10H14N2)"><h4>nicotine (C10H14N2)</h4></a>

            
            <table summary="nicotine (C10H14N2) Data Summary">
             <tr><td>
            
              <table summary="Administration Stats">
                <tr>
                    <td>Total Usages:</td>
                    <td>3</td>
                    <td>Total Administered:</td>
                    <td>14.000</td>
                </tr>
                <tr>
                    <td>Average per Usage:</td>
                    <td>4.667</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Highest Dosage:</td>
                    <td>10.000</td>
                    <td>Lowest Dosage:</td>
                    <td>2.000</td>
                </tr>
              </table>

            
             </td>
             <td>
                 <table summary="Interval Stats">
                     <tr>
                         <td>Total Duration:</td>
                         <td>12 days, 1:28:47</td>
                     </tr>
                     <tr>
                         <td>Average Duration:</td>
                         <td>6 days, 0:44:24</td>
                     </tr>
                     <tr>
                         <td>Longest Duration:</td>
                         <td>11 days, 10:14:06</td>
                     </tr>
                     <tr>
                         <td>Shortest Duration:</td>
                         <td>15:14:41</td>
                     </tr>
                 </table>
             </td></tr>
            </table>
            

            <ul>
              
                <li>nicotine (C10H14N2) (2.000) administered to: sprite at 2019-04-30 23:46:13+00:00</li>
              
                <li>nicotine (C10H14N2) (2.000) administered to: sprite at 2019-05-01 15:00:54+00:00</li>
              
                <li>nicotine (C10H14N2) (10.000) administered to: sprite at 2019-05-13 01:15:00+00:00</li>
              
            </ul>

            <div id="graph_dosage_5"></div>
            <!-- dosage graph -->
     <div class="dose_chart"></div>
     <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
     <script type="text/javascript">
        let json_src_5 = '/dataview/dump_dose_graph_data/5/';

        var margin = {top: 20, right: 20, bottom: 70, left: 40},
        width = 600 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

        var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
        var y = d3.scale.linear().range([height, 0]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(5);

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(10);

        var svg = d3.select("#graph_dosage_5").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform",
                  "translate(" + margin.left + "," + margin.top + ")");

        d3.json(json_src_5, function(error, data) {
          var ouah = []
          var ouah2 = []
          var ouah3 = []
          for (var cntr = 0; cntr < data.dosages.length; cntr++) {
            ouah[cntr] = {}
            ouah2[cntr] = (cntr + 1);
            ouah3[cntr] = data.dosages[cntr];
            ouah[cntr].date = ouah2[cntr]
            ouah[cntr].value = ouah3[cntr]
          }

          console.log(ouah);

          ouah.forEach(function(d) {
              d.date = d.date;
              d.value = +d.value;
          });

          x.domain(ouah.map(function(d) { return d.date; }));
          y.domain([0, d3.max(ouah3)]);

          svg.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + height + ")")
              .call(xAxis)
            .selectAll("text")
              .style("text-anchor", "end")
              .attr("dx", "-.8em")
              .attr("dy", "-.55em")
              .attr("transform", "rotate(-90)" );

          svg.append("g")
              .attr("class", "y axis")
              .call(yAxis)
            .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Dosage in ");

          svg.selectAll("bar")
              .data(ouah)
            .enter().append("rect")
              .style("fill", "steelblue")
              .attr("x", function(d) { return x(d.date); })
              .attr("width", x.rangeBand())
              .attr("y", function(d) { return y(d.value); })
              .attr("height", function(d) { return height - y(d.value); });

        });

       </script>

       <div id="graph_dosage_5_2">&nbsp;</div>

            <!-- between dosage interval graph -->
     <div class="interval_chart"></div>
     <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
     <script type="text/javascript">
let json_src_5_2 = '/dataview/dump_interval_graph_data/5/';

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var x2 = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y2 = d3.scale.linear().range([height, 0]);

var xAxis2 = d3.svg.axis()
    .scale(x2)
    .orient("bottom")
    .ticks(10);

var yAxis2 = d3.svg.axis()
    .scale(y2)
    .orient("left")
    .ticks(10);

var svg2 = d3.select("#graph_dosage_5_2").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

d3.json(json_src_5_2, function(error, data) {

    var ouah_interval = [];
    for (var cntr = 0; cntr < data.timespans.length; cntr++) {
        ouah_interval[cntr] = {}
        ouah_interval[cntr].num = cntr + 1;
        ouah_interval[cntr].value = data.timespans[cntr];
    };

    ouah_interval.forEach(function(d) {
        d.num = d.num;
        d.value = +d.value;
    });

    //debugging
    //console.log(ouah_interval);

  x2.domain(ouah_interval.map(function(d) { return d.num; }));
  y2.domain([0, d3.max(ouah_interval, function(d) { return d.value; })]);

  svg2.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis2)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg2.append("g")
      .attr("class", "y axis")
      .call(yAxis2)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y2", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Timespan in Hours");

  svg2.selectAll("bar")
      .data(ouah_interval)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x2(d.num); })
      .attr("width", x2.rangeBand())
      .attr("y", function(d) { return y2(d.value); })
      .attr("height", function(d) { return height - y2(d.value); });

});
       </script>

            <p>For individual substance graphing data, please see
                <a href="/dataview/5/">the following individual stats page</a>.</p>

        
            <a name="adderall (dextroamphetamine)"><h4>adderall (dextroamphetamine)</h4></a>

            
            <table summary="adderall (dextroamphetamine) Data Summary">
             <tr><td>
            
              <table summary="Administration Stats">
                <tr>
                    <td>Total Usages:</td>
                    <td>2</td>
                    <td>Total Administered:</td>
                    <td>10.000</td>
                </tr>
                <tr>
                    <td>Average per Usage:</td>
                    <td>5.000</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Highest Dosage:</td>
                    <td>5.000</td>
                    <td>Lowest Dosage:</td>
                    <td>5.000</td>
                </tr>
              </table>

            
             </td>
             <td>
                 <table summary="Interval Stats">
                     <tr>
                         <td>Total Duration:</td>
                         <td>11 days, 23:45:43</td>
                     </tr>
                     <tr>
                         <td>Average Duration:</td>
                         <td>11 days, 23:45:43</td>
                     </tr>
                     <tr>
                         <td>Longest Duration:</td>
                         <td>11 days, 23:45:43</td>
                     </tr>
                     <tr>
                         <td>Shortest Duration:</td>
                         <td>11 days, 23:45:43</td>
                     </tr>
                 </table>
             </td></tr>
            </table>
            

            <ul>
              
                <li>adderall (dextroamphetamine) (5.000) administered to: sprite at 2019-05-01 17:00:42+00:00</li>
              
                <li>adderall (dextroamphetamine) (5.000) administered to: sprite at 2019-05-13 16:46:25+00:00</li>
              
            </ul>

            <div id="graph_dosage_1"></div>
            <!-- dosage graph -->
     <div class="dose_chart"></div>
     <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
     <script type="text/javascript">
        let json_src_1 = '/dataview/dump_dose_graph_data/1/';

        var margin = {top: 20, right: 20, bottom: 70, left: 40},
        width = 600 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

        var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
        var y = d3.scale.linear().range([height, 0]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(5);

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(10);

        var svg = d3.select("#graph_dosage_1").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform",
                  "translate(" + margin.left + "," + margin.top + ")");

        d3.json(json_src_1, function(error, data) {
          var ouah = []
          var ouah2 = []
          var ouah3 = []
          for (var cntr = 0; cntr < data.dosages.length; cntr++) {
            ouah[cntr] = {}
            ouah2[cntr] = (cntr + 1);
            ouah3[cntr] = data.dosages[cntr];
            ouah[cntr].date = ouah2[cntr]
            ouah[cntr].value = ouah3[cntr]
          }

          console.log(ouah);

          ouah.forEach(function(d) {
              d.date = d.date;
              d.value = +d.value;
          });

          x.domain(ouah.map(function(d) { return d.date; }));
          y.domain([0, d3.max(ouah3)]);

          svg.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + height + ")")
              .call(xAxis)
            .selectAll("text")
              .style("text-anchor", "end")
              .attr("dx", "-.8em")
              .attr("dy", "-.55em")
              .attr("transform", "rotate(-90)" );

          svg.append("g")
              .attr("class", "y axis")
              .call(yAxis)
            .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Dosage in ");

          svg.selectAll("bar")
              .data(ouah)
            .enter().append("rect")
              .style("fill", "steelblue")
              .attr("x", function(d) { return x(d.date); })
              .attr("width", x.rangeBand())
              .attr("y", function(d) { return y(d.value); })
              .attr("height", function(d) { return height - y(d.value); });

        });

       </script>

       <div id="graph_dosage_1_2">&nbsp;</div>

            <!-- between dosage interval graph -->
     <div class="interval_chart"></div>
     <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
     <script type="text/javascript">
let json_src_1_2 = '/dataview/dump_interval_graph_data/1/';

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var x2 = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y2 = d3.scale.linear().range([height, 0]);

var xAxis2 = d3.svg.axis()
    .scale(x2)
    .orient("bottom")
    .ticks(10);

var yAxis2 = d3.svg.axis()
    .scale(y2)
    .orient("left")
    .ticks(10);

var svg2 = d3.select("#graph_dosage_1_2").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

d3.json(json_src_1_2, function(error, data) {

    var ouah_interval = [];
    for (var cntr = 0; cntr < data.timespans.length; cntr++) {
        ouah_interval[cntr] = {}
        ouah_interval[cntr].num = cntr + 1;
        ouah_interval[cntr].value = data.timespans[cntr];
    };

    ouah_interval.forEach(function(d) {
        d.num = d.num;
        d.value = +d.value;
    });

    //debugging
    //console.log(ouah_interval);

  x2.domain(ouah_interval.map(function(d) { return d.num; }));
  y2.domain([0, d3.max(ouah_interval, function(d) { return d.value; })]);

  svg2.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis2)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg2.append("g")
      .attr("class", "y axis")
      .call(yAxis2)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y2", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Timespan in Hours");

  svg2.selectAll("bar")
      .data(ouah_interval)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x2(d.num); })
      .attr("width", x2.rangeBand())
      .attr("y", function(d) { return y2(d.value); })
      .attr("height", function(d) { return height - y2(d.value); });

});
       </script>

            <p>For individual substance graphing data, please see
                <a href="/dataview/1/">the following individual stats page</a>.</p>

        
            <a name="caffeine (1,3,7-Trimethylxanthine Theine)"><h4>caffeine (1,3,7-Trimethylxanthine Theine)</h4></a>

            
            <table summary="caffeine (1,3,7-Trimethylxanthine Theine) Data Summary">
             <tr><td>
            
              <table summary="Administration Stats">
                <tr>
                    <td>Total Usages:</td>
                    <td>11</td>
                    <td>Total Administered:</td>
                    <td>1890.000</td>
                </tr>
                <tr>
                    <td>Average per Usage:</td>
                    <td>171.818</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Highest Dosage:</td>
                    <td>220.000</td>
                    <td>Lowest Dosage:</td>
                    <td>20.000</td>
                </tr>
              </table>

            
             </td>
             <td>
                 <table summary="Interval Stats">
                     <tr>
                         <td>Total Duration:</td>
                         <td>10 days, 6:06:56</td>
                     </tr>
                     <tr>
                         <td>Average Duration:</td>
                         <td>1 day, 0:36:42</td>
                     </tr>
                     <tr>
                         <td>Longest Duration:</td>
                         <td>5 days, 5:22:36</td>
                     </tr>
                     <tr>
                         <td>Shortest Duration:</td>
                         <td>0:08:29</td>
                     </tr>
                 </table>
             </td></tr>
            </table>
            

            <ul>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (220.000) administered to: sprite at 2019-05-02 06:55:02+00:00</li>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (20.000) administered to: sprite at 2019-05-02 07:41:25+00:00</li>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (70.000) administered to: sprite at 2019-05-02 19:05:09+00:00</li>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (220.000) administered to: sprite at 2019-05-02 20:20:34+00:00</li>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (220.000) administered to: sprite at 2019-05-03 06:39:43+00:00</li>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (220.000) administered to: sprite at 2019-05-04 09:40:32+00:00</li>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (220.000) administered to: sprite at 2019-05-05 14:30:33.637295+00:00</li>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (40.000) administered to: sprite at 2019-05-05 14:39:02.185273+00:00</li>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (220.000) administered to: sprite at 2019-05-06 07:33:47.153924+00:00</li>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (220.000) administered to: sprite at 2019-05-07 07:39:21.604365+00:00</li>
              
                <li>caffeine (1,3,7-Trimethylxanthine Theine) (220.000) administered to: sprite at 2019-05-12 13:01:57.771481+00:00</li>
              
            </ul>

            <div id="graph_dosage_2"></div>
            <!-- dosage graph -->
     <div class="dose_chart"></div>
     <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
     <script type="text/javascript">
        let json_src_2 = '/dataview/dump_dose_graph_data/2/';

        var margin = {top: 20, right: 20, bottom: 70, left: 40},
        width = 600 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

        var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
        var y = d3.scale.linear().range([height, 0]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(5);

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(10);

        var svg = d3.select("#graph_dosage_2").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform",
                  "translate(" + margin.left + "," + margin.top + ")");

        d3.json(json_src_2, function(error, data) {
          var ouah = []
          var ouah2 = []
          var ouah3 = []
          for (var cntr = 0; cntr < data.dosages.length; cntr++) {
            ouah[cntr] = {}
            ouah2[cntr] = (cntr + 1);
            ouah3[cntr] = data.dosages[cntr];
            ouah[cntr].date = ouah2[cntr]
            ouah[cntr].value = ouah3[cntr]
          }

          console.log(ouah);

          ouah.forEach(function(d) {
              d.date = d.date;
              d.value = +d.value;
          });

          x.domain(ouah.map(function(d) { return d.date; }));
          y.domain([0, d3.max(ouah3)]);

          svg.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + height + ")")
              .call(xAxis)
            .selectAll("text")
              .style("text-anchor", "end")
              .attr("dx", "-.8em")
              .attr("dy", "-.55em")
              .attr("transform", "rotate(-90)" );

          svg.append("g")
              .attr("class", "y axis")
              .call(yAxis)
            .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Dosage in ");

          svg.selectAll("bar")
              .data(ouah)
            .enter().append("rect")
              .style("fill", "steelblue")
              .attr("x", function(d) { return x(d.date); })
              .attr("width", x.rangeBand())
              .attr("y", function(d) { return y(d.value); })
              .attr("height", function(d) { return height - y(d.value); });

        });

       </script>

       <div id="graph_dosage_2_2">&nbsp;</div>

            <!-- between dosage interval graph -->
     <div class="interval_chart"></div>
     <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
     <script type="text/javascript">
let json_src_2_2 = '/dataview/dump_interval_graph_data/2/';

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var x2 = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y2 = d3.scale.linear().range([height, 0]);

var xAxis2 = d3.svg.axis()
    .scale(x2)
    .orient("bottom")
    .ticks(10);

var yAxis2 = d3.svg.axis()
    .scale(y2)
    .orient("left")
    .ticks(10);

var svg2 = d3.select("#graph_dosage_2_2").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

d3.json(json_src_2_2, function(error, data) {

    var ouah_interval = [];
    for (var cntr = 0; cntr < data.timespans.length; cntr++) {
        ouah_interval[cntr] = {}
        ouah_interval[cntr].num = cntr + 1;
        ouah_interval[cntr].value = data.timespans[cntr];
    };

    ouah_interval.forEach(function(d) {
        d.num = d.num;
        d.value = +d.value;
    });

    //debugging
    //console.log(ouah_interval);

  x2.domain(ouah_interval.map(function(d) { return d.num; }));
  y2.domain([0, d3.max(ouah_interval, function(d) { return d.value; })]);

  svg2.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis2)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg2.append("g")
      .attr("class", "y axis")
      .call(yAxis2)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y2", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Timespan in Hours");

  svg2.selectAll("bar")
      .data(ouah_interval)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x2(d.num); })
      .attr("width", x2.rangeBand())
      .attr("y", function(d) { return y2(d.value); })
      .attr("height", function(d) { return height - y2(d.value); });

});
       </script>

            <p>For individual substance graphing data, please see
                <a href="/dataview/2/">the following individual stats page</a>.</p>

dgets · 2019-05-15T07:12:02Z

Just realized that I'm not using different variable names for each graph, there are 3 sets, each with a graph named svg and svg2. Going to differentiate those now...

dgets added enhancement New feature or request help wanted Extra attention is needed labels May 11, 2019

dgets added this to the next alpha milestone May 11, 2019

dgets self-assigned this May 11, 2019

dgets closed this as completed in 91289da May 12, 2019

dgets reopened this May 13, 2019

dgets added a commit that referenced this issue May 13, 2019

About 10 steps closer to implementing #127; look at the comment prece…

d656e82

…eding this commit in that particular issue for details regarding the current holdup in all of the proper graphs being displayed.

dgets added a commit that referenced this issue May 13, 2019

Well, adding a 2nd div for the interval graph seemed to help things a…

3e8cfd6

… little bit, but some of the graphs are still being appended on top of the last set's dosage graph, for some reason. En route to #127.

dgets closed this as completed in ce4cb1b May 15, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add graphing to class based tabulation view #127

Add graphing to class based tabulation view #127

dgets commented May 11, 2019

dgets commented May 12, 2019 •

edited

Loading

georgedorn commented May 12, 2019

dgets commented May 12, 2019

dgets commented May 13, 2019 •

edited

Loading

dgets commented May 13, 2019

dgets commented May 13, 2019

dgets commented May 15, 2019

dgets commented May 15, 2019

Add graphing to class based tabulation view #127

Add graphing to class based tabulation view #127

Comments

dgets commented May 11, 2019

dgets commented May 12, 2019 • edited Loading

georgedorn commented May 12, 2019

dgets commented May 12, 2019

dgets commented May 13, 2019 • edited Loading

dgets commented May 13, 2019

dgets commented May 13, 2019

dgets commented May 15, 2019

dgets commented May 15, 2019

dgets commented May 12, 2019 •

edited

Loading

dgets commented May 13, 2019 •

edited

Loading