javascript - Google Charts stops drawing after first chart

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=""></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: /

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.

What I want to do

Show multiple Barcharts on one Page

What I already did

My Code

<script type="text/javascript" src="https://www.google./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/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.

Share Improve this question edited May 23, 2017 at 11:46 CommunityBot 11 silver badge asked Oct 5, 2015 at 9:11 Simon Balling 5211 gold badge5 silver badges16 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

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./jsapi"></script>
<div id="chart_div1"></div>
<div id="chart_div2"></div>

For anyone who runs into this problem in 2016, you may have code like I did which referred to an older version of Google Charts. Update your references to follow the latest guidelines at https://developers.google./chart. In my case, the following line-for-line changes fixed the issue:

old:

<script type="text/javascript" src="https://www.google./jsapi"></script>
google.load('visualization', '1.1', {'packages':['bar']});
google.setOnLoadCallback(drawCharts);
var chart = new google.charts.Bar(document.getElementById('myDivId'));
chart.draw(data, google.charts.Bar.convertOptions(options));

new:

<script type="text/javascript" src="https://www.gstatic./charts/loader.js"></script>
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawCharts);
var chart = new google.visualization.ColumnChart(document.getElementById('myDivId'));
chart.draw(data, options);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Google Charts stops drawing after first chart - Stack Overflow

What I want to do

What I already did

My Code

The Problem

What I want to do

What I already did

My Code

The Problem

2 Answers 2

与本文相关的文章

评论列表(0)