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.
Kelebihannya lagi kita bisa menginstallnya di server kantor karena PHP dan MySQL merupakan server side program, sehingga komputer/ laptop kita ngak terbebani di komputer kita hanya menjalankan JQuery yang berbasis javascript yang merupakan client side program. hehehe...
^___^ b
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="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.
tutorial nya sangat berguna kakak....
ReplyDeleteterima kasih banyak
salam sukses dari saya
mantap mas bro.. sip tutorialnya..top markotop dech..
ReplyDeletethx info nya gan , but kalo y dinamis nya ga muncul nih gan chart nya,, give me solution, thx.,,,
ReplyDeletelove you so much, i find tis tutorial for so long. Finally i know how to use highcharts. Thank you so much!! :)
ReplyDeletetks agan, ane coba dulu yaks.. ijin nyedot gan..
ReplyDeletethanks mas bro atas postingannya..
ReplyDeletetp saya mau tanya,klo saya gak konek internet,chart nya gak muncul..jd harus konek ke internet dulu ya baru bisa memakai jquery highchart??
itu karena file .js-nya ngambil di server google, caranya biar gak online ya mengopy source code .js yg ada di server google.
Delete1.coba buka dengan notepad atau editor lainnya file TCH_Drop_Rate_vs_TCH_Traffic.htm yg saya sertakan pada link download.
2. coba perhatikan line 8:http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
masuklah ke link tersebut dan copy semua source codenya.
3. buka notepad dan paste semua source codenya kemudian beri nama :jquery161.js dan simpan pada folder js
4. ubah line 8:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
menjadi
js/jquery161.js
Selesai...
:)
terima kasih atas postingannya..
ReplyDeleteuntuk yang statis,saya ubah ke php kok chart nya gak muncul ya mas ?? mohon pencerahannya mas.terima kasih mas.
kan di atas sudah saya jelaskan, karena jsnya ngambil dari server google jadi harus online, kalau mau tdk OL ikutin cara di atas...
DeleteMas Gmn caranya menampilkan data grafik x dan y yang berasal dari database. aku cari2 yang contoh dari hightchar belum ketemu yang koordinat x'nya dari database.
ReplyDeletesilahkan download contoh yang saya sertakan di atas mas...
Deletemas saya udah buat database laporan hasil produksi
ReplyDeletetpi biar bisa jdi grafik data yang dari databasenya kek mna mas
dicoba2 aja mas contoh yang saya kasih...
Deletesaya punya sedikit masalah mas
ReplyDeletesaya pengen format series (Y) supaya tampilnya begini 1.000 2.000 bukan 1K 2K dst
gimana caranya ya ?
sy ambil data dari mysql & ga tau gimana format series
hmm.. bukannya itu data langsung di ambil dari mysql ubah saya data fieldnya dari 1k ke 1000 dst....
Deletepak itu kan untuk database bulan-tahun di buat dalam field yg berbeda.gmn kl semisal tgl-bulan-tahun dibuat dlm 1 field dengan tipe date...sorce code ke dalam grafiknya spt apa? mksih untuk pencerahannya
ReplyDeleteformat date standard di mysql adalah yyyy-mm-dd, jadi kita buat skrip dulu untuk memecah2nya seperti:
Delete<?php
$tglmysql = "2013-03-17";
$tgl = substr($tglmysql,8,2);
//ambil 2 character setelah 8 character dari kiri
$bln = substr($tglmysql,5,2);
$thn = substr($tglmysql,0,4);
echo "$tgl   $bln   $thn";
//maka akan ditampilkan 17 03 2013
?>
semoga membantu ^^
mas fathan, mau nanya gmn caranya legend pada grafik bisa berada di bawah sumbu x, saya sdh coba edit script menjadi allign"bottom"tapi masih belum berhasil bahkan hilang..thnks mas
ReplyDeletemas saya mw tanya, bagaimana jika script php nya menggunakan looping 'for'. bagaimana cara memasukkan categories: [bulan], dan data: [].
ReplyDeleteMantap gan. Terima kasih. semoga jadi amal soleh. :)
ReplyDeleteAmin..
DeleteTerima kasih sudah mau berkunjung :)
kalau pake xampp 1.8 bisa ga y, kok saya coba g muncul apa2?
ReplyDeletethx
bisa, itu karena ada file yg ngelink ke server google jd harus online, klo mau filenya di copy ke lokal dulu.. caranya liat di komentar di atas gan..
ReplyDeletemakasih byk gan... membantu bgt nie
ReplyDeletekalo menggunakan svg gimana ya gan ?
ReplyDeletemau nanya nehh.. ini g support sm php 5.1 iah?
ReplyDeleteSupport ...
Deletegan mau tanya soal monitoring beban listrik
ReplyDeletesaya mau nampilkan grafik secara real time yang datanya itu dari arduino kira-kira databasenya gmna ya karena secara realtime.terimakasih
Gan saya mau tanya...
ReplyDeletekalo catagorinya di pindah ke sumbu y bagai mana?
dan mohon di jelaskan syntag javascriptnya... sya belum paham
Supaya labelnya gak sampai pada grafik saat di rotasi gimana yah???
ReplyDeletetetaplah menebar manfaat
ReplyDelete