melihat data yang banyak dalam bentuk tabel tentunya tidak nyaman, apalagi kalau kita atau manager kita ingin mendapatkan gambaran secara umum. Misalkan apakah data penjualan meningkat dari satu periode ke periode atau yang semisal seperti apakah pendapatan perkapita indonesia naik dari tahun ketahun. Membuat grafik chart di Microsoft Excel memang mudah, nah bagaimana kalau kita membuatnya di web?
Banyak cara untuk emmbuat grafik di web, namun sejauh ini cara termudah adalah dengan menggunakan library javascript bernama Highchart. Highchart adalah library javascript yang dipakai untuk membuat grafik berbasis web. Yang lebih keren, Grafik yang dibuat bersifat interaktif serta murni dibuat dengan javascript, bukan gambar mati yang dihasilkan oleh script PHP atau server side code. tipe grafik yang bisa dibuat dengan highchart sangat banyak, namun kita hanya fokus ke grafik garis,area, bar dan kolom.
Dalam panduan kali ini, saya akan mencoba mengajarkan bagaimana cara membuat grafik menggunakan highchart dengan menggunakan data pendapatan perkapita indonesia dari tahun 2006 sampai 2011.
| tahun | Pendapatan perkapita (dalam USD) |
| 2006 | 1660 |
| 2007 | 1946 |
| 2008 | 2271 |
| 2009 | 2590 |
| 2010 | 3550 |
| 2011 | 3550 |
Langkah langkah untuk membuat grafik dengan higchart secara garis besar dibagi menjadi 3.
- include file jquery.min.js dan highcharts.js di header
- buat script untuk menentukankan graphich chart
- Tampilkan grafik di area halaman yang telah ditentukan
Selengkapnya, lihat script berikut ini
<!--1) include file jquery.min.js dan higchart.js-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
//2)script untuk membuat grafik, perhatikan setiap komentar agar paham
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container', //letakan grafik di div id container
//Type grafik, anda bisa ganti menjadi area,bar,column dan bar
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Pendapatan perkapita indonesia tahun 2006-2011',
x: -20 //center
},
subtitle: {
text: 'candra.web.id',
x: -20
},
xAxis: { //X axis menampilkan data tahun
categories: ['2006', '2007', '2008','2009','2010','2011']
},
yAxis: {
title: { //label yAxis
text: 'pendapatan dalam USD'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080' //warna dari grafik line
}]
},
tooltip: {
//fungsi tooltip, ini opsional, kegunaan dari fungsi ini
//akan menampikan data di titik tertentu di grafik saat mouseover
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y ;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
//series adalah data yang akan dibuatkan grafiknya,
//saat ini mungkin anda heran, buat apa label indonesia dikanan
//grafik, namun fungsi label ini sangat bermanfaat jika
//kita menggambarkan dua atau lebih grafik dalam satu chart,
//hah, emang bisa? ya jelas bisa dong, lihat tutorial selanjutnya
series: [{
name: 'Indonesia',
//data yang akan ditampilkan
data: [1660, 1946,2271,2590,3004,3550]
}]
});
});
});
</script>
</head>
<body>
<!--grafik akan ditampilkan disini -->
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
hasil grafiknya
Source code & Demo
Download source codenya disini dan lihat demonya disini. Demo sudah termasuk grafik jenis area,bar dan kolom.
Terimakasih. :)
amazing thanks artikelnya mas, sangat bermanfaat
kalau mau menapilkan 2 data dalam 1 grafik gimana ?
kan di paling sebelah kanan itu ada indonesia nya mas, kalau misal nya mau saya tambahin yg lain gimana ya mas ?
kalo menggunakan koneksi ke database gmana mas
permisi mas
boleh minta bimbingannya mas
untuk membuat grafik pertumbuhan balita gimana caranya ya mas
kebetulan saya masih awan
terimakaih
bang candra, ini kalau datanya hasil inputan, piye carane ?
gan, klo mau nampilin data series nya dalam bentuk jam menggunakan (:) ex. data:[12:00:00,12:00:00];
gimana yak cara nya
belum tau
Maff mas candra..mau tanya..kalo misal datanya kita ambil dari database bisa ga?? trims
mas kalo saya kepingin datanya dari databse caranya gimana ya?… kalo untuk yang model line seperti ini…
http://www.candra.web.id/2012/09/25/membuat-grafik-chart-menggunakan-php-highchart/
saya mau nanya … memulai dari awalnya gimana untuk buat grafik di android?
dimana nanti saya ambil datanya untuk digrafikkan akan ditampilkan dalam waktu setiap mS.. datanya diambil melalui bluetooth ..
kalo android ga tau bang, ini kan tutorial berbasis web, tapi sebenarnya bisa diakalin, kombinasikan halaman ini didalam webviewx android
Thanks bos sudah share artikelnya. Sangat membantu untuk review data penjualan dan user.
Terima kasih mas bagi2 ilmunya, sangat bermanfaat…. bahaimana cara membuat fasilitas cetak dan pdf pada web (seperti yg ada pada web ini), biar mudah dishare ? kalo bisa emailkan ke : [email protected]… Trims
salam kenal pak candra, saya ingin membuat bagan pertandingan menggunakan html dan css, mungkin Anda punya referensi yang bisa membantu saya. terimakasih :)
silahkan baca artikel yang berhubungan dengan yang anda cari di http://www.w3schools.com/svg/default.asp
Pak chandra, saya ingin bertanya, bagaimana cara menampilkan menampikan data di titik tertentu di grafik tanpa mouseover (tampil terus tanpa hilang)
saya belum tahu, silahkan masuk k website highchart.com, siapa tau direferensinya ada
coba baca referensinya di situs highchartnya langsung, saya juga belum pernah buat yang seperti itu