Importing data from a CSV file

Summary: There's now a CSV reader in RGraph that makes reading CSV files easier. It reads the files by AJAX and has methods such as getRow() and getCol(). This documentation also applies to the SVG CSV reader.

Warning! This CSV importer can now be used standalone - so you don't need to include the RGraph core library and thus it's easier for you to use it with your own applications or code.
[No canvas support]
An SVG based CSV example


As of October 2013 there's now a CSV reader object that is part of RGraph.

This object helps you fetch and read the contents of CSV files that are held on your server.

This could make it easier for you to get information from your database. You can have a server-based script that gets data from your database and outputs it as a CSV file. Then use this CSV reader to read it and get the data from it.

Alternatively you might have a CSV file that's generated by a server based application so you can then read it using this CSV reader.

The chart above uses the CSV reader to fetch this file and then format it into usable data.

An example

    * This fetches the CSV file and shows the Bar chart
    var csv = new RGraph.CSV('/sample.csv', function (csv)
        // Get the first column which becomes the labels
        var labels  = csv.getCol(0),
            // Get the second column which becomes the data
            data    = csv.getCol(1),
            // Get the number of rows in the CSV
            numrows = csv.numrows,
            // Get the number of columns in the CSV
            numcols = csv.numcols;

        // Create the chart
        var bar = new RGraph.Bar({
            data: data,
            options: {
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                title: 'A chart using the CSV reader',
                colors: ['#000'],
                xaxis: false,
                yaxis: false,
                marginTop: 35,
                shadow: false,
                colorsStroke: 'rgba(0,0,0,0)',
                textSize: 14,
                labelsAbove: true,
                labelsAboveSpecific: labels,
                labelsAboveSize: 14,
                labelsAboveOffset: -35,
                labelsAboveColor: 'white'


Constructor(URL, callback[, separator[, end-of-line]])
You use the constructor to create and fetch the CSV file. It takes two arguments:

row = getRow(index[, start])
This function fetches a row of data from the CSV and returns it (as an array). Optionally you can give the column index to start at (the column numbering starts from 0). eg row = csv.getRow(3, 1);

col = getCol(index[, start])
This function fetches a column of data from the CSV and returns it (as an array). Optionally you can give the row index to start at (the row numbering starts from 0). eg col = csv.getCol(3, 1);

Trailing end-of-lines

Note that trailing EOLs (eg \r\n) are stripped automatically.

Database integration

By using the CSV file reader you can make integrating with a database easier. You can have a server-side script that retrieves data from the database and outputs it like this (or like this).

You can then request that CSV file using the CSV file reader and that allows you to get the data into RGraph.

Reading a DIV tag instead of a file

[No canvas support]

Instead of reading a CSV file from your server you can also embed the CSV data into a hidden DIV in your page.

If your server has high response times you may prefer this in place of an extra AJAX round-trip to your server to fetch the data.

The code is very similar, though instead of a filename you would use a DIV tags ID - like this:

    window.onload = function ()
        * This fetches the CSV file and shows the Bar chart
        var csv = new RGraph.CSV('id:myDiv', function (csv)
            // Create the chart here

If you view the source of this page you can see the hidden DIV tag (at the bottom of the page) which contains the CSV data.

Demo pages

There is lots of demos of the CSV reader in the download archive They have the words csv-reader or at least csv in the filename.

External links