The CSV reader demonstrated by reading CSV data via AJAX and showing a grouped Bar chart. Other than the CSV reader it's a pretty normal grouped Bar chart that uses the grow()
effect.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.ajax.js"></script> <script src="RGraph.svg.common.csv.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="width: 750px; height: 300px" id="chart-container"></div> [No canvas support] </div>This is the code that generates the chart:
<script> new RGraph.CSV('/sample.csv', function (csv) { var numrows = csv.numrows, rows = [], row = [], labels = []; for (var i=0; i<numrows; ++i) { var row = csv.getRow(i, 1).slice(0,3); var label = csv.getRow(i).slice(0,1)[0]; rows.push(row); labels.push(label); } new RGraph.SVG.Bar({ id: "chart-container", data: rows, options: { marginLeft: 50, yaxisScaleUnitsPost: 'k', colors: ['red','green', 'blue'], marginInner: 10, xaxis: false, yaxis: false, backgroundGridBorder: false, backgroundGridVlines: false, xaxisLabels: labels } }).grow(); }); </script>