Chart Dinamis dengan PHP-XML-JSChart - Rekaman Jejak-Jejak · Chart Dinamis dengan PHP-XML-JSChart ... kita buat databasenya terlebih dahulu ... value='".$result[$GLOBALS['vl_jumlah']]
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Chart Dinamis dengan PHP-XML-JSChart Fadlika Dita Nurjanto [email protected] http://fadlikadn.wordpress.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');
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 class.main.php digunakan untuk menyimpan konfigurasi pada server, seperti host, user, password, database, dan variabel-variabel yang akan digunakan untuk konfigurasi JSChart.
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
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
Langkah terakhir adalah membuat file chart.php. File ini digunakan untuk menampilkan chart sesuai konfigurasi pada file mysqltoxml.php.
// 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); } }
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.. 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 : [email protected]