Chart Dinamis dengan PHP-XML-JSChart

Posted on Updated on

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');

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

File class.main.php

<?php
$GLOBALS['tbl_data'] = "sum_student";
$GLOBALS['vl_tahun'] = "tahun";
$GLOBALS['vl_jumlah'] = "jumlah";
$GLOBALS['db'] = "jschart";
$GLOBALS['type_bar'] = "bar";
$GLOBALS['setAxisColor'] = "#FFFFFF";
$GLOBALS['setAxisNameColor'] = "#B2D4E9";
$GLOBALS['setAxisNameX'] = "Tahun";
$GLOBALS['setAxisNameY'] = "Jumlah";
$GLOBALS['setAxisValuesColor'] = "#35FA08";
$GLOBALS['setBackgroundColor'] = "#151515";
$GLOBALS['setBarOpacity'] = 1;
$GLOBALS['setGridColor'] = "#B5DBE3";
$GLOBALS['setGridOpacity'] = 0.1;
$GLOBALS['setSize_width'] = 600;
$GLOBALS['setSize_height'] = 400;
$GLOBALS['setTitle'] = "Data Mahasiswa Baru";
$GLOBALS['setTitleColor']= "#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;
}
}
}
?>

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

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>";
?>

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.

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.

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 resource-resource yang ada. Maksimalkan kemampuan, tingkatkan kepekaan..

Selamat Belajar..

Tulisan Lengkap di sini : fadlikadn-jschart_php_ajax
Download File lengkap di sini : Source code

Iklan

6 thoughts on “Chart Dinamis dengan PHP-XML-JSChart

    Dam-dam said:
    7 Februari 2011 pukul 17:51

    Mantap gan codingnya….

    ryosuryo.co.cc

      fadlikadn responded:
      8 Februari 2011 pukul 06:13

      makasih gan… source codenya bs didownload sekalian, di Ziddu..

    MuARa said:
    8 Maret 2011 pukul 09:31

    wah gan di sharing di grup aja ilmunya biar ndewone bareng…
    Salam blogger dari SBY
    keep your spirit of blogging!!!!

    Najla said:
    2 Januari 2013 pukul 05:37

    bagus.. nice share… ijin download.. 🙂

    Folkes said:
    6 Februari 2013 pukul 04:44

    ijin tanya gan… saya pengen tampilkan grafik accelerometer dari arduino ke komputer dengan php. kira2 cara2nya gmana ya..??? Koneksi arduino ke komputer pake serial, dan garfik harus real time (kalo sensor bergetar, grafik juga harus berubah. kira2 saya butuh tambahan software apa saja selain PHP, mysql. trimakasih.

    Arrairi rery (@Arrairi_rery) said:
    31 Mei 2014 pukul 00:04

    ini apanya yg kurang Mas, tak teliti source dr awal ngak ada yg error. tp pas nge-load muncul alert sperti gbr
    tersebut, Nuwon sebelumya.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s