none
Datos Dinámicos en Gráficos en Google (https://developers.google.com/chart/) RRS feed

  • Pregunta

  • Estoy usando un script recomendado por Google charts. Los datos de la tabla me los acepta si los escribo directamente como tabla, pero no si los intento pasar dinamicamente con una variable:


    Ejemplo:

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'NoTerr');
    data.addColumn('number', 'Total Casas');
    data.addColumn('number', 'Avance');


    data.addRows([['1',327,41],['2',284,16],['3',305,46]]);  <<< ASI SI FUNCIONA EL GRAFICO

    PERO NO ASI:

    var  datos="[['1',327,41],['2',284,16],['3',305,46]]" (esta variable es el resultado de cargar dinamicamente los datos)

    data.addRows(datos); <<<< ASI NO FUNCIONA, NO SE CARGA NADA EN EL GRAFICO

    ¿QUE PASA?

    Me pregunto como debe ir la variable para que la interprete igual?


    Luis C


    jueves, 14 de febrero de 2019 2:45

Todas las respuestas

  • Hola Luis Carlos H:

    La variable datos es un string. Conviertela a Array

    data.addRows(datos.ToArray());

    Ya comentas

    jueves, 14 de febrero de 2019 6:03
  • Ya lo probe y nada... este es el codigo completo:

    ---------------------------

    <html>
    <head>
    <title>Avance</title>
    <script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
    <script type="text/javascript">
          google.charts.load('current', {'packages':['bar']});
          google.charts.setOnLoadCallback(drawChart);

          function drawChart() {
          
        var datos = document.getElementById("h1").value; // aqui se carga la variable desde el campo oculto de abajo
        
           
         var data = new google.visualization.DataTable();
           data.addColumn('string', 'NoTerr');
           data.addColumn('number', 'Total');
           data.addColumn('number', 'Avance');
          
          //opcion datos manuales ----- Funciona y carga el Grafico perfectamente
          data.addRows([['1',327,41],['2',284,16],['3',305,46],['4',462,47],['5',214,68],['6',221,37],['7',227,13],['8',235,42],['9',179,5],['10',591,28],['11',405,27]]);
           
     
     //opcion datos variable  -----No  Funciona, no carga el Grafico
     
         // data.addRows(datos.toArray()); // ?? como establecer la variable datos?
     

    var options = {
              chart: {
                title: 'Avance',
                subtitle: 'Territorio, Casas y Avances',
              }
            };


            var chart = new google.charts.Bar(document.getElementById('avance'));

            chart.draw(data, google.charts.Bar.convertOptions(options));
          }
          
        </script>
    </head>

    <body>

    <!-- BEGIN Form Hidden Field -->
    <form id="NewRecord1" method="post" name="hiden" action="post">
       <input type="hidden" id="h1" value="[['1',327,41],['2',284,16],['3',305,46],['4',462,47],['5',214,68],['6',221,37],['7',227,13],['8',235,42],['9',179,5],['10',591,28],['11',405,27]]" name="hn"></td>
            
    </form>
    <!-- END Form Hidden Field  -->


    <div id="avance" style="HEIGHT: 400px; WIDTH: 600px">
    </div>

    </body>
    </html>

    ----------------------------------------------------------------


    Luis C

    jueves, 14 de febrero de 2019 9:06