Manipulasi data dan menampilkannya kedalam Diagram (Chart) menggunakan Library Highcharts pada aplikasi PHP

 Melanjutkan postingan sebelumnya, kali ini saya akan posting cara membuat dan menampilkan Diagram (Chart) menggunakan Library Highcharts pada aplikasi PHP. Namun saya akan sedikit menambahkan cara memanipulasi data dalam database yang akan kita gunakan sebagai data Chart. Hal ini berdasarkan pengalaman saya pribadi, karena ketika membuat aplikasi yang harus menampilkan data Diagram/Chart, dan terkadang kita kebingungan kalau harus merangkum informasi dari dalam database untuk ditampilkan kedalam Diagram/Chart.

Memanipulasi Data pada Database

Kenapa diperlukan manipulasi data?. Hal ini mungkin saja disebabkan karena struktur table yang kita buat tidak mendukung hal ini. Maksud saya adalah terkadang struktur table yang dibuat berbeda dengan data yang diperlukan dalam membuat chart.

Misalnya saya punya contoh table seperti di bawah ini (kode SQL untuk membuat table ini ada pada Source Code Tutorial):

Tabel 1

id_pengunjung	nama_browser	ip_address	tanggal_kunjungan
1	Mozila Firefox	232.156.24.1.3	2013-03-28 10:49:47
2	Google Chrome	32.56.24.1.3	2013-03-28 10:49:47
3	Internet Explorer	232.156.24.1.38	2013-03-28 10:50:17
4	Google Chrome	32.156.24.1.3	2013-03-28 10:50:17
5	Mozila Firefox	232.156.24.1.38	2013-03-28 10:50:28
6	Google Chrome	32.156.24.1.3	2013-03-28 10:50:28
7	Mozila Firefox	232.156.24.1.38	2013-03-28 10:50:36
8	Google Chrome	32.156.24.1.3	2013-03-28 10:50:36

Sedangkan dalam diagram kita ingin data-data tersebut ditampilkan dalam bentuk seperti ini:

Tabel 2

Nama Browser	Jumlah
Google Chrome	4
Internet Explorer	1
Mozila Firefox	3

Nah lo, bagaimana cara memanipulasinya ya?
Logika yang paling mudah untuk mendapatkan data table 2 dari table 1 adalah dengan menjumlahkan data yang memiliki kesamaan, dalam hal ini pada kolom nama_browser.

Untuk mengimplementasikan pemikiran diatas, Dalam MySQL sudah disediakan syntax-syntax yang bisa kita gunakan, misalnya, SUM, COUNT, AVERAGE, dll. Jadi tinggal pilih saja kira-kira fungsi mana yang paling tepat untuk aplikasi yang kita buat.
Dalam kasus ini saya akan menggunakan syntax COUNT. Berikut syntax SQL yang bisa kita gunakan untuk contoh table diatas:
SELECT nama_browser, COUNT(nama_browser) as jumlah_kunjungan FROM pengunjung GROUP BY nama_browser

Maka, jika di jalankan, kode di atas akan memberikan 2 buah kolom yaitu kolom nama_browser, dan kolom kunjungan. Berikut table hasil eksekusi kode diatas:

Nama Browser	Jumlah
Google Chrome	4
Internet Explorer	1
Mozila Firefox	3

Menampilkan Data kedalam Chart menggunakan Highcharts Library

Untuk membuat Diagram/Chart menggunakan Highcharts Library cukup mudah, berikut cara:
1.    Tambahkan JQuery.js, highcharts.js pada aplikasi web agan-agan sekalian
2.    Untuk Menginisialisasi Chart Tambahkan Kode Berikut:

<script type="text/javascript">

            var chart1; // globally available

            $(document).ready(function() {

                chart1 = new Highcharts.Chart({

                    chart: {

                        renderTo: 'ID_TEMPAT_CHART_DITAMPILKAN',

                        type: 'column'

                    },  

                    title: {

                        text: 'JUDUL_CHART'

                    },

                    xAxis: {

                        categories: [‘NAMA_KATEGORI’]

                    },

                    yAxis: {

                        title: {

                            text: 'LABEL_Y'

                        }

                    },

                    series:            

                        [{

                            name: 'LABEL_CHART',

                            data: [DATA_ATAU_JUMLAH_DATA]

                        },]

        });

    });

</script>

Silahkan ganti kata-kata yang di cetak tebal dengan data yang di inginkan.

KETERANGAN:
ID_TEMPAT_CHART_DITAMPILKAN = Lokasi yang agan inginkan untuk menempatkan Chartnya.

JUDUL_CHART = Judul dari Chart
NAMA_KATEGORI = Nama/Label Kategori atau set daya (Label X)
LABEL_Y = Label/Keterangan pada Y (biasanya menunjukan Jumlah)
LABEL_CHART= Nama/Label untuk masingmasing set Data
DATA_ATAU_JUMLAH_DATA = Jumlah data yang ditampilkan

3.    Tambahkan div atau blok kode pada body (tempat dimana kita akan menampilkan Chart-nya). Missal:

<div id='container'></div>

Untuk menampilkan data dari database yang diambil menggunakan php, kemudian menggabungkannya kedalam javascript, silahkan lihat langsung kodenya pada kode sumber nya saja. (cape ngetiknya hehe).
Ini hasilnya:

Download Kode Sumber Tutorial

 

http://goo.gl/p7fpo

 

 

http://goo.gl/IXDQK

Oke, tutorialnya saya cukupkan sampe disini dulu, dalam postingan lainnya Insya Allah akan di bahas cara membuat dan menggunakan Chart untuk library yang lainnya.

Mudah-mudahan tutorial ini bisa bermanfaat dan membantu terutama kepada mereka yang sedang belajar.

Terima kasih sudah meluangkan waktu untuk mengunjungi blog ini.