Varios gráficos en una misma pagina

[Rafael Laguna]

Hola, necesito saber como imprimir varios gráficos y sus tablas en una misma página, tengo el siguiente código que funciona bien pero solo para uno.

<script type="text/javascript">

google.load("visualization", "1", {packages:["corechart","table"]});

    google.setOnLoadCallback(drawTable);

    function drawTable() {

        var data = google.visualization.arrayToDataTable([

        <?php print $veccadena[2];?>

        ]);

        var opciones = {

          legend: {position:'right'},

          backgroundColor: 'none',

          hAxis: {title: 'Nro de habitantes', titleTextStyle: {color: 'blue'}},

          vAxis: {title: 'Municipios', titleTextStyle: {color: 'blue'}, textStyle:{fontSize: 10}},

          bar: { groupWidth: '80%' },

        isStacked: true

        };

        var table = new google.visualization.Table(document.getElementById('table_div'));

        var formatter = new google.visualization.NumberFormat(

{negativeColor: 'red', negativeParens: true, fractionDigits:0});

formatter.format(data, 1); // Apply formatter to second column

        table.draw(data, {showRowNumber: true, width:'100%', allowHtml:true});

var chart = new google.visualization.BarChart(document.getElementById('grafico_div'));

  chart.draw(data, opciones);

    }

    $(window).resize(function(){

  drawTable();

});

</script>

y llamo a este gráfico y su tabla con:

<div id="grafico_div"></div>

<div id="table_div"></div>

Ahora, las cadenas de datos ya las tengo armadas y guardadas en un array de php llamado $veccadena[], cada posición del array tiene una cadena diferente, lo que necesito es generar un grafico con su tabla por cada una de los valores del array.

[Sergey Grabkovsky]

Hi Rafael,

If I understand correctly, you want to have multiple charts, one for each index in your $veccadena array. In order to do this, you will need to loop over your array and create separate div elements for each item in the array. I'm not a PHP expert, but I expect that it might look something like this:

<script type="text/javascript">

google.load("visualization", "1", {packages:["corechart","table"]});

    google.setOnLoadCallback(drawCharts);

    function drawCharts() {

        var data, table, chart, opciones, formatter;

<?php foreach ($veccadena as $index => $data) { ?> // Iterate over your PHP array.

        data = google.visualization.arrayToDataTable([

        <?php print $data; ?>

        ]);

        opciones = {

          legend: {position:'right'},

          backgroundColor: 'none',

          hAxis: {title: 'Nro de habitantes', titleTextStyle: {color: 'blue'}},

          vAxis: {title: 'Municipios', titleTextStyle: {color: 'blue'}, textStyle:{fontSize: 10}},

          bar: { groupWidth: '80%' },

         isStacked: true

        };

       table = new google.visualization.Table(document.getElementById('table<?php print $index; ?>_div'));

       formatter = new google.visualization.NumberFormat(

{negativeColor: 'red', negativeParens: true, fractionDigits:0});

formatter.format(data, 1); // Apply formatter to second column

        table.draw(data, {showRowNumber: true, width:'100%', allowHtml:true});

chart = new google.visualization.BarChart(document.getElementById('grafico<?php print $index ?>_div'));

   chart.draw(data, opciones);

<?php } ?> // Remember that we need to close the foreach loop.

    }

    $(window).resize(function(){

   drawTable();

});

</script>

Then you will need another iteration over your PHP array in order to create the actual div elements. It might look something like this:

<?php foreach ($veccadena as $index => $data) { ?>

  <div id="table<?php print $index ?>_div"></div>

  <div id="grafico<?php print $index ?>_div"></div>

<?php } ?>

I hope this helps, but I may be misunderstanding what you're trying to do.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Rafael Laguna]

Hola Sergey, es exactamente lo que buscaba MUCHAS GRACIAS

sin embargo todas las gráficas tiene el mismo alto y los textos del eje Y se sobreponen, como hacer para que el alto de cada gráfico se adecue a la cantidad de datos que tenga?

gracias nuevamente

Rafael

[Sergey Grabkovsky]

Could you post a link to your page? If that's not possible, could you post a screenshot of the issue?

¿Podría publicar un enlace a su página? Si eso no es posible, ¿podría enviar una captura de pantalla de la cuestión?

--