Membuat Multiple Grafik chart berbasis Web

Multiple grafik dari data penjualan smartphone

Dalam panduan sebelumnya, sudah kita bahas bagaimana cara membuat grafik sederhana menggunakan Highchart. Dalam panduan kali ini kita akan membahas cara membuat multiple grafik chart dalam satu tampilan.

Untuk contohnya, kita akan menampilkan grafik dari tabel penjualan smartphone disebuah toko fiktif candraphone. Data penjualan seperti dibawah ini

Data penjualan

Smartphone Januari Febuari Maret April Mei Juni
Android 20 30 50 60 80 100
iPhone 5 10 15 25 40 60
Blackberry 100 60 40 30 20 5
Windowsphone 30 20 5 20 10 40

Langkah langkah
Tiga langkah mudah untuk membuat grafik adalah sebagai berikut
1.Include file jquery dan highslidejs di header

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

2. Buat script untuk menampilkan grafik, perhatikan baris yang berhubungan dengan data


		//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: 'Penjualan smartphone di toko candraphone',
                x: -20 //center
            },
            subtitle: {
                text: 'candra.web.id',
                x: -20
            },
            xAxis: { //X axis menampilkan data bulan 
                categories: ['januari', 'febuari', 'maret','april','mei','juni']
            },
            yAxis: {
                title: {  //label yAxis
                    text: 'Total penjualan'
                },
                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,
		
            series: [{  
                name: 'android',  
				
                data: [20, 30,50,60,80,100]
            },
            {  
                name: 'iPhone',  
				
                data: [5, 10,15,25,40,60]
            },
            {  
                name: 'blackberry',  
				
                data: [100, 60,40,30,20,5]
            },
            {  
                name: 'windows phone',  
				
                data: [30,20,5,20,10,40]
            }
            
            ]
        });
    });
    
});
		

3. Buat div container di body HTML untuk menampilkan grafik

<div id="container" style="min-width: 400px;
 height: 400px; margin: 0 auto"></div>

Hasil
hasil dari script diatas tampil sebagai berikut

Multiple grafik dari data penjualan smartphone

Demo dan source code
Silahkan coba demonya langsung di sini dan download source codenya disini, source code sudah termasuk contoh grafik dengan tampilan area, bar dan kolom. Selamat mencoba

Author: Candra Adi Putra

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

11 thoughts on “Membuat Multiple Grafik chart berbasis Web”

  1. mas Kalo misalnya databasenya fieldnya lebih banyak gimana mas, kan kalo punya mas kan cuman 3 field doang ya Kalo misalnya lebih dari 3 field gimana mas ?? terima kasih..

  2. Mas, mau tanya caranya supaya desainnya gak bertimpa gimana yah..
    soalnya jika datanya banyak kan tapilan tahunnya jadi bertimpa dia mas..
    mohon bantuannya.. :)

Tinggalin komentar dong!