Composing JSON object for Google Chart API in PHP

This example from google document for using server side code uses the ready to use JSON data.
https://google-developers.appspot.com/chart/interactive/docs/php_example
Here is the example of using PHP to compose the same JSON data as the JSON data from Google’s example.

1. The exampleUsingPHP.html, this file will be the exact same as from the Google’s example.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
      
    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
          }).responseText;
          
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

2. The getData.php file, this will be the different from Google’s example. Instead of getting the ready to use JSON data from a file, we will compose the JSON data using PHP. It’s hard coded so it will create the same JSON data as the one provided from Google’s document, but you can change it to get the data from a database.

<?php 
// All to values below are hard coded to match the data provide from Google's document.
// You can always customize it to use the data from a databbase.
// If you use the data from a database, using a loop to create the values for cols and rows
// will be a good choice.
$col1=array();
$col1["id"]="";
$col1["label"]="Topping";
$col1["pattern"]="";
$col1["type"]="string";
//print_r($col1);
$col2=array();
$col2["id"]="";
$col2["label"]="Slices";
$col2["pattern"]="";
$col2["type"]="number";
//print_r($col2);
$cols = array($col1,$col2);
//print_r($cols);

$cell0["v"]="Mushrooms";
$cell0["f"]=null;
$cell1["v"]=3;
$cell1["f"]=null;
$row0["c"]=array($cell0,$cell1);

$cell0["v"]="Onion";
$cell1["v"]=1;
$row1["c"]=array($cell0,$cell1);

$cell0["v"]="Olives";
$cell1["v"]=1;
$row2["c"]=array($cell0,$cell1);

$cell0["v"]="Zucchini";
$cell1["v"]=1;
$row3["c"]=array($cell0,$cell1);

$cell0["v"]="Pepperoni";
$cell1["v"]=2;
$row4["c"]=array($cell0,$cell1);

//$rows=array($row0,$row1,$row2,$row3,$row4);
$rows=array();
array_push($rows,$row0);
array_push($rows,$row1);
array_push($rows,$row2);
array_push($rows,$row3);
array_push($rows,$row4);


//print_r($rows);

$data=array("cols"=>$cols,"rows"=>$rows);
//print_r($data);
echo json_encode($data);

Search within Codexpedia

Custom Search

Search the entire web

Custom Search