Ray Thomas, what can I say..., thank you so much for the effort you've gone
to in finding a solution for me, it's brilliant and it all worked straight
off the bat,. You have gone above and beyond my expectations!
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!
On Friday, April 28, 2023 at 6:44:03 AM UTC+1 Ray Thomas wrote:
> 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/d02fbb3e-60e7-4bea-aed4-9be1be579297n%40googlegroups.com.
