# A basic Bar chart using CSV data (with column based data)

This basic example uses AJAX to request a CSV file as with basic-csv.html but unlike that example this CSV file holds each data-set as columns instead of rows. 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.common.key.js"></script>
    <script src="RGraph.line.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 text   = this.responseText.split(/\r?\n/);
                var labels = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
                var data   = [];
                var key    = text[0].split(/,/);

                for (var row=1; row<text.length; ++row) {

                    var cells = text[row].split(/,/);

                    for (var i=0; i<cells.length; ++i) {

                        if (!data[i]) data[i] = [];

                        // Add the value that hs been retrieved from the CSV file. Remember that because the CSV file is a
                        // text file - it needs to be converted to a number first
                        data[i].push(Number(cells[i]));
                    }
                }

                var line = new RGraph.Line({
                    id: 'cvs',
                    data: data,
                    options: {
                        textAccessible: true,
                        linewidth: 2,
                        shadowColor: '#ccc',
                        labels: labels,
                        hmargin: 5,
                        scaleDecimals: 2,
                        unitsPre: '£',
                        gutterLeft: 45,
                        key: key,
                        keyPosition: 'gutter',
                        keyPositionGutter: {
                        keyPositionGutterBoxed: false
                    }
                }).draw();
            }

            /**
            * Make the AJAX call that fetches the CSV data. You could just as easily
            * use the jQuery AJAX functionality if you prefer
            */
            RGraph.AJAX('/sample2.csv', callback);
        };
    </script>