ini adalah tutorial ketiga tentang cara membuat grafik chart menggunakan Highchart. Highchart adalah library javascript untuk membuat grafik berbasis web dengan cara yang sangat mudah.Pembahasan kali ini akan membuat grafik pie chart. Jika grafik batang lebih fokus pada perbandingan antar item, grafik linier lebih fokus pada tingkat pertumbuhan item (misal penjualan) maka grafik pie lebih fokus pada prosentase suatu item terhadap item secara keseluruhan. Item disini bisa berupa produk, orang, anggota dan sebagainya.

Pada contoh kali ini, kita akan membuat grafik pie chart menggunakan data fiktif berupa prosentase penjualan smartphone dari toko candraphone. Data prosentasi adalah sebagai berikut

  • Android =45.0 %
  • Blackberry =35.0%
  • iPhone=15.0 %
  • Windows Phone=5.0%

Bagaimana jika data belum dalam bentuk persen? anda harus membuat fungsi sendiri untuk mengkonversi array data asli kedalam format persen.

Langkah untuk membuat pie chart ada 3 yaitu

1. Include file jquery dan highchart

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

$(function () {
    var chart;
    
    $(document).ready(function () {
        
        // Build the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Penjualan smartphone bulan september 2012'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
//data prosentasi penjualan di letakan disini!
            series: [{
                type: 'pie',
                name: 'Presentase penjualan',
                data: [
                    ['Android',   45.0],
                    ['Blackberry',35.0],
                    
                    ['iPhone',    15.0],
                    ['Windowphone',     5.0]
                ]
            }]
        });
    });
    
});

3. Tentukan dimana lokasi piechart akan digambarkan.

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

Hasil grafik

Grafik piechart penjalan smartphone

Source code dan demo
Untuk melihat demonya, silahkan klik linknya disini. Untuk melihat source codenya, anda cukup klik kanan dan view source code. Jangan lupa, jika anda ingin membuat grafik ini di lokalhost, anda harus medownload juga file jquery.js dan highchart.js


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

15 Comments

Sutriana Y · 27 October , 2015 at 12:10 pm

Mohon bantuanya mas Chandra, gmn klau menampilkan data dari database dalam bentuk ballon seperti pada site berikut; https://photoworld.com/instagram-food-capitals/

Anonymous · 1 October , 2015 at 11:16 am

halo mas chandra kalau mau nampilin cuma satu kordinat x aja di tabelnya berdasarkan pekerjaan dalam tabel nasabah ada fiel pekerjan, di sana ada record dan didalam record ada 3 jenis pekerjaan 1. PNS, 2. Pelajar, 3. Petani… giman carnya biar bisa ngehitung jumlah pekerjaan nasabah jika ada lebih dari 1 nasabah yang memiliki pekerjaan sama mas..mkasih

Hendri DP · 13 March , 2015 at 2:51 pm

Tanya Mas C.A.P….
kalau grafiknya udah selesai, gmn cara masukin embed grafik itu ke halaman/blog website kita??

hendridwiputra · 22 February , 2015 at 9:38 pm

sorry… grafik line maksud saya, bukan batang.

hendridwiputra · 22 February , 2015 at 9:28 pm

mas, jquery dan highchartnya yang di download itu sama aja ngga dengan yang post sebelum ini? grafik batang??

Auliya Wahyuni · 10 November , 2014 at 1:53 pm

mas kalao yang diganti pie chart jadinya gimana ya? udah saya coba tapi tetap tidak ada perubahan.
source code :
series: [{
type: ‘pie’,
name: ‘SMS Blast’,
data: [
[‘Valid’, x ?>],
[‘Invalid’, y ?>]
]
}]

Anonymous · 19 May , 2014 at 11:24 pm

Terima kasih pak buat pencerahanya. TA saya maju terus kedepan XD

Anonymous · 24 January , 2013 at 11:58 pm

pak chandra,

klo bikin grafiknya menggunakan data di database bagaimana pak cara nya dari java

terima kasih pak

Candra Adi Putra · 4 December , 2012 at 6:24 pm

@masyi secara default, warna digenerate oleh highchart, tapi jika ingin warna di atur sendiri ..coba baca ini http://api.highcharts.com/highcharts#colors

maysi · 4 December , 2012 at 5:35 pm

mas mau nanya dong, untuk menngubah legen yang berwarna biru, hijau merah itu bagaimana yah ? mohon bantuannya . :D

Candra Adi Putra · 29 November , 2012 at 9:51 am

caranya sama dengan membuat grafik lain, lihat di http://www.candra.web.id/2012/09/25/membuat-grafik-chart-menggunakan-php-highchart/

hafiz · 29 November , 2012 at 2:01 am

mas ini kan ga pake database, nah kalo pake database bagaimana? di seriesnya. terima kasih

Candra Adi Putra · 22 November , 2012 at 10:34 am

untuk jquery download di jquery.com dan highchartnya download di highchart.com

Anonymous · 22 November , 2012 at 9:13 am

file j query sama highchart nya download dimana ka’.

Tinggalkan Komentar plz!

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