Google Charts with CSV file
Joe Davies
I have the following html which works fine in producing a stacked column chart with Google Charts. I want to replace the static data in the html with an external csv file and am unable to get it to work.
Static Example (This works fine)
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['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]
]);
var options = {
title: 'Status Values by Day',
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I have replaced the var data block with the following block of code to reference a 'data.csv' file.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'Status A');
data.addColumn('number', 'Status B');
data.addColumn('number', 'Status C');
data.load('data.csv', {'header': true, 'delimiter': ','});
The 'data.csv' file is formed as follows and I have it in the same folder as the html 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
When I now open the html file it is blank, I'd like to know where I have gone wrong. Thank you in advance for any help or pointers you can give me.
Joe Davies
When I open the html file it is blank, I'd like to know where I have gone wrong. Thank you in advance for any help or pointers you can give me.
Ray Thomas
// Load the Charts and the corechart package.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// 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('mycsv.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>
Joe Davies
What a top man you are, may your generosity be returned to you a hundredfold! I took the liberty of looking around your website https://brisray.com/which contains all sorts of interesting stuff and note that you are now living in happy exile but still have a passion for all things Bristolian which is about an hours drive from where I live in Bridgend, S Wales. Take care and thanks again!