Google Charts API
Using CSV Files
Introduction
This page was written because Joe asked in the API user-supported group how to use data from a CSV file.
How to import data from a CSV doesn't seem well documented in the API or anywhere else. For example Stack Overflow has years old posts involving external libraries such as jquery.csv.js in posts such as How to use Google Chart with data from a csv, Create Google Chart from CSV input, and How to use a csv file with the google chart API?
The API documentation has Using an External Data Store which talks about using CsvDataSourceServlets while Reading CSV Files gets close to the solution but does not provide the full code. Also close is the thread Using CSV file to Populate DataTable in the API user-supported group.
Using the last group, I finally got it.
Querying a CSV File
The method is similar to the query used to get data from a Google Sheet that I use frequently.
Here a graph using data imported from a CSV file:
A div with the id of "csv-div" was created in the HTML
This is the CSV file:
Day,Status A,Status B,Status C
Monday,10,5,3
Tuesday,8,2,6
Wednesday,6,4,10
Thursday,12,8,4
Friday,4,12,2
Saturday,6,4,8
Sunday,10,6,4
This is the JavaScript that queries the CSV file and draws the chart:
<script type="text/javaScript">
// Load the Charts and the corechart package.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var queryOptions = {
// Define the CSV data columns
csvColumns: ['string', 'number', 'number', 'number'],
// This should be false if your CSV file doesn't have a header
csvHasHeader: true
}
// Create the query giving the path and name of the CSV file
var query = new google.visualization.Query('joe.csv', queryOptions);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('csv-div'));
chart.draw(data);
}
</script>
Dates and Times
The preferred date format in CSV files is yyyy-MM-dd (for example 2023-05-06) and for time is hh:mm:ss. (for example 11:29:32.352.)
If you try to use a CSV file with a date format using for example csvColumns: ['date', 'number'], in the calling query that the API does not understand such as dd-MM-yyyy (for example - 05-06-2023) you will get a warning saying that ".getTimezoneOffset is not a function".
Wrong date/time format error message
For more information on dates and times see the API documentation and that on Mozilla Web Docs.