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 :)

Contributors

Friday, February 26, 2016