How to Create Dynamic Pie Chart in PHP with MySQL Using Google API

In this tutorial we will discuss how to create dynamic Pie Chart in PHP with MySQL.

A graph which is created to display records in the proportion within a circular chart in form of sectors is known as Pie Chart. Each sector is proportion of total and total value of pie is always 100 percent.

There are other type of charts also like line/area chart and bar chart but in this tutorial we will discuss about Pie chart.

Dynamic Pie chart means that getting data from database to display in proportion in sectors. This tutorial will help you to create Pie chart for your web application.

Using the Google Chart tools we will create pie chart in PHP with MySQL. Google Pie chart tool is open source and easy to use in web application. Google have wide range of chart types and you can use as per need.

Database Table:

--

-- Table structure for table `coding_info`

--



CREATE TABLE IF NOT EXISTS `coding_info` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `name` varchar(25) NOT NULL,

  `value` int(11) NOT NULL,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;



--

-- Dumping data for table `coding_info`

--



INSERT INTO `coding_info` (`id`, `name`, `value`) VALUES

(1, 'PHP', 35),

(2, 'MySQL', 20),

(3, 'JavaScript', 15),

(4, 'AJAX', 12),

(5, 'CSS', 5);

Pie Chart Using Google Chart Tool(JavaScript, PHP and MySQL)

Index.php

<!DOCTYPE html>

<html>

  <head>

   <title>Pie Chart Demo - PHPCluster</title>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    </head>

  <body>

    <div id="piechart" style="width: 900px; height: 500px;"></div>

<?php

                   require_once 'dbconfig.php';

                $db = new database;

               //query to get record from db

                 $query = "SELECT * FROM coding_info";

                $result = $db->runQuery($query);

                //get no of rows

                $rows_count = $db->numrows($query);

               if($rows_count>0):

                ?>

                <script type="text/javascript">

      google.charts.load('current', {'packages':['corechart']});

      google.charts.setOnLoadCallback(drawChart);

 function drawChart() {

var data = google.visualization.arrayToDataTable([

          ['Coding', 'Hours per Day'],

         <?php

                                 foreach($result as $info){

                                 extract($info);

                                 echo  "['$name', $value],";

         }  ?>

        ]);

  var options = {

          title: 'My Daily Coding Activities'

        };

 var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);

      }

    </script>

  <?php endif; ?>

  </body>

</html>

Above script will help you to create simple Pie chart in PHP. Now going to see how change different behaviour in Pie chart.

Create 3D Pie Chart.

To change Pie Chart in 3D you have to set 3D option true because by default it set to false.

var options = {

          title: 'My Daily Coding Activities',

         is3D: true,

        };

3D Pie chart
You can change Pie chart title by changing options title.

Create Donut Chart

Donut chart is a type of chart containing hole in the center. You can create donut chart by changing option value. You have to add pieHole option.

var options = {

          title: 'My Daily Coding Activities',

          pieHole: 0.5,

        };

Donut Pie Chart

Combining pieHole and 3D option at same time, then pieHole option will be ignored.

Rotate your Pie Chart

It starts by default with left edge of first slice which point straight up. To rotate Pie chart you have to add pieStartAngle option.

var options = {

          title: 'My Daily Coding Activities',

          pieStartAngle: 120,

        };

3D piechart rotated

Custom Slice Color

If you want to fill custom slice color then add a color variable in option.

var options = {

          title: 'My Daily Coding Activities',

          is3D: true,

          colors: ['cyan', 'orange', 'blue', 'green', 'pink']

        };

You can add also add color code instead of color name in colors option variable value.

3D piechart custom slice color

Hide Legends

By default Legends display in Pie Chart. To hide it change option value. If you want to hide add legend: ‘none’, in option.

var options = {

          title: 'My Daily Coding Activities',

          is3D: true,

          colors: ['cyan', 'orange', 'blue', 'green', 'pink'],

          legend: 'none', 

        };

3D piechart legend hide

[sociallocker] Download Script[/sociallocker]

Now you can easily integrate this pie chart in your web applications. If you have any query regarding Pie chart feel free to write in comment box.

5 thoughts on “How to Create Dynamic Pie Chart in PHP with MySQL Using Google API”

Leave a Reply to shahroz nawaz Cancel reply