Create Dynamic Pie Chart in PHP with Google Charts

create 3D pie charts with php_and_mysql
A pie chart displays data, information, and statistics in an easy-to-read ‘pie-slice’ format with varying slice sizes .The main use of a pie chart is to show comparison. When items are presented on a pie chart, you can easily see which item is the most popular and which is the least popular.The pie chart is the perfect choice to illustrate data in a percentage format.

Different utilization of pie charts can be found in business, school, and at home. For business, pie charts can be utilized to demonstrate the achievement or disappointment of specific items or administrations. They can likewise be utilized to show showcase reach of a business contrasted with comparative organizations.

There is an API provided by Google called ‘Google Visualization API’ . It provide easy way to create charts on any web applications . Usng this API you can easily show
pie charts in minutes from your Mysql Database using PHP . Below tutorials guide you to make Google Pie Chart Dynamix with PHP and Mysql .

Making a Dynamic Pie Chart with PHP and MySQL

In this tutorials ,we will fetch data from Mysql database ad show it in Pie chart .It display data according to it’s popularity .

Create Database Table

To store data ,we need a database table. Run below sql in your database to create table ‘social_media’ .

CREATE TABLE `social_media` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `rating` int(5) NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

php mysql video tutorial in Hindi language by UnitedWebSoft

Dynamic Data on Google Pie Chart

Initially we have to fetch dynamic data from table ‘social_media’ using PHP and Mysql . Then Social Media name and ratings will be stored in variable ‘data’ . You can also
mention required title, width, height of the pie chart .

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      <?php
      if($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
            echo "['".$row['name']."', ".$row['rating']."],";
          }
      }
      ?>
    ]);
    
    var options = {
        title: 'Most Popular Social Media',
        width: 900,
        height: 500,
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    
    chart.draw(data, options);
}
</script>
</head>
<body>
    <!-- Display the pie chart -->
    <div id="piechart"></div>
</body>
</html>

You can make different tytpes of pie chart . In this tutorials we will be creating Dynamic 3D pie chart .

Making a Dynamic 3D Pie Chart

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      <?php
      if($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
            echo "['".$row['name']."', ".$row['rating']."],";
          }
      }
      ?>
    ]);
    
    var options = {
        title: 'Most Popular Social Media',
        width: 900,
        height: 500,
        is3D: true,
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    
    chart.draw(data, options);
}
</script>

Above you have demonstrated how to use Google Pie chart API with PHP and Mysql to show dynamic data on pie chart . We used 3D dynamic pie chart . There are some other popular pie chart types like Donut Pie Chart, Slice Exploding Pie Chart .
Google provides lots of configuration options to customize the pie chart .
If you have any query , write below on comment sections . I will try my best to reply your query .

  • Nur Sakibul Huda

    Thank you so much. It saved my day. Very detailed and informative tutorial.