Create Dynamic Pie Chart using Google API, PHP and MySQL

In this tutorial, you will learn how to create Pie Chart of the data using the Google API, PHP and MySQL.
A pie chart is a circular statistical graphic, which is divided into slices to visualize numerical data. The arc length of a pie chart is proportional to the quantity it represents. Pie charts are very widely used in the business representation and the mass media.

Google API provides an easy solution to create charts on the website. In this article, we provide step by step process to create dynamic pie chart.

To create pie chart using google API, we need the loader.js library file. You can either download this or use the url script source. In this example, we have created two PHP files - index.php and getData.php

You can use the records if you already have otherwise you can create it manually or copy and paste the following queries in your database.

CREATE TABLE IF NOT EXISTS `sports` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `code` varchar(100) NOT NULL,
  `sports` varchar(100) NOT NULL,
  `participants` int(11) NOT NULL,
  PRIMARY KEY (`id`)
)

INSERT INTO `sports` (`id`, `code`, `sports`, `participants`) VALUES
(1, 'BD', 'badminton', 6),
(2, 'BB', 'basketball', 16),
(3, 'VB', 'volleyball', 14),
(4, 'WS', 'wrestling', 8),
(5, 'TN', 'tennis', 6);

This is the main file, that we will call on the browser.

1. index.php

Here, we are taken the sports data to generate the Pie Chart. In 'index.php' file, we have included the 'loader.js' file at the top, so that it loads first. After that, we have called the google.charts.load function. We have created a 'drawChart()' function that dynamically calls the 'getData.php' ajax file and passed the data in the 'google.visualization.DataTable'. After that, we have called 'google.visualization.PieChart()' to render the chart. 'google.charts.setOnLoadCallback' is used to set a callback when the Google visualization API is loaded. In 'getData.php' file, we have written the select query to fetch the sports data and encoded in json format.

<!DOCTYPE html>
<html>
    <head>
        <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">
            function drawChart() {
                // call ajax function to get sports data
                var jsonData = $.ajax({
                    url: "getData.php",
                    dataType: "json",
                    async: false
                }).responseText;
                //The DataTable object is used to hold the data passed into a visualization.
                var data = new google.visualization.DataTable(jsonData);

                // To render the pie chart.
                var chart = new google.visualization.PieChart(document.getElementById('chart_container'));
                chart.draw(data, {width: 400, height: 240});
            }
            // load the visualization api
            google.charts.load('current', {'packages':['corechart']});

            // Set a callback to run when the Google Visualization API is loaded.
            google.charts.setOnLoadCallback(drawChart);
        </script>
    </head>
    <body>
        //pie chart container
        <div id="chart_container"></div>
    </body>
</html>

Here, we have written database connection code and fetched all sports data and stored in JSON encoded format. Make sure to replace the 'host_name', 'user_name', 'password' and 'db_name' with your database credentials and name.

2. getData.php

<?php 
// MySQL database connection code
$connection = mysqli_connect("host_name","user_name","password","db_name") or die("Error " . mysqli_error($connection));
//Fetch sports data
$sql = "SELECT * FROM sports";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
//create an array
$array = array();
$i = 0;
while($row = mysqli_fetch_assoc($result))
{  
    $orgname = $row['sports'];
    $count = $row['participants'];
    $array['cols'][] = array('type' => 'string'); 
    $array['rows'][] = array('c' => array( array('v'=> $orgname), array('v'=>(int)$count)) );
}
$data = json_encode($array);
echo $data;
?>

How to display PDF file in PHP from database
How to read CSV file in PHP and store in MySQL
Create And Download Word Document in PHP
PHP SplFileObject Standard Library
Simple File Upload Script in PHP
Sending form data to an email using PHP
Get Visitor's location and TimeZone
How to use google map street view api on webpage
How to add multiple custom markers on google map
How to add google map on your website with marker
Create pie chart using google api
Driving route directions from source to destination using HTML5 and Javascript
Calculate the distance between two locations using PHP
Simple star rating system using PHP, jQuery and Ajax

◀ Previous Article
Simple PHP File Cache

Next Article ▶
Driving route directions from source to destination