Múltiples instancias del gráfico de visualizaciones de Google dentro de divisiones separadas [Seguimiento]

Esta es una continuación de una pregunta que ya hice en StackOverflow. Así que por favor asegúrese de leerlo para obtener una imagen completa:

Múltiples instancias del gráfico de visualizaciones de Google dentro de divisiones separadas

Entonces, en un intento de hacer que todo esto sea dinámico, escribí el siguiente código:

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

Esto no funciona. El problema es que la consola solo genera los datos del último div. Lo que significa que la función se llama 5 (containers.length) veces con el mismo conjunto de parámetros.

ACTUALIZACIÓN:

Según la respuesta de Ateszki, aquí está mi código actualizado:

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

Desafortunadamente, todavía no pude hacerlo funcionar, todavía. Ahora nada aparece en la pantalla, aunque mi console.log parece mostrar las cosas correctas...

¿Alguna explicación/sugerencia?

preguntado el 01 de junio de 12 a las 12:06

2 Respuestas

La función que está vinculando en carga está sobrescribiendo la anterior.

Tal vez pueda almacenar los valores en otro objeto y cargarlos todos a la vez en una función.

Respondido el 01 de junio de 12 a las 12:06

Gracias por la sugerencia, debería haberlo pensado. Pero de todos modos, me di cuenta de que lo estaba haciendo todo mal. He cambiado mi código, pero todavía no funciona. No aparece nada por alguna razón... - Kassem

Ok, lo siguiente ha resuelto el problema:

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

No sé en qué se diferencia del código en la sección actualizada de la pregunta, excepto por el hecho de que ahora estoy usando jQuery para obtener los valores que estoy buscando...

Respondido el 01 de junio de 12 a las 13:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.