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

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
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
Buset dah … masukin datanya manual ~
database nya buang aja ga usah di tampilin ~ kasian tuh yang kena troll ~
klo mau ganti warna background dimana y Gan?
terima kasih
kalau buat grafik real time bagaimana, saya sudah nyobain tutorialya tapi nggak bisa
bagaimana klw di koneksikan dengan db mysql ???
makasih atas tutorialx
kalo koneksinya wammp gimana gan?
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..
bisa contoh membuat performa menggunakan chart gauge ?
Mas, mau tanya caranya supaya desainnya gak bertimpa gimana yah..
soalnya jika datanya banyak kan tapilan tahunnya jadi bertimpa dia mas..
mohon bantuannya.. :)
Mas, bisa bantu jika datanya konek ke MySql
kendala sama kyak pertanyaan di atas :'(
knpa ya klw sy masukin script PHP (untuk datanya terkoneksi ke MySql), chartnya gak mw muncul??? padahal baru nyobain menggantikan angka dengan script php,..
bisa gan… ini saya aplikasikan pake sql… salah di loopingnya biasanya kalo ga mau nampil…