# A basic Bar chart using CSV data

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>