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() {Ganti menjadi seperti ini:
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
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 :)
Belum ada tanggapan untuk " Cara Membuat Pie Chart dengan Hirghchart dan php mysql"
Post a Comment