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?