You're too kind Joe. Once I realized what you are supposed to do with the query language it was surprisingly easy to create the chart. I let myself get a bit confused by some of what I found on Stack Overflow at first, such as posts using external libraries to import the data, which aren't needed.
We get home whenever we can. My (American) wife is fascinated by places like Chepstow Castle and Stonehenge and thinks the UK is some sort of Twilight Zone - like the US but different. She's convinced herself that Ipswich is the real home of Harry Potter but still manages to put 8 syllables in Worcestershire. On Friday, April 28, 2023 at 7:21:19 AM UTC-4 Joe Davies wrote: > 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/4464ebca-e464-4ce0-8a59-72a5aebf2ef6n%40googlegroups.com.
