It took a little bit of finding but I got the basics from a 9-year old
thread in this group. You have to use a query to get the data from the CSV
file.
Here's the code using your CSV file - i named it mycsv.csv
<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('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>
Here's a page that shows this working -
https://brisray.com/google-charts/csv.htm
On Thursday, April 27, 2023 at 11:11:11 AM UTC-4 Joe Davies wrote:
> 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.
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/a323d79c-a1ac-402b-aa41-0c1915bd714fn%40googlegroups.com.
