CODEWITHSUNDEEP
javascriptjquerychartsgoogle-visualizationlinechart
Gauthier
Gauthier

Reputation: 1256

Google Chart doesn't display when drawing multiple charts dynamically

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.

source code

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>

Upvotes: 1

Views: 1087

Answers (2)

limawebdev
limawebdev

Reputation: 75

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);

Upvotes: 1

Gauthier
Gauthier

Reputation: 1256

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 ...

Upvotes: 1

Related Questions