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?