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

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

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

  1. Sutriana Y says:

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

  2. Anonymous says:

    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

  3. Hendri DP says:

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

  4. sorry… grafik line maksud saya, bukan batang.

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

  6. Auliya Wahyuni says:

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

  7. Anonymous says:

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

  8. Anonymous says:

    pak chandra,

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

    terima kasih pak

    1. Candra Adi Putra says:

      kalau dari java saya kurang tau, silahkan tanya di stackoverflow http://stackoverflow.com/questions/10533605/plot-graph-in-web-appilcation

  9. Candra Adi Putra says:

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

  10. maysi says:

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

  11. hafiz says:

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

  12. Candra Adi Putra says:

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

  13. Anonymous says:

    file j query sama highchart nya download dimana ka’.

Tinggalkan Komentar plz!