Cara membuat grafik Pie Chart berbasis Web

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

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