Google Charts with CSV file

74 views
Skip to first unread message

Joe Davies

unread,
Apr 27, 2023, 6:30:50 AM4/27/23
to Google Visualization API

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

unread,
Apr 27, 2023, 11:11:11 AM4/27/23
to Google Visualization API

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

unread,
Apr 28, 2023, 1:44:03 AM4/28/23
to Google Visualization API
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

Joe Davies

unread,
Apr 28, 2023, 7:21:19 AM4/28/23
to Google Visualization API
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!

Ray Thomas

unread,
Apr 28, 2023, 3:07:22 PM4/28/23
to Google Visualization API
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.

Reply all
Reply to author
Forward
0 new messages