PENDAHULUAN
Tutorial kali ini saya membahas cara membuat grafik yang menarik dengan menggunakan Jquery Highcarts, dapat didownload di Highchart pada web tersebut tampilannya statis dalam arti kalau kita mau merubah grafik maka kita harus merubah secara manual di file html-nya.
Dengan menggunakan PHP kita dapat membuat highchart lebih dinamis karena dapat langsung mengakses database MySQL.
Latar Belakang
Atas permintaan teman yang meminta untuk dibuatkan skrip untuk menampilkan grafik, karena selama ini dia menggunakan access dan loadingnya sangat lama karena datanya menembus Gigabyte. Setelah berdiskusi akhirnya sepakat menggunakan PHP, MYSQL dan JQuery.
IMPLEMENTASI
1. XAMPP (versi terbarunya 1.7.7) bisa didownload di http://www.apachefriends.org/en/xampp-windows.html
2.JQuery HighCart
Setelah lengkap kita akan memulainya:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TCH Drop Rate vs TCH Traffic</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="../js/themes/gray.js"></script>
-->
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="js/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: 'TCH Drop Rate vs TCH Traffic'
},
subtitle: {
text: 'Source: Ericsson Statistik'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'TCH Drop Rate (%)',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'TCH Traffic',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +'';
},
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +
(this.series.name == 'TCH Drop Rate' ? '' : '');
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 100,
verticalAlign: 'top',
y: 50,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'TCH Traffic',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 99.9811, 129.2, 144.0, 176.0, 135.6, 148.5, 716.4, 194.1, 95.6, 54.4]
}, {
name: 'TCH Drop Rate',
color: '#89A54E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 25.2, 21.5, 25.2, 10.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Skrip diatas adalah salah satu skrip high cart yang datanya sudah diganti namun masih statis dalam artian jika kita ingin mengubah datanya harus mengubah skrip HTML-nya secara manual.
Gambar html ini jika dijalankan.
Pada line 9 skrip diatas : mengisyaratkan bahwa skrip highcart.js harus ada disubfolder js, jika tidak maka tampilan akan blank.
Skrip line 93 dan 99 yang akan kita buat dinamis dalam artian data tersebut akan langsung diambil dari MySQL.
Membuat database dan table diMySql
Dengan database bernama fathan, jumlah table 1 statistik dengan 5 field:idstat,tchdroprate,tchtraffic,bulan dan tahun.
Skrip PHP
Kita cukup menambahkan ini pada awal skrip :
<?php
include "librari/koneksi.php";
$drop=array();
$traffic=array();
$sql = "SELECT * FROM statistik";
$qry = mysql_query($sql,$koneksi) or die ("Gagal Query - ".mysql_error());
while ($data=mysql_fetch_array($qry)){
//Atau bisa menggunakan: while($data=mysql_fetch_assoc($qry))
$drop[] = $data['tchdroprate'];
$traffic[] = $data['tchtraffic'];
}
//1.Membuat format tampilan: '7','6.9','9.5','14.5 '
//$tampildrop = "'".join("','",$drop)."'";
//2.Membuat format tampilan: 7 ,6.9 ,9.5 ,14.5 ,25.2
//$tampildrop = join(" ,",$drop);
//3.Membuat format tampilan: 7, 6.9, 9.5, 14.5 , 25.2
//$tampildrop =join(", ",$drop);
$tampildrop =join(", ",$drop);
$tampiltraffic = "'".join("','",$traffic)."'";
echo "$tampildrop <br />";
echo "$tampiltraffic";
?>
Dan mengganti skrip html diatas dengan extension php dan menggubah line 93 dan 99 diatas menjadi:
93:
data: [<?php echo $tampiltraffic;?>]
99:
data: [<?php echo $tampildrop;?>]
Dan ini skrip koneksi.php yang akan mengkoneksikan php dengan my sql. Dan kalau kita lihat skrip php yang saya berikan pada line 2.
contoh script selengkapnya bisa anda download di SINI
Saya kasih bonus cara nambah, hapus dan menampilkan data menggunakan php.
Pertanyaan selanjutnya adalah bagaimana membuat label pada sumbu x menjadi vertical? karena jika datanya banyak pasti akan saling tindih
Caranya dengan menambahkan skrip ini pada x axis: (pada line 36)
xAxis: [{
labels:{
rotation: -90
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
.
You are really great Fathan, thank so much for your php and highcharts tutorial.
ReplyDeleteJainal
makasih tas tutorialnya sangat berguna banget,,,
ReplyDeleteMau tanya Mas Fathan, sebelumnya terimakasih atas tutorialnya.
ReplyDeleteMisal data dari mysql berubah terus alias dinamis bisa gak grafiknya ikut berubah terus.
Terimakasih.