More than two Google Charts on a single page?

Question

I've been struggling with this problem for a while now, and it seems like google has made a lot of minor changes to the Google Charts API over the years, which has been making it even harder to find an answer for why my charts aren't working.

I am simply trying to display more than two of the same chart type (Bar graphs) on a single page. Just today, I found a solution that allowed me to display 2 charts at once (link: "Google Charts stops drawing after first chart"), but this was only a minor win because I really need more than 2 charts to show, and this solution just forces one graph to render before the other.

Here is my current code:

Javascript

google.load('visualization', '1', {packages: ['corechart', 'line', 'bar']});      

google.setOnLoadCallback(drawStuff);

      function drawStuff() {
          
        // Courses_Played Data  
        var data = new google.visualization.arrayToDataTable([
          ['', 'Number of Rounds Played'],
          ["Ken McDonald", 10],
          ["ASU Karsten", 8],
          ["TPC Scotts...", 7],
          ["Ahwatukee", 3],
          ['Other', 3]
        ]);
          
        // Courses_played Options
        var options = {
          title: '',
          width: 440,
          height: 215,
          legend: { position: 'none' },
          axes: {x: {0: { side: 'bottom' }}},
          bar: { groupWidth: "70%" },
          colors: ['darkgreen'],
        };
          
          
        // Course_Scores Data
        var data2 = new google.visualization.arrayToDataTable([
          ['', 'Number of Rounds Played'],
          ["TPC Scotts...", 81],
          ["ASU Karst...", 83],
          ["Ken McDonald", 87],
          ["Ahwatukee", 90],
        ]);  
          
        //Course_Scores Options
          var options2 = {
          title: '',
          width: 440,
          height: 215,
          legend: { position: 'none' },
          axes: {x: {0: { side: 'bottom' }}},
          vAxis:{ viewWindow:{ min:60 }},
          bar: { groupWidth: "70%" },
          colors: ['darkgreen'],
        };
          
          
        var chart = new google.charts.Bar(document.getElementById('Courses_Played'));
google.visualization.events.addOneTimeListener(chart, 'ready', function(){

        var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
        // Convert the Classic options to Material options.
        chart2.draw(data2, google.charts.Bar.convertOptions(options2));
          });
          
      chart.draw(data, google.charts.Bar.convertOptions(options));    
      };

Again, this code currently works, but only because I used a solution that works for just two graphs. The problem seems to be in the final lines of code, because forcing chart2 to render before the first chart is what got it working. I just don't get what I need to do to allow for three or more graphs. Is there a way to force any number of charts to render one before the other?

there's a bug with multiple material charts of the same type, this answer may help. material charts are new and still in beta, last I checked. any chart loaded outside of the corechart package, is considered a material chart, e.g. line and bar... — WhiteHat
I don't really understand your problem. I did understand that it's a bad move to wait for one chart to be ready before drawing the other, but what's wrong with adding as many charts as you want without one interacting with others? I don't have any errors when adding multiple charts to the same page. — Marco Aurélio Deleu

Sushmit Dharurkar Sushmit Dharurkar · Accepted Answer · 2016-04-13T15:19:29

The problem in Google Charts is that you can call google.charts.load() only once. So you need to include all the packages in this single function call and call this from head of the webpage.

You can include multiple packages like this:

<head><script type="text/javascript">
google.charts.load("current", {packages:["corechart","bar"]});
</script>
</head>

This solved my problem and allowed me to display multiple charts on a single page without changing any code.

To verify check this: https://developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading

More than two Google Charts on a single page?

3 Answers