Simple Pie Chart with Highcharts

Highcharts is very popular charting library which is used to create awesome charts with help any web programming languages. Highcharts is written in pure JavaScript. He is offering an easy way of adding interactive charts to your web site or web application. High charts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, column range, bubble, box plot, error bars, funnel, waterfall and polar chart types.
pie_chart_highcharts

Checkout other tutorial of Charting,

It works in all modern mobile and desktop browsers including the iPhone/iPad and Internet Explorer from version 6.

Here We will learn how to create PIE charts with help of PHP. The PHP is most popular scripting language, The Highcharts takes json object as a argument to render PIE chart.There are following steps need to follow to create PIE charts:

Step 1: Includes Jquery and highcharts library.

Select Code
1
2
3
4
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

Step 2: Create PHP arary which is used to create pir charts.

Select Code
1
2
3
4
5
6
7
8
9
$jsonData = array
(
    array("Pending", 20.42),
    array("InProgress" , 14.66),
    array("OnHold" , 2.09),
    array("Complete" , 62.30),
    array("Deferred" , 0.00),
    array("Cancelled" , 0.52),
);

Here key is label name and value is value of PIC chart slice.

Step 3: Create div element which is used as a container for pie chart.

Select Code
1
2
3
<div class="col-sm-8" id="container2">

</div>

Step 4: Initializing Highcharts library by calling method highcharts on target container.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
jQuery(document).ready(function() {

$('#container2').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 1,//null,
            plotShadow: false
        },
        title: {
            text: 'Task Status'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: <?php echo json_encode($jsonData);?>
        }]
    });
    });

Demo and Download source Code Of Highcharts

  • Alidrissi Nouredine

    merci