Manipulasi Data Dan Menampilkannya Kedalam Diagram (Chart) Memakai Library Highcharts Pada Aplikasi Php

 Melanjutkan postingan sebelumnya, kali ini aku akan posting cara menciptakan dan menampilkan Diagram (Chart) memakai Library Highcharts pada aplikasi PHP. Namun aku akan sedikit menambahkan cara memanipulasi data dalam database yang akan kita gunakan sebagai data Chart. Hal ini menurut pengalaman aku pribadi, lantaran saat menciptakan aplikasi yang harus menampilkan data Diagram/Chart, dan terkadang kita kebingungan kalau harus merangkum isu dari dalam database untuk ditampilkan kedalam Diagram/Chart.

Memanipulasi Data pada Database

Kenapa diharapkan manipulasi data?. Hal ini mungkin saja disebabkan lantaran struktur table yang kita buat tidak mendukung hal ini. Maksud aku yaitu terkadang struktur table yang dibentuk berbeda dengan data yang diharapkan dalam menciptakan chart.

Misalnya aku punya tumpuan table menyerupai di bawah ini (kode SQL untuk menciptakan 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 menyerupai ini:

Tabel 2

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

Nah lo, bagaimana cara memanipulasinya ya?
Logika yang paling gampang untuk mendapat data table 2 dari table 1 yaitu dengan menjumlahkan data yang mempunyai kesamaan, dalam hal ini pada kolom nama_browser.

Untuk mengimplementasikan fatwa diatas, Dalam MySQL sudah disediakan syntax-syntax yang dapat kita gunakan, misalnya, SUM, COUNT, AVERAGE, dll. Makara tinggal pilih saja kira-kira fungsi mana yang paling sempurna untuk aplikasi yang kita buat.
Dalam kasus ini aku akan memakai syntax COUNT. Berikut syntax SQL yang dapat kita gunakan untuk tumpuan table diatas:
SELECT nama_browser, COUNT(nama_browser) as jumlah_kunjungan FROM pengunjung GROUP BY nama_browser

Maka, bila di jalankan, arahan di atas akan menawarkan 2 buah kolom yaitu kolom nama_browser, dan kolom kunjungan. Berikut table hasil sanksi arahan diatas:

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

Menampilkan Data kedalam Chart memakai Highcharts Library

Untuk menciptakan Diagram/Chart memakai 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 membuktikan Jumlah)
LABEL_CHART= Nama/Label untuk masingmasing set Data
DATA_ATAU_JUMLAH_DATA = Jumlah data yang ditampilkan

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

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

Untuk menampilkan data dari database yang diambil memakai php, lalu menggabungkannya kedalam javascript, silahkan lihat eksklusif kodenya pada arahan sumber nya saja. (cape ngetiknya hehe).
Ini hasilnya:

Download Kode Sumber Tutorial

 

http://goo.gl/p7fpo

 

 

http://goo.gl/IXDQK

Oke, tutorialnya aku cukupkan sampe disini dulu, dalam postingan lainnya Insya Allah akan di bahas cara menciptakan dan memakai Chart untuk library yang lainnya.

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

Terima kasih sudah meluangkan waktu untuk mengunjungi blog ini.

Bagikan Artikel ini