CODEWITHSUNDEEP
javascriptgoogle-visualization
David
David

Reputation: 31

More than two Google Charts on a single page?

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?

Upvotes: 3

Views: 2791

Answers (4)

Andy D
Andy D

Reputation: 1

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

Upvotes: 0

Sushmit Dharurkar
Sushmit Dharurkar

Reputation: 45

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

Upvotes: 1

WhiteHat
WhiteHat

Reputation: 61222

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>

Upvotes: 0

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

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>

Upvotes: 0

Related Questions