Populating Data Using Server-Side Code

You can use server-side code to acquire data to populate your chart. Your server-side code can load a local file, query a database, or get the data in some other way. The following PHP example demonstrates reading chart data from a local text file when a page is requested. You can copy these files to your own server, if it supports PHP.

Note:This sample requires jQuery version 1.6.2 or later.

exampleUsingPHP.html file

This is the file that the user browses to. The drawChart() function calls the jQuery ajax() function to send a query to a URL and get back a JSON string. The URL here is of the local getData.php file. The returned data is actually a DataTable defined in the local sampleData.json file. This DataTable is used to populate a pie chart, which is then rendered on the page.

< html 
> <head> 
 <!--Load the AJAX API--> 
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></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.charts.load('current', {'packages':['corechart']}); 
  
 // Set a callback to run when the Google Visualization API is loaded. 
 google.charts.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 
>

getData.php File

When this file receives a request, it returns a copy of the local sampleData.json file.

< ?php 
 // This is just an example of reading server side data and sending it to the client. 
 // It reads a json formatted text file and outputs it. 
 $string = file_get_contents("sampleData.json"); 
 echo $string; 
 // Instead you can query your database and parse into JSON etc etc 
 ? 
>

sampleData.json File

A JSON version of a small DataTable .

 { 
  
 "cols" 
 : 
  
 [ 
  
 { 
 "id" 
 : 
 "" 
 , 
 "label" 
 : 
 "Topping" 
 , 
 "pattern" 
 : 
 "" 
 , 
 "type" 
 : 
 "string" 
 }, 
  
 { 
 "id" 
 : 
 "" 
 , 
 "label" 
 : 
 "Slices" 
 , 
 "pattern" 
 : 
 "" 
 , 
 "type" 
 : 
 "number" 
 } 
  
 ], 
  
 "rows" 
 : 
  
 [ 
  
 { 
 "c" 
 : 
 [{ 
 "v" 
 : 
 "Mushrooms" 
 , 
 "f" 
 : 
 null 
 },{ 
 "v" 
 : 
 3 
 , 
 "f" 
 : 
 null 
 }]}, 
  
 { 
 "c" 
 : 
 [{ 
 "v" 
 : 
 "Onions" 
 , 
 "f" 
 : 
 null 
 },{ 
 "v" 
 : 
 1 
 , 
 "f" 
 : 
 null 
 }]}, 
  
 { 
 "c" 
 : 
 [{ 
 "v" 
 : 
 "Olives" 
 , 
 "f" 
 : 
 null 
 },{ 
 "v" 
 : 
 1 
 , 
 "f" 
 : 
 null 
 }]}, 
  
 { 
 "c" 
 : 
 [{ 
 "v" 
 : 
 "Zucchini" 
 , 
 "f" 
 : 
 null 
 },{ 
 "v" 
 : 
 1 
 , 
 "f" 
 : 
 null 
 }]}, 
  
 { 
 "c" 
 : 
 [{ 
 "v" 
 : 
 "Pepperoni" 
 , 
 "f" 
 : 
 null 
 },{ 
 "v" 
 : 
 2 
 , 
 "f" 
 : 
 null 
 }]} 
  
 ] 
 }

More Information:

Populating Data Using Server-Side Code Stay organized with collections Save and categorize content based on your preferences.

exampleUsingPHP.html file

getData.php File

sampleData.json File

Populating Data Using Server-Side Code