Create Dynamic Pie Chart using Google API, PHP and MySQL

In this tutorial, you will learn how to create a Pie Chart of the data using the Google API, PHP, and MySQL.

Data representation is a way of analysing numerical data. The relationship between information, facts, ideas, and concepts is depicted in a diagram via data representation. Data representation is a fundamental learning strategy that is simple and easy to understand. There are different types of data representation. Pie charts are often used.

A pie chart is a circular statistical graphic that is divided into slices to visualise numerical data. The arc length of a pie chart is proportional to the quantity it represents. Pie charts are very widely used in business presentations and in the mass media.

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

To create a pie chart using the 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 them; otherwise, you can create them manually or copy and paste the following queries into 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 use the sports data to generate the Pie Chart. In the 'index.php' file, we have included the 'loader.js' file at the top, so that it loads first. After that, we call the google.charts.load function. We have created a 'drawChart()' function that dynamically calls the 'getData.php' ajax file and passes the data in the 'google.visualization.DataTable'. After that, we 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 the 'getData.php' file, we have written the select query to fetch the sports data and encode it 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, fetched all sports data and stored it in a 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 google maps multiple markers
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
PHP sanitize input for MySQL
Ajax live data search using jQuery PHP MySQL
PHP MYSQL Advanced Search Feature
PHP import Excel data to MySQL using PHPExcel
Insert image in database using PHP
PHP rating system

◀ Previous Article
Simple PHP File Cache

Next Article ▶
Driving route directions from source to destination