Pie Chart With PHP MySQL on Bootstrap by using HighCharts

In this tutorial, I'm going to show you how to creae a pie chart using Highcharts library and data taken from database MySQL using PHP, layout using Bootstrap.

A pie chart is one of the most commonly used chart to display data as percentage value. By display data using pie chart in web, it will make us more clear in reading statistics data.

In this post, we are going to create a pie chart about the user's browser statistics as shown by Figure.1 below :

(Fig.1)

As you see in the Figure.1 above, we have five browsers(Chrome, Firefox, Safari, Opera, Konqueror) where they are displayed as percentage value.

Steps to create a pie chart

Follow the steps below to create pie chart using library highcharts, PHP, Database MySQL on Bootstrap layout :

1. Create Database

In here we create database name with "dbgraph", where it contain three fields and data as shown by script sql below :

CREATE TABLE IF NOT EXISTS `browser` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `browsername` varchar(30) NOT NULL,
  `total` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

INSERT INTO `browser` (`id`, `browsername`, `total`) VALUES
(1, 'Chrome', 50),
(2, 'Firefox', 25),
(3, 'Safari', 15),
(4, 'Opera', 5),
(5, 'Konqueror', 5);

2. Create file connection.php

This file to make an establishment to database. Make appropriate hostname, username and password of your MySQL.

<?php
$con=mysqli_connect("localhost","root","","dbgraph");
?>

3. Call library highcharts.js

In order for the data from database can be displayed in pie chart, make sure you have downloaded library highcharts.js and put in folder : assets/js/highcharts.js

<script src="assets/js/highcharts.js"></script>

4. Set chart's properties and data retrieval from database

To make pie chart, we have to add pie on its type. If we want to display data as percentage value that have two decimal digits, we add Highcharts.numberFormat(this.percentage, 2) on the label plotOptions.

<script>
        var chart; 
        $(document).ready(function() {
              chart = new Highcharts.Chart(
              {
                  
                 chart: {
                    renderTo: 'mygraph',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                 },   
                 title: {
                    text: 'Internet Browser Statistics '
                 },
                 tooltip: {
                    formatter: function() {
                        return '<b>'+
                        this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' % ';
                    }
                 },
                 
                
                 plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: 'green',
                            formatter: function() 
                            {
                                return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) +' % ';
                            }
                        }
                    }
                 },
       
                    series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: [
                    <?php
                        include "connection.php";
                        $query = mysqli_query($con,"SELECT browsername from browser");
                     
                        while ($row = mysqli_fetch_array($query)) {
                            $browsername = $row['browsername'];
                         
                            $data = mysqli_fetch_array(mysqli_query($con,"SELECT total from browser where browsername='$browsername'"));
                            $jumlah = $data['total'];
                            ?>
                            [ 
                                '<?php echo $browsername ?>', <?php echo $jumlah; ?>
                            ],
                            <?php
                        }
                        ?>
             
                    ]
                }]
              });
        }); 
    </script>

If you see the pie chart doesn't have decimal place value, it means the value of each data item divided by total data and multiply 100% result the value without decimal.

5. Call id unique

Place id unique that we have created on the step-4 (on part of renderTo) between tag . Because we use Bootstrap, so the code as follow :

<div class="panel panel-primary">
     <div class="panel-heading">The Graph of Browser Trends January 2015</div>
     <div class="panel-body">
         <div id ="mygraph"></div>
    </div>
</div>

Live PreviewDownload