Google Chart a Partir de Array de JQuery

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.

0
задан 27.12.2016, 17:33
0 ответов

У тебя, должно быть, есть какая-то деталь с dataTable который ты распределяешь ему:

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

Я добавил данные в цикле и функционируй:

//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 ]);
    });

Проверь пример:

  // 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>
1
ответ дан 03.12.2019, 17:58
  • 1
    ¡ Гениальный! Спасибо за твой ответ, я попытаюсь :) –  27.12.2016, 21:16
  • 2
    Уже solucioné совсем и он пошел благодаря твоему вкладу, извини calificació n tardí в, tení в проблемы с моим conexió n в Интернет. Привет, объятие :) –  02.01.2017, 23:46
  • 3
    Превосходный Спасибо :-) @Gutierrez –  03.01.2017, 00:16

Теги

Похожие вопросы