Menu
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 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.
601
asked Sep 18 '25 08:09
You can do it the folllowing way directly inside you HTML:
<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(createChart);
function createChart() {
var chartData = new google.visualization.Query('data.csv');
var options = {
title: 'Custom chart',
isStacked: true
};
chartData.send(function(response) {
if (response.isError()) {
console.error('Error message: ' + response.getMessage());
return;
}
var dataTable = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 600px; height: 440px;"></div>
</body>
</html>
Or as an option, you can replace script code with a reference to .js file where you put your code.
<script type="text/javascript" src="chartCreator.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With