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

Categories: JavascriptjQuery

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. Ingin Kerjasama, Pasang Iklan, Membuat aplikasi Android atau Web? hubungi saya di candraadiputra (at) gmail (dot) com atau WA ke 081328533115

12 Comments

Anonymous · 22 March , 2017 at 9:30 am

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

Ariska · 7 October , 2016 at 1:02 pm

klo mau ganti warna background dimana y Gan?
terima kasih

Anonymous · 5 September , 2016 at 3:11 pm

kalau buat grafik real time bagaimana, saya sudah nyobain tutorialya tapi nggak bisa

ivobel · 13 November , 2015 at 9:52 am

bagaimana klw di koneksikan dengan db mysql ???

makasih atas tutorialx

friski · 25 July , 2015 at 10:58 am

kalo koneksinya wammp gimana gan?

kunrat nur s · 10 February , 2015 at 10:22 am

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

Andi · 21 December , 2014 at 10:21 pm

bisa contoh membuat performa menggunakan chart gauge ?

Masuno · 25 November , 2014 at 7:19 pm

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

kastam · 13 May , 2014 at 11:06 am

Mas, bisa bantu jika datanya konek ke MySql

luluk · 2 February , 2013 at 11:06 am

kendala sama kyak pertanyaan di atas :'(

enaleprom · 1 January , 2013 at 10:20 pm

knpa ya klw sy masukin script PHP (untuk datanya terkoneksi ke MySql), chartnya gak mw muncul??? padahal baru nyobain menggantikan angka dengan script php,..

    ayah raihaan · 17 March , 2015 at 10:58 pm

    bisa gan… ini saya aplikasikan pake sql… salah di loopingnya biasanya kalo ga mau nampil…

Tinggalkan Komentar plz!

This site uses Akismet to reduce spam. Learn how your comment data is processed.