Realtime Chart Without Page Refresh Using AJAX Technique. (Part 1)

20 11 2010

Pada artikel sebelumnya (yang membahas tentang grafik di website) berjudul “Membuat Tampilan Grafik Pada Halaman Website” dan satu lagi tulisan yang berjudul “Membuat Grafik Pada Halaman Website Dengan Google Chart API” telah penulis sajikan meskipun hanya dijelaskan secara umum. Di kesempatan kali ini penulis mencoba sharing sedikit ilmu tentang pembuatan grafik real-time pada sebuah halaman website dengan menggunakan teknik AJAX (Asynchronous Javascript And XMLHTTP). Tulisan yang berjudul “Realtime Chart Without Page Refresh Using AJAX Technique (Part-1)” sengaja saya pecah beberapa bagian untuk mempermudah penjelasan tentang pembuatan grafik berbasis website, karena banyaknya penjelasan yang harus disampaikan sebelum menginjak pada proses pembuatannya. Mengapa AJAX ??? seperti yang kita ketahui, bahwa AJAX merupakan suatu teknik dalam suatu pemrograman berbasis website yang dapat menyajikan suatu aplikasi website yang interaktif, cepat, dan bersifat usability. Banyak website-website ternama yang menggunakan teknik AJAX ini, seperti Facebook, Gmail, Yahoo Mail, dlsb. Tulisan ini tidak akan membahas secara menyeluruh tentang AJAX, kawan-kawan dapat membaca tentang apa itu AJAX pada tautan berikut ini. Selanjutnya, tulisan ini akan lebih membahas tentang pembuatan grafik itu sendiri.

Sebelumnya kita telah membahas tentang pembuatan grafik pada suatu halaman web dengan bantuan modul-modul atau library dari jpgraph dan juga pembuatan grafik menggunakan Google Chart API, seperti yang kita ketahui bahwa data yang di tampilkan pada grafik tersebut tidak dapat berubah secara real-time dan memerlukan reload halaman web tersebut untuk melihat perubahan yang terjadi pada tampilan grafik apabila ada data yang di ubah. Berangkat dari kekurangan tersebut, penulis mencoba mencari tahu dan bertanya kepada mbah google dan akhirnya si-mbah pun memberikan sebuah petunjuk untuk membuat grafik tersebut menggunakan teknik AJAX yang dipadukan dengan FLASH, sehingga tampilan grafik yang diberikan pun terlihat indah, cantik, dan sexy (bahasa kerennya kurang lebih sbb : compact, interactive and visually-arresting charts). Sebut saja Fusion Charts (nama sebenarnya) sebuah aplikasi yang memiliki langkah teknis kurang lebih sama seperti jpgraph, dimana kita diharuskan untuk mengunduh library yang berisi class-class program. Ibarat orang memasak, kita tinggal meracik bahan baku yang telah kita beli dipasar, tambahkan bumbu atau penyedap rasa secukupnya, tunggu hingga masak, makanan lezat pun siap dihidangkan (hhhmmm…jadi lapar nich….) hehehe….. Berikut adalah screenshot atau tampilan grafik yang dibangun dengan Fusion Charts :

Gambar 1. Tampilan grafik yang dibangun dengan Fusion Charts.

 

Keuntungan apa sih yang kita dapat kalo kita menggunakan Fusion Charts ini ??? kan kemarin uda ada tuh grafik yang pake jpgraph ama Google Chart API ??? Pusing dech… bingung mau pilih yang mana, sama bingungnya kalo disuruh milih pacar…… hehehehe…. ok, ga usah bingung dulu, sama seperti memilih pacar, kemaren udah kenalan ama si-jpgraph, sore tadi kenalan ama si-Google Chart API, nah sekarang kenalan lagi nih ama Fusion Charts. Kalau uda kenal semua ,baru ntar dipilih mana yang cocok dihati para pembaca. hehehehe….

Kembali ke topik, berikut beberapa keuntungan yang diberikan oleh Fusion Charts :

  • Animated and Interactive Chart : Anda dapat dengan cepat dan mudah membangun sebuah grafik animasi yang interaktif.
  • Easy yet powerful JavaScript integration : Fusion Chart dapat mengintegrasikan grafik dengan modul java script.
  • No Installation : Tidak memerlukan instalasi, karena berupa modul-modul program.
  • Easy to use : Sangat mudah digunakan.
  • Runs on a variety of platforms : Dapat dijalankan di semua platforms (ex : Windows, Linux, Mac, dll).
  • Reduces load on your servers : Mengurangi beban pada server.
  • A plethora of chart types : Memiliki banyak jenis tipe grafik (pie, bar, line, etc).
  • Free : Gratis alias ngga bayar.

Itulah beberapa keuntungan yang ditawarkan oleh aplikasi Fusion Chart. Sekarang kembali ke kawan-kawan sendiri, ingin menggunakan aplikasi mana, yang sesuai dengan sistem yang kawan buat. Perlu diketahui bahwa dengan Fusion Chart ini, kita dapat membangun grafik berbasis website yang dapat digabungkan dengan beberapa bahasa pemrograman seperti PHP, ASP, ASP.NET, JSP, Ruby on Rails. Namun pada tulisan ini, baik bagian 1 dan bagian selanjutnya hanya akan dibahas pembuatan grafik Fusion Chart dengan PHP.

Ada beberapa cara untuk menampilkan data ke grafik Fusion Chart, yaitu : Data URL Method dan Data XML Method. Untuk lebih jelasnya tentang kedua metode, itu mari kita simak bagan atau skema kedua metode penampilan data ke grafik Fusion Chart tersebut.

Gambar 2. Skema Data URL Method.

 

Gambar 3. Skema Data XML Method.

 

Dari tadi kok muncul istilah XML ??? apa sih XML itu ??? Kawan-kawan yang ingin mengetahui penjelasan XML (Extensible Markup Language) bisa membacanya pada tautan ini. Setelah kawan membaca dan mempunyai bayangan tentang XML, kita kembali lagi pada kedua metode diatas. Pada Data URL Method (Gambar 2) kita hanya memerlukan URL dari XML data ketika terjadi proses permintaan (request) dari klient dan akan direspon oleh server, selanjutnya data akan ditampilkan ke client komputer dalam bentuk XML Data untuk diubah (render) ketampilan grafik. Metode lainnya, yaitu Data XML Method (gambar 3). Pada metode ini, anda mengirimkan konten HTML, file grafik SWF, dan Data XML sekaligus (bersamaan) untuk ditampilkan di browser . Setelah file SWF dimuat (load), selanjutnya data XML akan diproses untuk ditampilkan ke dalam bentuk grafik yang diinginkan. Untuk lebih jelasnya silahkan melihat gambar 2 dan 3.

Fiiiuuuhhhh, saya kira cukup sampai disini aja untuk tulisan bagian pertama ini (part-1). Bagian pertama kurang lebih hanya sebagai pengantar, sebelum membahas ke proses pembuatan grafiknya. Untuk bagian selanjutnya sebenarnya udah di tulis sih, tapi masih berupa draft. Rencana untuk ke bagian kedua langsung ke contoh atau studi kasus aja ya…. biar enak…hehehe… Kalau nulisnya terlalu banyak, jemari saya terkena syndrome EPL (Encok, Pegel, Linu).

Sekian Tulisan sederhana ini, Semoga bermanfaat bagi yang membutuhkannya. Bagi para sesepuh master-master dan teman-teman yang uda jago, mohon saran dan kritikannya, mohon maklum karena penulis masih pemula yang ingin berbagi dan berdiskusi. hehehehe…

Udah aaahh… Capek…

MERDEKA!!!!!!

 

(Bersambung…..)

Episode Selanjutnya :

Realtime Chart Without Page Refresh Using AJAX Technique. (Part 2)

 

Regards

 

 

 

 


Actions

Information

7 responses

2 12 2010
mammoth

“Kalau uda kenal semua ,baru ntar dipilih mana yang cocok dihati para penulis. hehehehe….”
saya mohon kalimat diatas diconfirm……
penulis kelihatan bingung dalam memilih pacar….padahal saya tau kalau master ini sudah menetapkan pilihan pada satu cewek yg berinisial “D….”.
nice post Master…..mohon bimbingannya.
ditunggu sambungannya.

3 12 2010
heru widakdo

hahahha….Siap Paduka….laksanaken….

10 01 2011
Toton

Numpang nanya…
Bisa minta pnecerahannya untuk menampilkan jenis grapik yg sama pada satu halaman, karena waktu di coba, yg muncul cuman satu….

Thx

15 01 2011
heru widakdo

apakah sudah anda check untuk variabel2 nya ?

10 06 2011
Hendro Al-Indunisy

Mas untuk yang google chart api tools gimana caranya biar bisa ditampilkan dalam ajax Terimakasih

1 03 2012
Muhammad Hafid

ini grafik yang ada dipostingan ini, jika kita update data langsung bergerak ga grafiknya.? atau setelah update data harus kita refresh dulu.?

1 03 2012
heru widakdo

Untuk grafik realtime. Ato dynamic chart bs saudara baca d part trakhir

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: