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

27 11 2010

Halo kawan, berjumpa kembali dengan tulisan saya yang merupakan lanjutan dari artikel terdahulu dengan judul “Realtime Chart Without Page Refresh Using AJAX Technique. (Part 1)” kali ini akan saya lanjutkan di bagian kedua yang akan membahas tentang penggunaan grafik realtime pada sebuah halaman website dengan menggunakan fusionchart. Pada bagian ini akan lebih difokuskan ke teknis pembuatannya, untuk teori-teori penunjang dapat kawan baca dibagian pertama meskipun tidak diberikan secara lengkap dan mendetail.

Hmmmmm, ok kalau begitu kita langsung to the point aja ngga usah panjang lebar. Pada kesempatan ini kita akan membuat sebuah grafik berbasis website dengan bantuan modul-modul dari fusionchart, untuk sekedar gambaran kawan-kawan silahkan membuka website Pusat Data dan Informasi Bencana Indonesia yang beralamatkan di http://dibi.bnpb.go.id/ (link dilihat pada bln november 2010) yang menggunakan fusionchart untuk menampilkan data-data informasi bencana seluruh Indonesia. Sebelum memulai pembuatan grafik ini, kita siapkan perlengkapannya sbb :

  • Komputer atau Laptop.
  • Text Editor (notepad / notepad++ / PsPad, dll).
  • Perangkat Lunak (Apache, Mysql, PHP).
  • dll

Setelah siap, jangan lupa untuk mengunduh modul-modul dari fusionchart yang dapat kawan unduh di situs resminya. Selanjutnya buka text editor dan ketikkan beberapa bait source code berikut :

<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
 <set name='Jan' value='462' color='AFD8F8' />
 <set name='Feb' value='857' color='F6BD0F' />
 <set name='Mar' value='671' color='8BBA00' />
 <set name='Apr' value='494' color='FF8E46' />
 <set name='May' value='761' color='008E8E' />
 <set name='Jun' value='953' color='D64646' />
 <set name='Jul' value='629' color='8E468E' />
 <set name='Aug' value='622' color='588526' />
 <set name='Sep' value='376' color='B3AA00' />
 <set name='Oct' value='494' color='008ED6' />
 <set name='Nov' value='761' color='9D080D' />
 <set name='Dec' value='960' color='A186BE' />
</graph>

Setelah kawan menuliskannya kode diatas pada text editor, simpan dengan nama berekstensi *.xml (Misalnya : Data.xml). Selanjutnya tuliskan juga source code berikut :

<html>
 <head>
 <title>My First FusionCharts</title>
 </head>
 <body bgcolor="#ffffff">
 <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >
 <param name="movie" value="../Charts/FCF_Column3D.swf" />
 <param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">
 <param name="quality" value="high" />
 <embed src="../Charts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
 </object>
</body>
</html>

Dengan langkah yang sama, simpan source code diatas dengan ekstensi *.html (Misalnya : Coba.html). Simpan kedua file tersebut (data.xml dan coba.html) pada sebuah directory atau folder baru. Kemudian buka di browser kesayangan anda, sehingga kurang lebih tampilannya akan seperti berikut ini :

Gambar 1. First Chart Using Fusionchart.

Tampilan grafik ini masih belum menggunakan teknik AJAX, hanya sebatas menampilkan data ke grafik dengan sumber data yang ada di file data.xml tadi. Bagi kawan yang ingin memodifikasi source code diatas silahkan download di alamat ini. Sama aja sih dengan source code di atas, siapa tau lg males ngetik, tinggal download, ekstrak, dan dapat langsung dilihat hasilnya pada browser.

Sekian tulisan pada bagian kedua ini (lho, kok cuma sedikit sih???) iya, dikit-dikit aja… lama-lama ntar kan jadi bukit…. hehehehe…. nanti kita sambung lagi di tulisan bagian ketiga (part 3). Terima kasih telah meluangkan waktu untuk membaca tulisan ini, semoga berkenan di hati para pembaca yang budiman dan semoga bermanfaat juga bagi kawan-kawan yang membutuhkan……..MERDEKA!!!!!!

 

(Bersambung…..)

Episode Selanjutnya :

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


Regards

 

 

 

Soerabaja, 27 Nov 2010

 

Refference :


Actions

Information

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: