CODEWITHSUNDEEP
phpjavascriptajaxgoogle-apigoogle-visualization
Keyur Padalia
Keyur Padalia

Reputation: 2097

How to load dynamic data into google pie chart?

I am using an ajax function to get data for rendering Google Pie chart and loading those data in javascript but some how the Pie chart is not rendering but when i hard code the AJAX output into javascript pie chart function it does render perfectly. Below is my code can any one tell me what's wrong? thank you for your help.

this is what it looks like when it works 

<?php
$sales_data = koolajax.callback(get_asin_repo($asin,$sku));
?>

JS here:

// AJAX Output is ['POS', 'Sold This Month'],['AZN CG UK',893],['AZN JT UK',449],['AZN PT UK',1349]

        alert($sales_data);

        //var data = google.visualization.arrayToDataTable([$sales_data]);//This doesn't work

        //This Works
        var data = google.visualization.arrayToDataTable([['POS', 'Sold This Month'],['AZN CG UK',893],['AZN JT UK',449],['AZN PT UK',1349]]);

        var options = {
            title: 'Statistics For '+$asin
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
        chart.draw(data, options);

Upvotes: 3

Views: 7775

Answers (3)

Muhammad Shahzad
Muhammad Shahzad

Reputation: 9652

Google pie chart get data from PHP

I have been searching since 4 hours how to populate data from PHP to google pie chart but not found any solution, actually, my data format was wrong in PHP. You can prepare data in PHP using this way:

function yourFunction(){
    $data = array();
    $data[0] = array("Status", "Revenue");
    $data[1] = array('Pending', 500);
    $data[2] = array('Confirmed', 1000);
    $data[3] = array('Payable', 3000);
    return json_encode($data );
}

Parse data on frontend:

var obj = JSON.parse(data);
var data = new google.visualization.arrayToDataTable(data);

Upvotes: 0

Keyur Padalia
Keyur Padalia

Reputation: 2097

it Was really simple. all i need to do was get data from DB in JSON format and pass it in

var data = new google.visualization.DataTable($sales_data);

function instead of 

var data = google.visualization.arrayToDataTable([$sales_data])

And it works. Thank you all for your support and time...........

Upvotes: 1

cavila
cavila

Reputation: 7942

You must check the kind of variable returned from server and pack it in way that GoogleChart understands.

In your case, you requested that google.visualization.arrayToDataTable to create a DataSource instance for you. But that static method also requires that YOU follow this rule:

This method takes in a 2-dimensional array and converts it to a DataTable. See the Google Charts Documentation

So make a check before calling that routine.

if ( $sales_data instanceof Array )
{
  var willWork = [];
  var entry;
  while ( $sales_data.length )
  {
    entry = $sales_data.shift();
    if ( !(entry instanceof Array) || entry.length < 2 )
      window.alert( 'Incorrect server return. Call support.' );
    willWork.push( entry );
  }
}
else
  window.alert( 'Incorrect server return. Call support.' );

Upvotes: 0

Related Questions