Cara Membuat grafik chart berbasis Web

grafiklinier

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.

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

18 thoughts on “Cara Membuat grafik chart berbasis Web”

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

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

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

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

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

Tinggalin komentar dong!