Page Summary
-
Chart data can be populated using server-side code by loading local files, querying databases, or other methods.
-
The provided example demonstrates using PHP to read chart data from a local text file.
-
The example utilizes jQuery to fetch JSON data from a server-side PHP script and display it in a pie chart using the Google Visualization API.
-
The
getData.phpfile reads and returns the content of a localsampleData.jsonfile, which is formatted as a GoogleDataTable. -
The
exampleUsingPHP.htmlfile uses the fetched JSON data to create and render a pie chart on the webpage.
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:
