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 here.
Note: In October 2013 a new CSV reader was added to RGraph. It makes reading CSV files much easier. You can read about the new CSV reader here.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
window.onload = function ()
{
/**
* This is the callback for the AJAX request
*/
var callback = function ()
{
// Parse the AJAX result text
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;
}
var bar = new RGraph.Bar({
id: 'cvs',
data: data,
options: {
textAccessible: true,
grouping: 'stacked',
labels: labels,
colors: ['red','blue','yellow','pink','black','gray','green']
}
}).draw();
}
/**
* Make the AJAX call that fetches the CSV data
*/
RGraph.AJAX('/sample.csv', callback);
};
</script>