javascript - Google Charts stops drawing after first chart

Question

What I want to do

Show multiple Barcharts on one Page

What I already did

The Barcharts have prevously been Linecharts. As Linecharts I could show two Charts on the same page without a problem. I used two seperate drawChart()-functions for them. I then converted the charts to Barcharts (material design). Now it only shows one chart. I already searched for an answer and found this: How to add two Google charts on the one page? I follow this and it still doesn't work.

My Code

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1.1", {
        packages: ["Bar"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        var data1 = new google.visualization.DataTable();
        data1.addColumn("string", "Key1");
        data1.addColumn("number", "Value1");

        data1.addRows([
            ['2015.01', 65.5],
            ['2015.02', 52.6],
            ['2015.03', 45.5],
            ['2015.04', 40.7],
            ['2015.05', 68.7],
            ['2015.06', 56.4],
            ['2015.07', 38.4],
            ['2015.08', 45.2],
            ['2015.09', 45.2],
            ['2015.10', 4.8]
        ]);

        var data2 = new google.visualization.DataTable();
        data2.addColumn("string", "Key2");
        data2.addColumn("number", "Value2");

        data2.addRows([
            ['2015.01', 300.08],
            ['2015.02', 455.08],
            ['2015.03', 454.62],
            ['2015.04', 362.93],
            ['2015.05', 527.12],
            ['2015.06', 588.28],
            ['2015.07', 409.93],
            ['2015.08', 432.08],
            ['2015.09', 462.33],
            ['2015.10', 32.38]
        ]);

        var options = {};

        var chart1 = new google.charts.Bar(document.getElementById("chart_div1"));
        chart1.draw(data1, options);

        var chart2 = new google.charts.Bar(document.getElementById("chart_div2"));
        chart2.draw(data2, options);

    }


</script>

<div id="chart_div1"></div>
<div id="chart_div2"></div>

Best viewed here: https://jsfiddle.net/yrzf3v97/

The Problem

It only shows one chart. Most of the tme its the first but in sometimes its the second one. By using the alert()-function it can confirm that the code runs until the end.

Answer 1

It seems this behavior is related with draw function. In particular, the second chart is not rendered since chart SVG is not getting generated after draw function is invoked for the second time.

According to the documentation:

The draw() method is asynchronous: that is, it returns immediately, but the instance that it returns might not be immediately available.

For rendering multiple charts on the page you could consider the following approach: render the next chart once the previous one is rendered, for example:

var chart1 = new google.charts.Bar(document.getElementById("chart_div1"));
google.visualization.events.addOneTimeListener(chart1, 'ready', function(){
     //render chart2 once chart1 is rendered
     var chart2 = new google.charts.Bar(document.getElementById("chart_div2"));
     chart2.draw(data2, options);     
});
chart1.draw(data1, options);

Complete example

google.load("visualization", "1.1", { packages: ["Bar"] });
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data1 = new google.visualization.DataTable();
    data1.addColumn("string", "Key1");
    data1.addColumn("number", "Value1");

    data1.addRows([['2015.01', 65.5],
        ['2015.02', 52.6],
        ['2015.03', 45.5],
        ['2015.04', 40.7],
        ['2015.05', 68.7],
        ['2015.06', 56.4],
        ['2015.07', 38.4],
        ['2015.08', 45.2],
        ['2015.09', 45.2],
        ['2015.10', 4.8]]);

    var data2 = new google.visualization.DataTable();
    data2.addColumn("string", "Key2");
    data2.addColumn("number", "Value2");

    data2.addRows([['2015.01', 300.08],
        ['2015.02', 455.08],
        ['2015.03', 454.62],
        ['2015.04', 362.93],
        ['2015.05', 527.12],
        ['2015.06', 588.28],
        ['2015.07', 409.93],
        ['2015.08', 432.08],
        ['2015.09', 462.33],
        ['2015.10', 32.38]]);

    var options = {};
    drawCharts([{id: 'chart_div1', data: data1, options: options},{id: 'chart_div2', data: data2, options: options}]);
}



function drawCharts(chartsOptions,index)
{
    var curIndex = index || 0;
    var chartOptions = chartsOptions[curIndex];
    var chart = new google.charts.Bar(document.getElementById(chartOptions.id));
    google.visualization.events.addOneTimeListener(chart, 'ready', function(){
       if(curIndex < chartsOptions.length - 1)
          drawCharts(chartsOptions,curIndex+1);
    });
    chart.draw(chartOptions.data, chartOptions.options);
}

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