Beranda · Tips Trick · Film · Lagu · PHP · Tutorial Umum · jQuery · Otomotive

Cara Membuat Pie Chart dengan Hirghchart dan php mysql

Hallo sahabat programer, pagi ini di hari libur saya masih ingin berbagi, tips Cara Membuat Pie Chart dengan Highchart dan php mysql, tentunya dengan tampilan report secara chart sangat indah di pandang mata hehe..

Tutorial ini buat yang sudah biasa dengan php ya, bukan pemula, tapi pemula juga bisa ngerti koq :).

Keuntungan dari menggunakan Highchart selain indah juga hasil chart bisa di print ataupun save dalam bentuk gambar juga dalam sector image, yang pastinya keren bro hehe..

Oke lanjut saja :
Berikut tampilan highchart dengan PHP dan MYSQL




1. Membuat Table



/*
SQLyog Community Edition- MySQL GUI v8.05
MySQL - 5.5.16-log : Database - bfsdemo
*********************************************************************
*/
/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;

/*Table structure for table `penjualan` */

DROP TABLE IF EXISTS `penjualan`;

CREATE TABLE `penjualan` (
  `name` varchar(50) DEFAULT NULL,
  `val` decimal(10,2) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

/*Data for the table `penjualan` */

insert  into `penjualan`(`name`,`val`) values ('Direct Sales','20.00');
insert  into `penjualan`(`name`,`val`) values ('Search Engine Marketing','15.00');
insert  into `penjualan`(`name`,`val`) values ('PPC Advertising','15.00');
insert  into `penjualan`(`name`,`val`) values ('Website Marketing','10.00');
insert  into `penjualan`(`name`,`val`) values ('Blog Marketing','10.00');
insert  into `penjualan`(`name`,`val`) values ('Social Media Marketing','10.00');
insert  into `penjualan`(`name`,`val`) values ('Email Marketing','10.00');
insert  into `penjualan`(`name`,`val`) values ('Online PR','2.50');
insert  into `penjualan`(`name`,`val`) values ('Multimedia Marketing','2.50');
insert  into `penjualan`(`name`,`val`) values ('Mobile Marketing','2.50');
insert  into `penjualan`(`name`,`val`) values ('Display Advertising','2.50');

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;





 



2. Mengambil data sebagai JSON menggunakan PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$con = mysql_connect("localhost","root","");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("test", $con);

$result = mysql_query("SELECT name, val FROM penjualan");

$rows = array();
while($r = mysql_fetch_array($result)) {
    $row[0] = $r[0];
    $row[1] = $r[1];
    array_push($rows,$row);
}

print json_encode($rows, JSON_NUMERIC_CHECK);

mysql_close($con);
?>

Hasil JSON akan terlihat seperti ini:


[
    ["Direct Sales",20],
    ["Search Engine Marketing",15],
    ["PPC Advertising",15],
    ["Website Marketing",10],
    ["Blog Marketing",10],
    ["Social Media Marketing",10],
    ["Email Marketing",10],
    ["Online PR",2.5],
    ["Multimedia Marketing",2.5],
    ["Mobile Marketing",2.5],
    ["Display Advertising",2.5]
]


3. Menyiapkan opsi grafik



Pindah ke UI, mengatur pilihan untuk pie chart. Kita akan mengisi data series kemudian  memanggilnya menggunakan JSON.

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
var options = {
    chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        text: 'Web Sales & Marketing Efforts'
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: []
    }]
}


4. Mengisi grafik dengan data JSON


$.getJSON("data.php", function(json) {
    options.series[0].data = json;
    chart = new Highcharts.Chart(options);
});


5. Gabungkan kodenya

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Pie Chart</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Web Sales & Marketing Efforts'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: []
                }]
            }
           
            $.getJSON("data.php", function(json) {
                options.series[0].data = json;
                chart = new Highcharts.Chart(options);
            });
           
           
           
        });  
        </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

6. Download kodenya dan Lihat hasilnya

Anda dapat men-download source code nya dan sesuaikan dengan proyek-proyek yang sedang Anda kerjakan.


Update: 
Saya menggunakan pie chart ini untuk data saya yang query sqlnya menggunakan count jadi data yang muncul nantinya tampilannya agak panjang atau jelek karena angka di belakang koma cukup banyak , nah berikut cara membuat 2 decimals saja pada pie chart ini:
 
Untuk membuat 2 decimals pada pie chart ini menggunakan code dibawah ini: 
 Ganti baris ini:
  formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
        }
 Ganti menjadi seperti ini:
formatter: function() {
    return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';

 

DEMO | DOWNLOAD SOURCE CODE


Tutorial Berikutnya mengenai:

Pie Chart Example 1 Chart Basic Column Chart
Pie Chart Example 2 Chart Basic Bar Chart
Pie Semi Circle Chart Basic Column AJAX Chart
Pie Chart 3D Chart Basic Line Chart


Ditunggu ya :)

Artikel keren lainnya:

Belum ada tanggapan untuk " Cara Membuat Pie Chart dengan Hirghchart dan php mysql"

Post a Comment