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.

  1. include file  jquery.min.js dan highcharts.js di header
  2. buat script untuk menentukankan graphich chart
  3. 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.

Categories: JavascriptjQuery

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. hubungi saya di candraadiputra (at) gmail (dot) com

21 Comments

ekkysukmawati · 10 August , 2017 at 1:27 pm

Terimakasih. :)

kasdin · 14 June , 2017 at 6:06 pm

amazing thanks artikelnya mas, sangat bermanfaat

Intan Aulia · 5 January , 2017 at 9:33 am

kalau mau menapilkan 2 data dalam 1 grafik gimana ?

ghifaricorps · 23 November , 2015 at 2:36 pm

kan di paling sebelah kanan itu ada indonesia nya mas, kalau misal nya mau saya tambahin yg lain gimana ya mas ?

Chory Fatra · 29 August , 2015 at 3:26 pm

kalo menggunakan koneksi ke database gmana mas

surya · 10 June , 2015 at 4:03 pm

permisi mas
boleh minta bimbingannya mas
untuk membuat grafik pertumbuhan balita gimana caranya ya mas
kebetulan saya masih awan
terimakaih

fitri · 12 March , 2015 at 10:53 am

bang candra, ini kalau datanya hasil inputan, piye carane ?

Anonymous · 22 December , 2014 at 11:16 am

gan, klo mau nampilin data series nya dalam bentuk jam menggunakan (:) ex. data:[12:00:00,12:00:00];

gimana yak cara nya

Anonymous · 16 June , 2014 at 8:00 pm

Maff mas candra..mau tanya..kalo misal datanya kita ambil dari database bisa ga?? trims

Paris Elson · 16 June , 2013 at 11:40 am

mas kalo saya kepingin datanya dari databse caranya gimana ya?… kalo untuk yang model line seperti ini…

alpi · 11 June , 2013 at 7:35 am

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 ..

    Candra Adi Putra · 11 June , 2013 at 1:53 pm

    kalo android ga tau bang, ini kan tutorial berbasis web, tapi sebenarnya bisa diakalin, kombinasikan halaman ini didalam webviewx android

toko sepatu · 10 June , 2013 at 9:56 am

Thanks bos sudah share artikelnya. Sangat membantu untuk review data penjualan dan user.

Teddy · 18 February , 2013 at 11:48 am

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 : teddyzoels@hmail.com… Trims

Duta Yanto Nugroho · 30 January , 2013 at 11:53 am

salam kenal pak candra, saya ingin membuat bagan pertandingan menggunakan html dan css, mungkin Anda punya referensi yang bisa membantu saya. terimakasih :)

Agung · 4 January , 2013 at 10:22 am

Pak chandra, saya ingin bertanya, bagaimana cara menampilkan menampikan data di titik tertentu di grafik tanpa mouseover (tampil terus tanpa hilang)

    Candra Adi Putra · 4 January , 2013 at 10:09 pm

    saya belum tahu, silahkan masuk k website highchart.com, siapa tau direferensinya ada

    Candra Adi Putra · 31 January , 2013 at 1:25 am

    coba baca referensinya di situs highchartnya langsung, saya juga belum pernah buat yang seperti itu

Comments are closed.