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](http://stackoverflow.com/questions/32884121/google-charts-drawing-multiple-bar-charts-with-dual-axis-in-ie/32907208#32907208) _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, Oct 13 '15 at 20:36
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, Oct 13 '15 at 20:37

score 1 · Answer 1 · answered Apr 13 '16 at 15:19

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

score 0 · Answer 2 · answered Oct 14 '15 at 10:19

The following example shows how to render 3 Google Charts (of google.charts.Bar type) on a single page:

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

google.setOnLoadCallback(drawCharts);

function drawCharts() {

    var chartsData = [
        {
            'data': [
                ['', 'Number of Rounds Played'],
                ["Ken McDonald", 10],
                ["ASU Karsten", 8],
                ["TPC Scotts...", 7],
                ["Ahwatukee", 3],
                ['Other', 3]
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Courses_Played'
        },
        {
            'data': [
                ['', 'Number of Rounds Played'],
                ["TPC Scotts...", 81],
                ["ASU Karst...", 83],
                ["Ken McDonald", 87],
                ["Ahwatukee", 90],
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                vAxis: { viewWindow: { min: 60 } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Course_Scores'
        },
        {
            'data': [
                ['', 'Number of Rounds Played in 2014'],
                ["Ken McDonald", 5],
                ["ASU Karsten", 4],
                ["TPC Scotts...", 7],
                ["Ahwatukee", 4],
                ['Other', 6]
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Courses_Played2014'
        },
    ];

 
    drawBarCharts(chartsData);

};



function drawBarCharts(chartsData,index) {
    var curIndex = index || 0;
    var chartData = chartsData[curIndex];
    var dataTable = new google.visualization.arrayToDataTable(chartData.data);
    var chart = new google.charts.Bar(document.getElementById(chartData.chartDivId));
    google.visualization.events.addOneTimeListener(chart, 'ready', function () {
        if (curIndex < chartsData.length - 1)
            drawBarCharts(chartsData, curIndex + 1);
    });
    chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options));
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="Courses_Played"></div>
<div id="Courses_Played2014"></div>
<div id="Course_Scores"></div>

or using this way where charts are inserted on the page dynamically

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

google.setOnLoadCallback(drawCharts);

function drawCharts() {

    var chartsData = [
        {
            'data': [
                ['', 'Number of Rounds Played'],
                ["Ken McDonald", 10],
                ["ASU Karsten", 8],
                ["TPC Scotts...", 7],
                ["Ahwatukee", 3],
                ['Other', 3]
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Courses_Played'
        },
        {
            'data': [
                ['', 'Number of Rounds Played'],
                ["TPC Scotts...", 81],
                ["ASU Karst...", 83],
                ["Ken McDonald", 87],
                ["Ahwatukee", 90],
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                vAxis: { viewWindow: { min: 60 } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Course_Scores'
        },
        {
            'data': [
                ['', 'Number of Rounds Played in 2014'],
                ["Ken McDonald", 5],
                ["ASU Karsten", 4],
                ["TPC Scotts...", 7],
                ["Ahwatukee", 4],
                ['Other', 6]
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Courses_Played2014'
        },
    ];

 
    drawBarCharts(chartsData);

};



function drawBarCharts(chartsData,index) {
    var curIndex = index || 0;
    var chartData = chartsData[curIndex];
    var dataTable = new google.visualization.arrayToDataTable(chartData.data);
    var chartDiv = document.createElement('div');
    chartDiv.id = chartData.chartDivId;
    document.getElementById('chartContainer').appendChild(chartDiv);
    var chart = new google.charts.Bar(document.getElementById(chartDiv.id));
    google.visualization.events.addOneTimeListener(chart, 'ready', function () {
        if (curIndex < chartsData.length - 1)
            drawBarCharts(chartsData, curIndex + 1);
    });
    chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options));
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chartContainer"></div>

when I run the first snippet (in IE 11), I only get 1 chart and this error --> Object doesn't support property or method 'contains' — WhiteHat, Oct 15 '15 at 14:53

score 0 · Answer 3 · answered Oct 15 '15 at 14:52

I think you're having a problem with the current version, which has issues.
You shouldn't need to wait for one chart to load before loading another.

Here is an example that loads version 41 --> all 3 charts draw, without waiting on another.

google.charts.load('41', {packages: ['bar']});
google.charts.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'],
    };

    // Courses_Played2014 Data
    var data3 = new google.visualization.arrayToDataTable([
        ['', 'Number of Rounds Played'],
        ["Ken McDonald", 14],
        ["ASU Karsten", 12],
        ["TPC Scotts...", 11],
        ["Ahwatukee", 7],
        ['Other', 7]
    ]);

    // Courses_played2014 Options
    var options3 = {
        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'));
    var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
    var chart3 = new google.charts.Bar(document.getElementById('Courses_Played2014'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
    chart2.draw(data2, google.charts.Bar.convertOptions(options2));
    chart3.draw(data3, google.charts.Bar.convertOptions(options3));
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>

<div id="Courses_Played"></div>
<div id="Courses_Played2014"></div>
<div id="Course_Scores"></div>

score 0 · Answer 4 · answered Jul 27 '22 at 19:16

0

Am using gviz_api python module to load data. In case helps: change arrayToDataTable to DataTable

answered Jul 27 '22 at 19:16

Andy D

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 29 '22 at 18:42

More than two Google Charts on a single page?

4 Answers4

Linked