Cara Membuat grafik chart berbasis Web




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.

Tags:

21 thought on “Cara Membuat grafik chart berbasis Web”

  1. kasdin says:

    amazing thanks artikelnya mas, sangat bermanfaat

  2. Intan Aulia says:

    kalau mau menapilkan 2 data dalam 1 grafik gimana ?

  3. ghifaricorps says:

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

  4. Chory Fatra says:

    kalo menggunakan koneksi ke database gmana mas

  5. surya says:

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

  6. fitri says:

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

  7. Anonymous says:

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

    gimana yak cara nya

  8. Anonymous says:

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

  9. Paris Elson says:

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

  10. alpi says:

    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. Candra Adi Putra says:

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

  11. toko sepatu says:

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

  12. Teddy says:

    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

  13. Duta Yanto Nugroho says:

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

    1. Candra Adi Putra says:

      silahkan baca artikel yang berhubungan dengan yang anda cari di http://www.w3schools.com/svg/default.asp

  14. Agung says:

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

    1. Candra Adi Putra says:

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

    2. Candra Adi Putra says:

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

Tinggalkan Komentar plz!