Uso correcto API Google Chart

JavierMMM · #1 (**permalink**) 21/11/2014, 12:37

Tengo la situación del uso correcto de google.load(); dentro de mi proyecto.

Los datos de la gráfica los obtengo de la bd, y como son varias gráficas las que desep hacer, hago una lista de opciones y mando los datos por poss de jquery, de la siguiente manera:

Código Javascript:

Ver original$('#gXu').on("click", function(event){
                $('#opciones').hide();
                $('#1').show();
                $('#resultc').show();
                $('#return').show();
 
                var axin = 11;
                $.post("estadisticas_control.php",{axn: axin, id_curso: <?php echo $id_curso; ?>, id_usuario: <?php echo $id_usuario; ?>, id_apartado: <?php echo $id_apartado; ?>}).done(function(data){
                    $("#resultc").empty().append(data);
                });
            });

La cuestión es, que cuando muestro la gráfica, la opción

Código Javascript:

Ver originalgoogle.load("visualization", "1", {packages:["barchart"]});

intenta abrir una nueva página y nunca visualizo nada. No se si es porque mando llamar a un archivo adicional (estadisticas_control.php), porque en el ejemplo que hice no tuve problema alguno.

El ejmplo que me funciona correctamente es el siguiente:

Código PHP:

 
 <?php

    require_once($_SERVER['DOCUMENT_ROOT']."/assets/header.php");

    require_once($_SERVER['DOCUMENT_ROOT']."/config.php");

    require_once($_SERVER['DOCUMENT_ROOT']."/lib/estadistica_class.php");

      $a = new estadistica($sqli);

      

      $id_curso = 2;

      $id_apartado = 2;

      $a->id_curso = $id_curso;

      $a->id_apartado = $id_apartado;

 
    ?>    

    <meta name="tipo_contenido"  content="text/html;" http-equiv="content-type" charset="utf-8">

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

 
        var arrayJS=<?php echo $a->get_estadist_JS(); ?>;

        var grafica = new Array();

        var toPush1 = new Array();

 
        if(!arrayJS){

          newTable = '<td><p>No hay datos disponibles</p></td>'; 

        }else{

 
            toPush1.push("Usuario","Participaciones");

            grafica.push(toPush1);

 
            $.each(arrayJS, function(key, value){ 

               tp = new Array();

               tp.push(value["usuario"],parseInt(value["cuantos"]));

 
              grafica.push(tp);

            });

        } 

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

        google.setOnLoadCallback(drawChart);

 
 
      function drawChart() {

        var data = google.visualization.arrayToDataTable( grafica );

 
        var options = {

          title: 'XxXxXxXx',

          vAxis: {title: 'Alumno',  titleTextStyle: {color: 'red'}}

        };

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

        chart.draw(data, {width: 1000, height: 740, is3D: true}, options);

      }

    </script>

  <body>

    <div class="col-sm-9 col-md-10 main">

        <div class="col-md-12">  

          <br />

          <div id="chart_div" ></div>

        </div>

    </div>

  </body>

¿Qué estaré haciendo mal?