0

Mi objetivo es obtener una gráfica a partir de un array obtenido por JQuery

Importo el Google Chart

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

El bloque donde obtengo dicho array es el siguiente:

$.get("Inform.php?proyecto="+$("#Proyectos option:selected").text(), function( data ){
                $.each(data, function(id,value){
                    var tmp = {
                        'value1':""+value['value1']+"",
                        'value2':""+value['value2']+"",
                        'solution':""+value['solution']+""
                    };
                    ListaA.push(tmp);
                }); 
            });
            google.load('visualization', '1', {'packages': ['corechart']});
            google.setOnLoadCallback(drawChart);
            return;

Ahora la función drawChart()

function drawChart(){
    try{
        var dataTable = new google.visualization.DataTable(listaA);
        var options = {
            'title':'Title',
            'width':400,
            'height':300
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(dataTable, options); 
    }catch(err){
        alert(err.message);
    }
}

Finalmente el div donde quiero que se cargue mi gráfica

<div id="piechart" style="width: 900px; height: 500px;"></div>

Como habrán visto en el tercer bloque de código, he usado try/catch para verificar si obtengo errores y saber de qué tipo puede ser, pero al correr el código no sucede nada, ni carga el gráfico ni obtengo algún error. Intenté cargar el array resultante en una tabla y me muestra los resultados esperados, así que el problema no es un array null, a lo mejor estoy omitiendo un paso o lo hice mal al momento de usar la libreria de Google Chart.

Estoy atento a sus consejos y sugerencias sobre mi caso. Muchas gracias por su atención y tiempo.

4
  • 1
    Tu código difiere un poco de la documentación oficial. Según ésta, para cargar una gráfica se debe usar el objeto google.charts, lo mismo para asignar el callback. En tu código, estás llamando a load y setOnLoadCallback sobre el objeto google. ¿Estás seguro que debe funcionar como lo tienes?
    – gugadev
    el 27 dic. 2016 a las 17:25
  • Eso es lo que no sé, es la primera vez que lo uso, el array si llega con datos, así que ese no es el problema.
    – Gutierrez
    el 27 dic. 2016 a las 17:29
  • 1
    Los datos pueden llegar, una cosa es muy distinta es mostrarlos en la gráfica. Llama a load y setOnLoadCallback usando google.chars. en lugar de directamente google. Así lo dice la documentación oficial.
    – gugadev
    el 27 dic. 2016 a las 17:31
  • Bien, lo haré y te cuento luego como me fue, gracias :)
    – Gutierrez
    el 27 dic. 2016 a las 18:10

1 respuesta 1

1

Debes de tener algún detalle con el dataTable que le estas asignando:

var dataTable = new google.visualization.DataTable(listaA);
chart.draw(dataTable, options); 

Yo agregue los datos en un ciclo y funciona:

//Acomodo los datos para agregarlos al chart
    var dataChart = []
    $.each(datos,function(i, v) {
        console.log(v.producto + ' ' +  v.importeVenta  + ' \n' );
        dataChart.push([v.producto, v.importeVenta ]);
    });

Revisa el ejemplo:

  // Load the Visualization API and the corechart package.
  google.charts.load('current', {
    'packages': ['corechart']
  });

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);

  

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Producto');
    data.addColumn('number', 'Ventas');

    var datos = [{
    producto: 'Papitas',
    importeVenta: 1650.30
  }, {
    producto: 'Refresco',
    importeVenta: 6852.30
  }, {
    producto: 'Agua',
    importeVenta: 785.50
  }, {
    producto: 'Pan',
    importeVenta: 3812.00
  }, {
    producto: 'Frijol',
    importeVenta: 3805.00
  }, {
    producto: 'Huevos',
    importeVenta: 2005.10
  }, ]
    
	//Acomodo los datos para agregarlos al chart
    var dataChart = []
    $.each(datos,function(i, v) {
		console.log(v.producto + ' ' +  v.importeVenta  + ' \n' );
		dataChart.push([v.producto, v.importeVenta ]);
    });

    data.addRows(dataChart);

    /*
    data.addRows([
        ['Amazon', 1],
        ['Apple', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 1]
      ]);
      */

    // Set chart options
    var options = {
      'title': 'Ventas por producto',
      'width': 400,
      'height': 300
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


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

3
  • 1
    ¡Genial! Gracias por tu respuesta, voy a probar :)
    – Gutierrez
    el 27 dic. 2016 a las 19:16
  • 1
    Ya solucioné todo y fue gracias a tu aporte, disculpa la calificación tardía, tenía problemas con mi conexión a Internet. Saludos, un abrazo :)
    – Gutierrez
    el 2 ene. 2017 a las 21:46
  • Excelente Gracias :-) @Gutierrez el 2 ene. 2017 a las 22:16

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.