Google Chart doesn't display when drawing multiple charts dynamically

Question

I receive some datas with ajax, and I would like to display it as google line charts. I don't know how many chart I have to display, so I have made it dynamic using a javascript forEach to call my function drawchart();

Here I receive the datas :

$j.ajax({
        type: "GET",
        url: "../"+folder_destination+"slimrest/getValues",
        data: "",
        success: function(msg){
            msg.forEach(function(entry) {
                drawchart(entry['id'], entry['data']);
            });
        }
});

Here is my function which is supposed to add a div with a unique ID then draw the chart inside :

function drawchart(id_rec){

    $j("#charts_cartes").append("<div id=\"gchart_"+id_rec+"\"></div>");

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'max');
    data.addColumn('number', 'min');
    data.addColumn('number', 'Mesures');

    //Will be dynamic as soon as I'll be able to print more than one chart
    data.addRows([
      [1,  37.8, 80.8],
      [2,  30.9, 69.5]
    ]);

    var options = {
      width: 500,
      height: 200
    };

    var chart = new google.charts.Line(document.getElementById('gchart_'+id_rec));
    chart.draw(data, options);
}

I see my divs in the html code, but the second chart is never displayed.

It seems that the <svg></svg> balise is empty for one of the charts :

<div id="charts_cartes">
    <div id="gchart_39">
        <div style="position: relative; width: 500px; height: 200px;">
            <div
                style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
                <svg width="500" height="200">
                    <defs><!-- [chart code well displayed but too long to write here] --></defs>
                </svg>
            </div>
        </div>
    </div>
    <div id="gchart_40">
        <div style="position: relative; width: 500px; height: 200px;">
            <div
                style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
                <svg width="500" height="200">
                <defs></defs></svg>
            </div>
        </div>
    </div>
</div>

There is a problem/bug with displaying multiple _material_ charts. This [answer](http://stackoverflow.com/a/32907208/5090771) should help... — WhiteHat, Dec 23 '15 at 15:01
Thanks for the update. I didn't think it could be a google-visualisation issue ... — Gauthier, Dec 23 '15 at 15:02

score 1 · Accepted Answer · answered Dec 28 '15 at 10:02

1

Problem fixed adding a setTimeout to the draw function of the googlechart :

setTimeout(function(){ chart.draw(data, options); }, 1000);

There must be some conflicts if drawing to much charts almost simultaneously ...

answered Dec 28 '15 at 10:02

Gauthier

1,116
2
16
39

score 1 · Answer 2 · answered Dec 25 '16 at 08:55

The solution above works, but setTimeout with just 1 millisecond works, so that if you're dynamically generating the charts with some display logic, it won't be loading for 1000 milliseconds.

So this also worked for me in an AngularJS app.

setTimeout(function(){ chart.draw(data, options); }, 1);

Google Chart doesn't display when drawing multiple charts dynamically

2 Answers2