A Line chart using the CSV reader

A simple Line chart that's using the CSV reader to get the data that's shown on the chart.

[No canvas support]

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.column(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 hardcoded but they could quite easily be fetched from the first column of the CSV like this:

var labels = csv.column(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.

This goes in the documents header:

<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: