Chart Dinamis dengan

PHP-XML-JSChart
Fadlika Dita Nurjanto
fadlikadn@gmail.com http://fadlikadn.wordpress.com

Lisensi Dokumen:
Copyright 2003-2011 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

Artikel ini sesungguhnya lanjutan dari artikel saya sebelumnya, masih berkutat pada pembuatan chart dengan JSChart pada kasus yang sama, yaitu rekap data mahasiswa selama 5 tahun terakhir. Tapi bedanya, di sini chart tersebut sudah dikembangkan lebih lanjut. Chart ini bisa digunakan sebagai monitoring secara realtime yang tidak memakan resource banyak, karena solusi AJAX yang digunakan di sini dapat menekan resource sehingga menjadi lebih rendah. Selain AJAX, PHP dan MySQL digunakan untuk mempermudah konektivitas antara server dan client side. Jika pada artikel sebelumnya, data pada chart hanya bersifat statis (karena dideklarasikan langsung pada source code), sehingga kurang fleksibel. Sekarang, data jumlah mahasiswa akan disimpan pada database MySQL. Sebelumnya, kita buat databasenya terlebih dahulu (pada MySQL). Pada MySQL, ketikkan sintaks sebagai berikut :
CREATE DATABASE `jschart` ; CREATE TABLE `sum_student` ( `tahun` VARCHAR( 5 ) NOT NULL , `jumlah` VARCHAR( 255 ) NOT NULL ) ENGINE = INNODB;

Masukkan data mahasiswa selama 5 tahun terakhir :

INSERT INTO `sum_student` ( `tahun` , `jumlah` ) VALUES ('2006', '150'); INSERT INTO `sum_student` ( `tahun` , `jumlah` ) VALUES ('2007', '90'); INSERT INTO `sum_student` ( `tahun` , `jumlah` ) VALUES ('2008', '200'); INSERT INTO `sum_student` ( `tahun` , `jumlah` ) VALUES ('2009', '350'); INSERT INTO `sum_student` ( `tahun` , `jumlah` ) VALUES ('2010', '267');

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2011 IlmuKomputer.Com

Pada PHPMyAdmin, tampilannya sebagai berikut :

Setelah database selesai, langkah selanjutnya adalah membuat file-file yang dibutuhkan dalam pembuatan chart ini. Di sini dibutuhkan 5 file termasuk file library JSChart itu sendiri. Alur data di sini membutuhkan beberapa elemen,yaitu PHP, XML, dan Javascript. XML digunakan untuk menghubungkan PHP dengan Javascript (JSChart).

File yang dibutuhkan : Class.main.php Mysqltoxml.php Jschart.js Chart.php Class.ajax.js

File class.main.php digunakan untuk menyimpan konfigurasi pada server, seperti host, user, password, database, dan variabel-variabel yang akan digunakan untuk konfigurasi JSChart.

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2011 IlmuKomputer.Com

File class.main.php
<?php $GLOBALS['tbl_data'] $GLOBALS['vl_tahun'] $GLOBALS['vl_jumlah'] $GLOBALS['db'] $GLOBALS['type_bar'] $GLOBALS['setAxisColor'] $GLOBALS['setAxisNameColor'] $GLOBALS['setAxisNameX'] $GLOBALS['setAxisNameY'] $GLOBALS['setAxisValuesColor'] $GLOBALS['setBackgroundColor'] $GLOBALS['setBarOpacity'] $GLOBALS['setGridColor'] $GLOBALS['setGridOpacity'] $GLOBALS['setSize_width'] $GLOBALS['setSize_height'] $GLOBALS['setTitle'] $GLOBALS['setTitleColor']

= "sum_student"; = "tahun"; = "jumlah"; = "jschart"; = "bar"; = "#FFFFFF"; = "#B2D4E9"; = "Tahun"; = "Jumlah"; = "#35FA08"; = "#151515"; = 1; = "#B5DBE3"; = 0.1; = 600; = 400; = "Data Mahasiswa Baru"; = "#FFFFFF";

class class_connect { public $host = "localhost"; public $user = "root"; public $password = ""; public $db_name = "jschart"; public function connect() { if(!$this->con) { $con_host = @mysql_connect($this->host,$this->user,$this->password) or die(mysql_error()); if($con_host) { $con_db = @mysql_select_db($this->db_name,$con_host) or die(mysql_error()); if($con_db) { $this->con = true; return true; } else { return false; } } else { return false; } } else { return false; } } } ?>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2011 IlmuKomputer.Com

Setelah itu, kita buat file mysqltoxml.php. File ini digunakan untuk mengkonversi data dari format MySQL menjadi format XML. Kenapa harus XML, karena untuk mengenerate chart dengan library JSChart, tidak bisa menggunakan cara direct dari PHP langsung ke sintaks javscript, tetapi menggunakan perantara XML. Format XML

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2011 IlmuKomputer.Com

File mysqltoxml.php
<?php include('class.main.php'); $koneksi = new class_connect(); $koneksi->connect(); header('Content-Type: text/xml'); $SQL = "SELECT * FROM ".$GLOBALS['tbl_data']." ORDER BY ".$GLOBALS['vl_tahun']; $query = mysql_query($SQL) or die(mysql_error()); echo "<?xml version='1.0'?>"; echo "<JSChart>"; echo "<dataset type='".$GLOBALS['type_bar']."'>"; while($result = mysql_fetch_array($query)) { echo "<data unit='".$result[$GLOBALS['vl_tahun']]."' value='".$result[$GLOBALS['vl_jumlah']]."'/>"; } echo "</dataset>"; echo "<colorset>"; $query = mysql_query($SQL) or die(mysql_error()); while($result = mysql_fetch_array($query)) { if($result[$GLOBALS['vl_jumlah']]<100) { $color = '#BBDDE5'; } if($result[$GLOBALS['vl_jumlah']]>100 and $result['vl_jumlah']<=200) { $color = '#52AEC1'; } if($result[$GLOBALS['vl_jumlah']]>200 and $result['vl_jumlah']<=300) { $color = '#0D7EEF'; } if($result[$GLOBALS['vl_jumlah']]>300) { $color = '#074B8F'; } echo "<color value='".$color."'/>"; } echo "</colorset>"; echo "<optionset>"; echo "<option set='setTitle' value=\"'".$GLOBALS['setTitle']."'\"/>"; echo "<option set='setAxisNameX' value=\"'".$GLOBALS['setAxisNameX']."'\"/>"; echo "<option set='setAxisNameY' value=\"'".$GLOBALS['setAxisNameY']."'\"/>"; echo "<option set='setBackgroundColor' value=\"'".$GLOBALS['setBackgroundColor']."'\"/>"; echo "<option set='setAxisColor' value=\"'".$GLOBALS['setAxisColor']."'\"/>"; echo "<option set='setAxisValuesColor' value=\"'".$GLOBALS['setAxisValuesColor']."'\"/>"; echo "<option set='setAxisNameColor' value=\"'".$GLOBALS['setAxisNameColor']."'\"/>"; echo "<option set='setTitleColor' value=\"'".$GLOBALS['setTitleColor']."'\"/>"; echo "<option set='setSize' value='".$GLOBALS['setSize_width'].",".$GLOBALS['setSize_height']."'/>"; echo "<option set='setGridOpacity' value='".$GLOBALS['setGridOpacity']."'/>"; echo "<option set='setGridColor' value=\"'".$GLOBALS['setGridColor']."'\"/>"; echo "<option set='setBarOpacity' value='".$GLOBALS['setBarOpacity']."'/>"; echo "</optionset>"; echo "</JSChart>"; ?>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2011 IlmuKomputer.Com

Step berikutnya adalah membuat script AJAX. Script ini bertujuan untuk men-generate ulang file mysqltoxml.php tanpa meload seluruh elemen halaman web. File class.ajax.js
// JavaScript Document var XMLHttpRequestObject = false; if(window.XMLHttpRequest){ XMLHttpRequestObject = new XMLHttpRequest(); } else if(window.ActiveXObject){ XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getInfo(dataSource, divID) { if(XMLHttpRequestObject) { var obj = document.getElementById(divID); var chartnew = new JSChart(divID,'bar'); XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function() { obj.innerHTML = "<img src='ajax-loading.gif'>"; obj.height = 400; obj.width = 600; if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { obj.innerHTML = ""; chartnew.setDataXML(dataSource); chartnew.draw(); } } XMLHttpRequestObject.send(null); } }

Langkah terakhir adalah membuat file chart.php. File ini digunakan untuk menampilkan chart sesuai konfigurasi pada file mysqltoxml.php.

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2011 IlmuKomputer.Com

File chart.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chart with XML</title> <script type="text/javascript" src="jscharts.js"></script> <script type="text/javascript" src="class.ajax.js"></script> </head> <body> <div align="center"> <form> <input name="update" type="button" value="Update Data" onclick="getInfo('mysqltoxml.php','place')" id="update"/> </form> </div> <div id="place" style="vertical-align:middle; text-align:center;">Chart Here</div> <script type="text/javascript"> var chart_graph = new JSChart('place','bar'); chart_graph.setDataXML("mysqltoxml.php"); chart_graph.draw(); </script> </body> </html>

Hasil akhirnya adalah sebagai berikut:

Saat pertama kali di-load, javascript pada chart.php dijalankan. Untuk mengupdate data secara langsung, cukup menekan tombol yang ada di atas chart.

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2011 IlmuKomputer.Com

Source lengkap ada pada file lampiran. Untuk pengembangan lebih lanjut, coba cari kasus lain yang ada di sekitar kita dan cobalah temukan sebuah solusi yang efektif. Gunakan resourceresource yang ada. Maksimalkan kemampuan, tingkatkan kepekaan.. Selamat Belajar..

Referensi
JSChart Manual http://www.jschart.com Holzner, Steve. 2006. Ajax For Dummies. Wiley Publishing PHP Manual http://www.php.net

Biografi Penulis
Fadlika Dita Nurjanto. Lahir di Wonosobo, 9 November 1991. Menyelesaikan SD di SD 2 Wonosobo tahun 2004, SMP 1 Wonosobo tahun 2007, dan SMK 1 Wonosobo tahun 2010. Kemudian meneruskan studi di ITS Surabaya dengan jurusan Teknik Informatika. Semasa di SMK, menjadi programmer di DiengCyber, sebuah Komunitas IT di Wonosobo, Jateng. Saat ini konsentrasi ke pengembangan Aplikasi Enterprise, Pendidikan, dan UKM. Informasi lebih lanjut tentang penulis : Blog : http://fadlikadn.wordpress.com Email : fadlikadn@gmail.com

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2011 IlmuKomputer.Com