MENU
.net Powerful JavaScript charts
About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 17 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Version 7.01 released
Version 7.01 (released in October 2025) is the latest version of RGraph and now includes a new tree structure object. The accompanying Treemenu object can then turn the object into a fully dynamic tree menu. You can read the API documentation for the tree on the main API documentation page and see an example of the Treemenu feature by following this link...

More »

 

New HTML datagrid
In the April 2025 (v6.21) release a new datagrid object was added. This makes it easy to add static or dynamic data tables to your pages. It can be used whether you use the canvas or SVG libraries or entirely standalone.

Read more »

 

Download
Get the latest version of RGraph (version 7.01, 8th October 2025) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

Download »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

CSV import utility

Introduction

Since October 2013 there's been 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 (though by using CORS, cross-origin HTTP requests can be made). It can also make it easier for you to get information from your database. You can have a server-based script that fetches data from your database and outputs it as CSV data. 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 that file using this CSV reader.

Note that the CSV importer can be used standalone - so you don't need to include the RGraph core library and it's easier for you to use it with your own applications or code.

In October 2021 this CSV objects API was expanded slightly to bring it into line with the HTMLTable connector.

An example

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

<canvas id="cvs" width="700" height="250">[No canvas support]</canvas>

<script>
    //
    // This fetches a CSV file and shows a Bar chart
    //
    var csv = new RGraph.CSV('/sample.csv', function (csv)
    {
        // Get the first column which becomes the labels
        var labels = csv.column(0),
        
            // Get the second column which becomes the data
            data = csv.column(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({
            id:'cvs',
            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'
            }
        }).wave();
    });
</script>

API documentation

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

Arguments

  • url: This is the URL of the CSV file to fetch. Because of AJAX security restrictions, it should use the same domain as the file that's making the request (though by using CORS, cross-origin HTTP requests can be made). This can also be a string containing the ID of a tag that you want to get data from - such as id:myDiv
  • callback: This should be a function that creates the chart. The function is passed the CSV object as an argument so that you can access the data.
  • separator: You can optionally specify the field-separator to use. This is given directly to the JavaScript split function so it can either be a string or a regular expression. It defaults to a comma (",")
  • end-of-line You can optionally specify the end-of-line to use. This is given directly to the JavaScript split function so it can either be a string or a regular expression. It defaults to an optional carriage return followed by a newline (/\r?\n/).
Name: row(index[, start[, length]])
Description: 
You use the constructor to create and fetch the CSV file. It takes two, three or four arguments: 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 numbering starts from 0). eg row = csv.row(3, 1) You can also optionally give a length which stipulates how many elements are returned to you.

Arguments

  • index: The only required argument to the function - this is the index of the row that you wish to fetch. Remember that the counting starts at zero (so csv.row(0) will fetch the first row).
  • start: This argument allows you to specify the column that the returned row data should start at. Remember that the counting starts at zero. It can be negative, in which case the counting for the start point starts at the end of the row data and goes backwards. This argument is optional.
  • length: This argument allows you to specify the number of columns that are returned in the row data by this function. It can be negative, in which case the returned array will stop at this many items from the end of the row. This argument is optional.
Name: column(index[, start[, length]])
Description: 
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.column(3, 1)You can also optionally give a length that stipulates how many elements are returned to you.

Arguments

  • index: The only required argument to the function - this is the index of the column that you wish to fetch. Remember that the counting starts at zero (so csv.column(0) will fetch the first column).
  • start: This argument allows you to specify the row that the returned column data should start at. Remember that the counting starts at zero. It can be negative, in which case the counting for the start point starts at the end of the column data and goes backwards. This argument is optional.
  • length: This argument allows you to specify the number of rows that are returned in the column data by the function. It can be negative, in which case the returned array will stop at this many items from the end of the column. This argument is optional.

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

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 the DIV tags ID - like this:


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

<div id="myDiv" 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>

<canvas id="cvs" width="750" height="350"></canvas>

<script>
    //
    // This fetches the CSV data from the <div> tag above and creates a Bar chart
    //
    var csv = new RGraph.CSV('id:myDiv', function (csv)
    {
        // Get the first row starting with the second column
        var data = csv.get(0, 1);

        var obj = new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                marginInner: 20
            }
        }).draw();
    }
</script>

If you use the window.onload event to create your chart(s) then that means that you can put the DIV tag that contains the CSV data anywhere you like on the page - including below the code that creates the chart. The DOMContentLoaded event would also work equally well in this case.


Demo pages

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