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

SmartphoneJanuariFebuariMaretAprilMeiJuni
Android2030506080100
iPhone51015254060
Blackberry100604030205
Windowsphone30205201040

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

By Candra Adi Putra

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

13 thoughts on “Membuat Multiple Grafik chart berbasis Web”
  1. lah buset setiap ane search how to ? atau cara membuat ? tentang grafik ni, semuanya data dibuat manual, klo manual semua bisa gan, tolong dibuat tu auto, baik untuk nampil nama hingga count isi data tabelnya

  2. Buset dah … masukin datanya manual ~
    database nya buang aja ga usah di tampilin ~ kasian tuh yang kena troll ~

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *