A Line chart using the CSV reader

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

<div style="float:right">
    <canvas id="cvs" width="500" height="250">[No canvas support]</canvas>
</div>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // Create a new CSV connector object passing it the URL of the CSV file and a
    // function that creates the chart. Due to AJAX restrictions the URL must be
    // relative to the current website/domain.
    new RGraph.CSV('/sample.csv', function (csv)
    {
        // Fetch the third column from the CSV file (the numbering is zero-indexed)
        var data = csv.column(2);

        // Create the Line chart and give it the data that we just got from the
        // CSV file along with some hardcoded X-axis labels.
        var line = new RGraph.Line({
            id: 'cvs',
            data: data,
            options: {
                xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
                responsive:[
                    {maxWidth: null, width:500,height:250, options: {xaxisLabelsAngle: 0,textSize: 12,marginLeft: 35},parentCss: {marginBottom: 0,cssFloat: 'right',textAlign:'none'}},
                    {maxWidth: 900,width: 400,height: 150,options: {xaxisLabelsAngle: 20,textSize: 10,marginLeft: 45},parentCss: {marginBottom: '35px',cssFloat: 'none',textAlign:'center'}}
                ]
            }
        }).draw();
    });
</script>