Google Chart from JQuery Array

Question

Google Chart from JQuery Array

Navigation

#1 by (1 votes)

0

My goal is to obtain a graph from an array obtained by JQuery

I import the Google Chart

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

The block where I get that array is the following:

$.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;

Now the drawChart () function

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

Finally the div where I want my graph to be loaded

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

As you will have seen in the third block of code, I used try / catch to verify if I get errors and know what type it can be, but when running the code nothing happens, neither loads the graph nor I get an error. I tried to load the resulting array into a table and it shows me the expected results, so the problem is not a null array, maybe I'm missing a step or I did it wrong when using the Google Chart library.

I am attentive to your advice and suggestions on my case. Thank you very much for your attention and time.

javascript jquery array google-visualization

asked by Gutierrez 27.12.2016 в 16:33

source

1 answer

add class css to ng-mouseenter in angularjs Bootstrap menu added li active class onclick

score 1 · Accepted Answer

You must have some detail with the dataTable that you are assigning:

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

I added the data in one cycle and it works:

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

Review the example:

  // 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>