CSV import utility
- Introduction
- An example
- API documentation
- Trailing end-of-lines
- Database integration
- Reading a DIV instead of a file
- Demo pages
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 acsv
file and shows aBar 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
Constructor(URL, callback[, separator[, end-of-line]])
You use the constructor to create and fetch the csv
file. It takes two
arguments:
-
url
This is the URL of thecsv
file to fetch. Because ofajax
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 asid:myDiv
-
callback
This should be a function that creates the chart. The function is passed thecsv
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 thejavascript
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 thejavascript
split
function so it can either be a string or a regular expression. It defaults to:/\r?\n/
row = csv.row(index[, start[, length]])
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.row(3, 1)
You can also optionally give a length which
stipulates how many elements are returned to you.
-
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 (socsv.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.
column = csv.column(index[, start[, length]])
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.
-
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 (socsv.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 this 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.