A Line chart that's serving as a basic example of using the CSV Reader in conjunction with the CSV reader.
The data that's being fetched is done with this line-of-code:
var data = csv.getCol(2);
And what that does is fetch the whole of the third column (counting starts at zero). This column of data is then given to the chart as its data. The X axis labels for the chart are simply hard coded but they could quite easily be fetched from the first column of the CSV like this:
var labels = csv.getCol(0);
The responsive()
function reduces the size of the canvas tag, reduces the size of the text
and rotates the X labels to an angle of 45 degrees. It also adds a bottom CSS margin
and removes the CSS float
.
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.csv.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="500" height="250"> [No canvas support] </canvas>This is the code that generates the chart: