Dynamic Chart Fluctuation Using AJAX Technique

17 01 2011

Sesuai janji saya ditulisan ketiga (Realtime Chart Without Page Refresh Using AJAX Technique-Part 3) yang lalu, yaitu tentang pembuatan grafik pada halaman website dengan fusioncharts yang dapat menampilkan grafik dengan data yang diambil melalui sumber data atau basis data (database). Tulisan kali ini merupakan lanjutan dari artikel yang terdahulu (part1, part2, dan part3) tetapi judul saya ubah menjadi Dynamic Chart Fluctuation Using AJAX Technique (biar ga bosen n kelihatan keren dikit…hehehe). Tidak perlu panjang lebar keterangan yang diberikan, langsung kecontoh penerapan atau studi kasus aja biar enak. Persiapan seperti yang kemaren (laptop atau komputer, apache, php, mysql, dll) 

Langkah Pertama kita siapkan terlebih dahulu database atau basis data, yang berfungsi sebagai tempat penampung data atau istilah sehari-harinya kita siapkan terlebih dahulu wadah sebagai tempat penyimpanan data. Berikut screenshot tabel dari database yang saya buat : (desain database dan tabel terserah anda – opsional)

Gambar 1. Desain Database

Langkah Kedua adalah desain halaman untuk menampilkan chart yang akan kita tampilkan.

berikut adalah source code halaman “index.php”




Berikut adalah source code untuk query data :

Results Chart :

Demikianlah beberapa bait source code dan screenshot tampilan chart yang dihasilkan, kalau kita amati dari script data.php dapat kita lihat baris ke-28 sbb :

mysql_query(“INSERT INTO data (value1, value2) VALUES (” . rand() .   “, ” . rand() . “)”, $dbConn);

script tersebut akan melakukan input data yang berupa data acak (random) dengan menggunakan fungsi rand() pada php. Oiya, pada tampilan screenshot tersebut chart hanya berupa image (ya iyalah…kan screenshot…) nanti kalo kawan coba sendiri di webserver lokal, maka akan terlihat perubahan data pada grafik secara fluktuatif tanpa kita load (refresh) halaman web tersebut.

Source Code Download

Nah, nanti kawan-kawan dapat mengunduh source code lengkapnya. Silahkan anda modifikasi sendiri sesuai dengan keperluan.

DOWNLOAD URL = http://www.4shared.com/file/F1IYKVpY/dynamic-chart.html

ok, sekian dulu tulisan sederhana ini…..semoga bermanfaat. MERDEKA!!!!!

Reference : sony-ak

Regards


Actions

Information

6 responses

24 04 2012
Arief Rahmansyah

Kalau menggunakan grafik bar 3d, apa yang diganti ya…

25 07 2012
fe

kalau mau export grafiknya ke pdf ato image gmn caranya????

2 11 2012
yoeman

Hatur nuhun banget boss..

2 11 2012
heru widakdo

Sama2 bang yoeman….thanks 4 comment

19 03 2013
nisar

kereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeennnn
di tunggu artikel kerennya lagi

10 09 2015
Anton Baedilah

kalau misal di axis y nya lebih dari satu gimana caranya?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: