Multiple Instances of Google Visualizations Chart Inside Separate Divs [Followup]

Question

This is a followup to a question I've already asked on StackOverflow. So please make sure you read that one to get the whole picture:

Multiple Instances of Google Visualizations Chart Inside Separate Divs

So in an attempt to make this whole thing dynamic, I wrote the following code:

var containers = document.getElementsByClassName('gaugeWrapper');
    console.log(containers);
    google.load('visualization', '1', { packages: ['gauge'] });
    for(var i = 0; i < containers.length; i++) {
        var id = containers[i].getAttribute('id');
        var name = containers[i].getAttribute('data-name');
        var value = containers[i].getAttribute('data-value');
        google.setOnLoadCallback(function () { drawChart(id, name, value) });

    }

    function drawChart(id, name, value) {
        console.log(id);
        console.log(name);
        console.log(value);
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          [name, value]
        ]);

        var options = {
            width: 400, height: 120,
            redFrom: 90, redTo: 100,
            yellowFrom: 75, yellowTo: 90,
            minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById(id));
        chart.draw(data, options);
    }

This does not work. The problem is that the console outputs the data of the last div only. Which means that the function is being called 5 (containers.length) times with the same set of parameters.

UPDATE:

As per Ateszki's answer, here's my updated code:

    google.load('visualization', '1', { packages: ['gauge'] });     
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var containers = document.getElementsByClassName('gaugeWrapper');
        for (var i = 0; i < containers.length; i++) {

            var id = containers[i].getAttribute('id');
            var name = containers[i].getAttribute('data-name');
            var value = containers[i].getAttribute('data-value');

            var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          [name, value]
                ]);

            var options = {
                width: 400, height: 120,
                redFrom: 90, redTo: 100,
                yellowFrom: 75, yellowTo: 90,
                minorTicks: 5
            };
            var cont = document.getElementById(id);
            console.log(cont);
            var chart = new google.visualization.Gauge(cont);
            chart.draw(data, options);
        }
    }

Unfortunately, I still couldn't get it to work, yet. Now nothing renders on the screen, although my console.log's seem to output the right things...

Any explanations/suggestions?

score 1 · Answer 1 · answered Jun 01 '12 at 11:42

1

The function that you are binding onload is overwriting the previous one.

Maybe you can store the values in another object and load them all at once in one function.

answered Jun 01 '12 at 11:42

Ateszki

2,243
1
16
13

Thanks for the suggestion, should've thought about it. But anyway, I figured out I was doing it all wrong. I've changed my code, but it still does not work. Nothing shows up for some reason... – Kassem Jun 01 '12 at 12:25

score 1 · Accepted Answer · answered Jun 01 '12 at 12:32

Ok the following has solved the problem:

    google.load('visualization', '1', { packages: ['gauge'] });     
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        var containers = $('.gaugeWrapper');
        containers.each(function (index, elem) {

            var id = $(elem).attr('id');
            var name = $(elem).data('name');
            var value = $(elem).data('value');

            var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          [name, value]
                ]);

            var options = {
                width: 400, height: 120,
                redFrom: 90, redTo: 100,
                yellowFrom: 75, yellowTo: 90,
                minorTicks: 5
            };
            var cont = document.getElementById(id);
            var chart = new google.visualization.Gauge(cont);
            chart.draw(data, options);
        });

I do not know how it differs from the code in the updated section of the question except for the fact that I am now using jQuery to grab the values I'm looking for...

Multiple Instances of Google Visualizations Chart Inside Separate Divs [Followup]

2 Answers2