# An SVG Line chart using the CSV reader

A simple Line chart that's using the CSV reader that's a part of RGraph. The CSV data is embedded in the page using a DIV tag. The CSV reader then reads this DIV and retrieves the CSV data.

Note: For browser security reasons the AJAX demos don't work offline (this demo is using the CSV reader option that reads data that's embedded in the page itself). You can view the demos on the RGraph website here: https://www.rgraph.net/demos/index.html#svg
Richard,8,4,7,6,5,3,4 Dave,7,4,6,9,5,8,7 Luis,4,3,5,2,6,5,4 Kevin,4,2,8,9,6,7,3 Joel,4,5,1,3,5,8,6 Pete,4,5,6,3,5,8,6

This goes in the documents header:

    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.common.ajax.js"></script>
    <script src="RGraph.svg.common.csv.js"></script>
    <script src="RGraph.svg.bar.js"></script>

Put this where you want the chart to show up:

    <div id="klkl" style="display: none">
        Richard,8,4,7,6,5,3,4
        Dave,7,4,6,9,5,8,7
        Luis,4,3,5,2,6,5,4
        Kevin,4,2,8,9,6,7,3
        Joel,4,5,1,3,5,8,6
        Pete,4,5,6,3,5,8,6
    </div>

    <div style="width: 750px; height: 300px" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        new RGraph.CSV('id:klkl', function (csv)
        //new RGraph.CSV('/sample.csv', function (csv)
        {
            /**
            * Fetch the first row of the CSV file, starting at the second column
            */
            var data = csv.getRow(0, 1);

            /**
            * Fetch the first column which become the labels
            */
            var labels = csv.getCol(0)
                labels.push('Fred')

            var bar = new RGraph.SVG.Bar({
                id: 'chart-container',
                data: data,
                options: {
                    xaxisLabels: labels
                }
            }).draw();
        });
    </script>