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.
