Membuat Multiple Grafik chart berbasis Web

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

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

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