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.

Use console.log(). Use it to check data inside $.get, then ListaA after the .push, etc... Check if every value is as expected, until you find the one that isn't and explaines the results you're getting, or not getting — myfunkyside
– myfunkyside, Commented Dec 27, 2016 at 10:09

zer00ne · Accepted Answer · 2016-12-27 12:26:00Z

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>

answered Dec 27, 2016 at 12:26

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gutierrez Over a year ago

Awesome, i gonna try your solution and tell you later if it worked. Thank you very much.

zer00ne Over a year ago

That's gr8. If it works don't forget to check the green ✔ and if it doesn't, we can figure it out, I feel that we're very close to a solution, even if it does fail, if you get a red error message that's a good sign (well not as good as success of course)

Gutierrez Over a year ago

Your answer worked great, thank you very much, sorry for the late answer, i had some Internet problems. You're awesome ;)

Collectives™ on Stack Overflow

Google Chart From JQuery Array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related