Line chart data is listed in CSV columns, not rows

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« 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 Dan on 17th March 2013
Hello.

I have been successfully working with the sample code of the "A basic Bar chart using CSV data". However, I am trying to convert this to a line graph. My CSV database stores the data in columns for the X Axis labels and data for each line. The sample splits the CSV from each row for each line. How do I use the AJAX call for columns? I assume that I do not need to split the rows for the data?

This is a small example of my CSV:

X Axis Line1 Line2 Line3
16:35:02, 27.16, 45.39, 22.93
16:35:32, 26.78, 45.22, 22.91
16:36:01, 26.75, 17.8, 22.89
  16:36:31, 30.5, 31.64, 22.92
16:37:01, 37.09, 47.52, 25.99



This is from the original example:

var callback = function ()
             {
                 // Make the AJAX call
                 var data = this.responseText.split(/\r?\n/);
                 var labels = [];
                
                 // Handle the response
                 for (var i=0; i<data.length; ++i) {
                     var row = data[i].split(/,/);
                     labels.push(row[0]);
 
                     var newrow = [];
 
                     for (var j=1; j<row.length; ++j) {
                         newrow.push(Number(row[j]));
                     }
 
                     data[i] = newrow;


Thanks for the help.
PS I posted the similar question on the other CSV post from the 28th.
Posted by RGraph support on 17th March 2013
Hi there,

You need to loop through your data putting it into the correct format expected by RGraph. Eg if you only have 4 sets of data (ie 4 lines) then it gets easier. For example:

var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];

rows = data.split(/\r?\n/);

// This ignores the first row which you say is labels
for (var i=1; i<rows.length; ++i) {

     // Split the row into individual numbers
     var cells = rows[i].split(/,/);

     data1.push(cells[0]);
     data2.push(cells[1]);
     data3.push(cells[2]);
     data4.push(cells[3]);
}



PS Could you link to the RGraph website - thanks.

Richard, RGraph Support

1 Year Priority Support now reduced to £299:
   www.rgraph.net/support
Posted by Dan on 17th March 2013
Hello Richard,
Excellent! I have made the changes. I am setting my first column as the labels of the X axis. Yet my graph does not appear. I double checked my syntax. Is the numerical data supposed to be converted to numbers from text? Perhaps "data1.push(Number((cells[0]));" or am I missing the new line "\n" somewhere? The code is still based on the CSV in the previous post and the original bar graph code works well. Again I thank you for your time and expertise.

         window.onload = function ()
         {
             /**
             * This is the callback for the AJAX request
             */
            var callback = function ()
             {
                 // Make the AJAX call

   var data1 = [];
   var data2 = [];
   var data3 = [];
   var data4 = [];

                
                 // Handle the response
   for (var i=1; i<rows.length; ++i) {
          var cells = rows[i].split(/,/);
      
          data1.push(cells[0]);
       data2.push(cells[1]);
       data3.push(cells[2]);
       data4.push(cells[3]);
   }

 
                 var line = new RGraph.Line('cvs', data2,data3,data4);
                 line.Set('chart.labels', data1);
   line.Set('chart.linewidth', 1);
                 line.Draw();
             }
 
 
             /**
             * Make the AJAX call that fetches the CSV data
             */
             RGraph.AJAX('/sample.csv', callback);
         }


Posted by Dan on 17th March 2013
My last post did not have the "rows = data.split(/\r?\n/);" just below the added. Copy and paste issue. Sorry. Still the same result though .

Thanks again.
Posted by Enter your name... on 17th March 2013
Hi there,

Yes - convert the strings to numbers using the Number() function. Or the parseInt() or parseFloat functions. But try the Number() function first.


PS Please remember to link to the RGraph website - thanks!

Richard, RGraph support
RGraph - HTML5 and Javascript charts
www.rgraph.net
Posted by Dan on 21st March 2013
Hello again.

I can get any of the columns to show as labels because the text is read properly. My number conversion is my problem. I tried all 3 number formulas. Below is what I did with the Number() parseInt() and parseFloat() formulas:

       data0.push(Number(cells[0]));
       data1.push(Number(cells[1]));
       data2.push(Number(cells[2]));
       data3.push(Number(cells[3]));

I also tried other variable options to no avail.

I can tell that the graph receives the columns from the AJAX call because the Y axis expands or contracts to the extent of the max value of the column. The problem is that the line graphic does not appear. I am definitely missing something.

Thanks again.
Posted by RGraph support on 21st March 2013
Hi there,

You can use the p() function to see what the data variables contain:

p(data0)

Have you set the colour to a transparent one? And try making the chart use a static rray of data first to make sure it works before you start giving it the AJAX info.


Richard, RGraph Support

1 Year Priority Support now reduced to £299:
   www.rgraph.net/support
Posted by Dan on 21st March 2013
I have created test arrays data4 and data5 and substituted data1 as an example. The lines appear for them:

var data4 = [1,4,6,2,9];
var data5 = [23,22.2,7,2,9];

If I use data0-3 as labels, the values in the CSV columns appear perfectly in the Y axis. This confirms that the looping works. My number conversions do not unfortunately.

Posted by RGraph support on 21st March 2013
Hi there,

It could be that you aren't quite converting the data to numbers. Try the p() function from the latest beta - it should better show the types as well.



Richard, RGraph Support

1 Year Priority Support now reduced to £299:
   www.rgraph.net/support
Posted by Dan on 21st March 2013
Nice. It turns out that I have to eliminate the last row at the end. The p() function gave me:

Object
(
  0 => 8.6
  1 => 9.3
  2 => 10.2
  3 => 11.1
  4 => 12.6
  5 => NaN
)

I got this using "var line = new RGraph.Line('cvs', p(data1))"

Posted by RGraph support on 21st March 2013
Hi there,

When you use the p( function - it doesn't return anything - so when you use it in future it should be more like this:

p(data1)
var line = new RGraph.Line('cvs', data1)"

PS Please remember to link to the RGraph website - thanks!

Richard, RGraph support
RGraph - HTML5 and Javascript charts
www.rgraph.net
Posted by Dan on 21st March 2013
Great tool to use. The p() let's me know that AJAX calls for the end row that does not exist and returns a "NaN". The last key for me is to ignore the "last row" as the first was ignored.
Posted by Dan on 21st March 2013
I answered my own question. Here is the solution:

for (var i=1; i<(rows.length-1); ++i)

the -1 in the (rows.length-1) did the trick. With the addition of the Number() option, all is well. I will post the final code for a line graph with vertical data example soon.

Thanks again for all your help.

Posted by RGraph support on 21st March 2013
Hi there,

Great. I'd appreciate it too if you could link to the RGraph website. Thanks.


Richard, RGraph Support

1 Year Priority Support now reduced to £299:
   www.rgraph.net/support
Posted by Dan on 21st March 2013
Here it is. It uses the same sample.csv file which is odd for a line graph and the first row is included.

Thanks again.


<!DOCTYPE html>
<html>
<head>

     <title>A basic Bar chart using CSV data in columns</title>
    
     <meta name="description" content="A basic example of an RGraph Bar chart that uses AJAX to fetch a CSV file and then parses it with Javascript" />
     <meta name="googlebot" content="NOODP">

     <!-- 1/3. Include the RGraph libraries -->
     <script src="javascript.www.rgraph.net/libraries/combined.html/RGraph.common.core.js/RGraph.bar.js\" ></script>

     <!--[if lt IE 9]><script src="javascript.www.rgraph.net/libraries/combined.html/excanvas.js\"></script><![endif]-->
</head>


<body>
 
     <h1>A basic Line chart using CSV data in columns</h1>
 
     <!-- 2/3. This is the canvas that the graph is drawn on -->
     <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
 
     <!--
         3/3. This creates and displays the graph. As it is here, you can call this from the window.onload event,
              allowing you to put it in your pages header.
     -->
     <script>
         window.onload = function ()
         {
             /**
             * This is the callback for the AJAX request
             */
            var callback = function ()
             {
                 // Make the AJAX call

   var data0 = [];
   var data1 = [];
   var data2 = [];
   var data3 = [];
   var data4 = [];
   var data5 = [];
   var data6 = [];


   var rows = this.responseText.split(/\r?\n/);
// var rows = data.split(/\r?\n/);
        
                 // Handle the response
   for (var i=0; i<(rows.length-1); ++i) {
          var cells = rows[i].split(/,/);

   
          data0.push(cells[0]);
       data1.push(Number(cells[1]));
       data2.push(Number(cells[2]));
       data3.push(Number(cells[3]));
       data4.push(Number(cells[4]));
       data5.push(Number(cells[5]));
       data6.push(Number(cells[6]));

      
      }

 
   var line = new RGraph.Line('cvs', data1, data2, data3, data4, data5, data6);
       line.Set('chart.hmargin',10);
       line.Set('chart.linewidth', 2);
       line.Set('chart.labels', data0 );// first column provides the text labels
       line.Draw();
  
 
  }
 
             /**
             * Make the AJAX call that fetches the CSV data
             */
             RGraph.AJAX('/sample.csv', callback);
         }
     </script>
    
    
     <p>
         This basic example uses AJAX to request a CSV file from the server and then parses it with Javascript to convert it into usable
         data. You can see the CSV file <a href="/sample.csv">here</a>.
     </p>
 
</body>
</html>
Posted by RGraph support on 21st March 2013
Hi there,

You shouldn't use this though:

javascript.www.rgraph.net/libraries/combined.html/RGraph.common.core.js/RGraph.bar.js

As the combined.html file will be changing soon to check referers and block anything that's not rgraph.net



Richard, RGraph Support

1 Year Priority Support now reduced to £299:
   www.rgraph.net/support

Add a reply




« Back to message list