Problems with multiple CSV operations on same page.

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by John on 24th November 2013
Hi
I’m an experienced C programmer but new to Java and am trying to update my web site from Flash charts to HTML5 and am having a problem whenever I try to add a second chart to a page.

I’m using the CSV function to read CSV files from the server to populate each of the line charts.

The code for each chart works OK as long as it’s the only chart on the page, when there are 2 charts on the page the Java console shows:-

Uncaught TypeError: Cannot read property '2' of undefined RGraph.common.csv.js:134

Below is an extract from the web page that I’m trying to code.

The full page can be accessed at solar.buttsco.co.uk/index1.php

Hoping you can tell me what I doing wrong.

John

<script>


function hourly()
     {
         /**
         * This fetchs the CSV file and shows the Bar chart
         */
         var csv1 = RGraph.CSV('/HourlyHTML5Graph.txt', function (csv1)
  {

             // Get the first column which becomes the labels for the rows (col,row)
   
             var labels = csv1.getCol(0,1);

             var colours = csv1.getCol(1,1);
      var header = csv1.getRow(0) ;

             // Get the first row which is the Xaxis lables
             var xaxis = csv1.getRow(0,2);
      // how get the next 3 rows which are the data rows
      var row1 = csv1.getRow(1,2);
      var row2 = csv1.getRow(2,2);
      var row3 = csv1.getRow(3,2);
            
            
             // Create the chart
             var line1 = new RGraph.Line('cvs1', row1,row2,row3)
   .Set('chart.background.color','white')
                 .Set('labels', xaxis)
                 .Set('title', header[0] )
                 .Set('colors', colours)
   .Set('key',labels)
                 .Set('strokestyle', 'white')
   .Set('ymax', 2)
   .Set('chart.scale.decimals', 1)
   .Set('chart.title.xaxis','Last 30 Hours')
   .Set('chart.title.yaxis','Kwatt Hours')
   .Set('chart.title.yaxis.size',10)
   .Set('chart.title.yaxis.pos',0.1)
   .Set('chart.title.xaxis.size',10)
   .Set('chart.title.xaxis.pos',0.1)
                 .Set('gutter.bottom', 50)
                 .Set('gutter.left', 50)
// .Set('chart.scale.zerostart,true)
                 .Draw();
  
         });
     }


// Daily graphs

function daily()
  {
// Daily graphs
         /**
         * This fetchs the CSV file and shows the Bar chart
         */
         var csv = RGraph.CSV('/DailyHTML5Graph.txt', function (csv)
         {
             // Get the first column which becomes the labels for the rows (col,row)
   
             var d_labels = csv.getCol(0,1);

             var d_colours = csv.getCol(1,1);
      var d_header = csv.getRow(0);

          

             // Get the first row which is the Xaxis lables
             var d_xaxis = csv.getRow(0,2);
      // how get the next 3 rows which are the data rows
      var d_row1 = csv.getRow(1,2);
      var d_row2 = csv.getRow(2,2);
      var d_row3 = csv.getRow(3,2);
      var d_row4 = csv.getRow(4,2);
      var d_row5 = csv.getRow(5,2);
            
            
             // Create the chart
             var line1 = new RGraph.Line('cvs2', d_row1,d_row2,d_row3,d_row4,d_row5)
   .Set('chart.background.color','white')
                 .Set('labels', d_xaxis)
                 .Set('title', d_header[0] )
                 .Set('colors', d_colours)
   .Set('key',d_labels)
                 .Set('strokestyle', 'white')
// .Set('ymax', 2)
   .Set('chart.scale.decimals', 1)
   .Set('chart.title.xaxis','Day/Date')
   .Set('chart.title.yaxis','Kwatt Hours')
   .Set('chart.title.yaxis.size',10)
   .Set('chart.title.yaxis.pos',0.1)
   .Set('chart.title.xaxis.size',10)
   .Set('chart.title.xaxis.pos',0.1)
                 .Set('gutter.bottom', 70)
                 .Set('gutter.left', 50)
// .Set('chart.scale.zerostart,true)
                 .Draw();
  
         });
     }

     window.onload = function ()
     {
  hourly();
  daily();
     }
</script>

<div class="chart">
  <div class="charttop"></div>
  <div class="chartdata">
   <div id="hourdiv" align="center"></div>
   <canvas id="cvs1" width="780" height="400"></canvas>
  </div>
      <div class="chartbottom"></div>
</div>


<div class="chart">
  <div class="charttop"></div>
  <div class="chartdata">
   <div id="dailydiv" align="center"></div>
   <canvas id="cvs2" width="780" height="400"></canvas>
  </div>
      <div class="chartbottom"></div>
</div>
Posted by RGraph support on 24th November 2013
Hi there,

Judging by the error message you're doing this:

var d_row4 = csv.getRow(4,2);
var d_row5 = csv.getRow(5,2);

When there is only 4 rows in your CSV file (which will have indexes 0-3). So take those lines out.




Richard, RGraph Support
Posted by John on 26th November 2013
Hi found my error, missed the new operator in

var csv1 = new RGraph.CSV('/HourlyHTML5Graph.txt', function (csv1)

New fix file at solar.buttsco.co.uk/index2.php

Many thanks for a great package.

John

Add a reply




« Back to message list