Google Chart From JQuery Array

Question

this time i'm studying Google Charts, the following code shows how i get an array to send it to the function to draw the chart:

$.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 HTML element to load the chart is this one

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

As you can see on second block of code i used try/catch to know what kind of error i could get from there but i got nothing, no errors, no chart drawed, maybe i did something wrong on the array or calling the chart function, i don't know.

I hope you can help me how to call properly this function in order to get the chart related with my array. Thank you for your time and attention.

Answer 1

Need to load Google Visualization API:

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

Also, when loading corecharts, the namespace is:

google.charts.load and google.charts.visualization

Not:

google.load and google.visualization

In this working Snippet, we have replaced this:

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

with a simple array of arrays (aka multi-dimensional array, aka data table) and the arrayToDataTable() method. There are many ways to collect and format the data before using Google Visualization, but AFAIK, that data is going to end up as an array of arrays, or a very complicated JSON that represents an array of arrays. However we prepare our data, we should remember that the first column must be strings (if we have horizontal and vertical table headers, then it's first row and first column.)

The source of data is unknown and even if they were accessible, the data would still be questionable. If I understand it, ListaA would be an array of objects. Each element looks like one row of headers and one row of data...not sure if that'll be accepted or not. You may have to have GV process your data into a DataTable another way instead of using arrayToDataTable() method.

If your data is arranged correctly, then just add the first three fixes and test it. If it's spitting out red highlighted error messages about DataTable and or data, then you'll need to present your data so it ends up as an array of arrays.

SNIPPET

/*

Replace: 

var data = [
      ['col', 'col','col'],
      ['value',1,2],
      ['solution',3,1]
      ];
      
With your own data: 

$.get("Inform.php?proyecto=" + $("#Proyectos option:selected") 
   ...
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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

<input id='data' type='hidden'>

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

<script>
  google.charts.load('visualization', '1', {
    'packages': ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {
      var data = [
      ['col', 'col','col'],
      ['value',1,2],
      ['solution',3,1]
      ];

      var dataTable = new google.visualization.arrayToDataTable(data);
      var options = {
        'title': 'Title',
        'width': 400,
        'height': 300
      };
      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      chart.draw(dataTable, options);

  }
</script>