CSV Stacked Bar chart

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 Xavier on 23rd March 2014
Hello,

I need to create a bar grouped stacked chart with a CSV datafile.

Without CSV no problems :

<!DOCTYPE html >
<html>
  <head>
   <script type="text/javascript" src="libraries/RGraph.common.core.js" ></script>
   <script type="text/javascript" src="libraries/RGraph.common.effects.js" ></script>
   <script type="text/javascript" src="libraries/RGraph.common.csv.js" ></script>
   <script type="text/javascript" src="libraries/RGraph.bar.js" ></script>
   <!--[if lt IE 9]><script src="excanvas/excanvas.js"></script><![endif]-->
   <title>TEST</title>
  </head>
  <body>
   <canvas id="cvs" width="1200" height="500">[No canvas support]</canvas>
   <script>
    window.onload = function ()
    {
      var bar = new RGraph.Bar('cvs', [[94,91,20],[99,57,31]])
       .Set('grouping', 'stacked')
       .Set('labels', ['01/03/2014','02/03/2014'])
       .Draw();
    }
   </script>
  </body>
</html>


But I don't know how to get data from my CSV file :

28/02/2014,94,91,20
27/02/2014,99,57,31

I follow the CSV reader example www.rgraph.net/docs/csv-file-reader.html

But nothing ...

Thanks with advance if someone can help me

Xavier
Posted by Richard on 24th March 2014
Hi there,

The basic CSV example uses that format:

www.rgraph.net/demos/basic-csv.html



The CSV file that it uses is here:

www.rgraph.net/sample.csv





Though you could also look at using the CSV reader -

www.rgraph.net/demos/basic-csv.html

Which you find easier to use.








Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Xavier on 24th March 2014

I tried :

RGraph.CSV(\'_Files/logs.csv\', function (csv)
{
         var labels = csv.getCol(0);
         var data1 = csv.getCol(1);
         var data2 = csv.getCol(2);
         var data3 = csv.getCol(3);

         var bar = new RGraph.Bar(\'cvs\', [data1, data2, data3])
                 .Set(\'grouping\', \'stacked\')
                 .Set(\'labels\', labels)
Posted by Richard on 24th March 2014
Hi there,

There's an example of the CSV reader on the CSV reader docs page:

www.rgraph.net/docs/csv-file-reader.html


Though by the looks of it the basic example that I linked to has the same (or at least a very similar) format.



Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Richard on 24th March 2014
Hi there,

There'll be a new Rose chart demo demonstrating a stacked chart using the CSV reader in a week or so - it's much the same as a stacked bar chart. The code for it is thus:


RGraph.CSV('/sample.csv', function (csv)
{
     var data = [];

     /**
     * First column is the labels
     */
     var labels = csv.getCol(0);

     /**
     * Number of rows in the CSV file
     */
     var numrows = csv.numrows;
    
     for (var i=0; i<numrows; i+=1) {
         data.push(csv.getRow(i, 1));
     }

     // Make the chart
     var bar = new RGraph.Rose('cvs', data)
         .set('labels.axes', 'n')
         .set('colors', ['red', 'green', '#aaf', 'mauve', 'cyan','#fca', 'pink'])
         .set('margin', 15)
         .set('colors.alpha', 0.5)
         .draw();
})






Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Xavier on 26th March 2014
Thanks for your reply.
As you suggest, I checked your examples for Rose Graph
And I adapted it for my Bar stacked graph. It's working.

I copy below the result.

Thanks again.


<!DOCTYPE html >
<html>
<head>
<script type="text/javascript" src="libraries/RGraph.common.core.js" ></script>
<script type="text/javascript" src="libraries/RGraph.common.effects.js" ></script>
<script type="text/javascript" src="libraries/RGraph.common.csv.js" ></script>
<script type="text/javascript" src="libraries/RGraph.bar.js" ></script>
<!--[if lt IE 9]><script src="excanvas/excanvas.js"></script><![endif]-->

<title>TEST</title>

</head>
<body>
<canvas id="cvs" width="1200" height="500">[No canvas support]</canvas>

<script>
window.onload = function ()
{
RGraph.CSV('_Files/jobs_logs.csv', function (csv)
{

var col1 = csv.getCol(1, 0);
var col2 = csv.getCol(2, 0);
var col3 = csv.getCol(3, 0);
var labels = csv.getCol(0);
var data = [];
for (var i=0; i<col1.length; i+=1) {
data[i] = [col1[i], col2[i], col3[i]];
}
var bar = new RGraph.Bar('cvs', data)
.Set('labels', labels)
.Set('grouping', 'stacked')
.Draw();
})
}
</script>
</body>
</html>

Add a reply




« Back to message list