Cara membuat grafik Pie Chart berbasis Web

Grafik piechart penjalan smartphone

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

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

15 thoughts on “Cara membuat grafik Pie Chart berbasis Web”

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

  2. 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 ?>]
    ]
    }]

Tinggalin komentar dong!