Thursday, November 24, 2011

Aplikasi Chart & Grafik Menggunakan "Fusionchart"


Aplikasi Fusionchart merupakan aplikasi berbasis flash dan html 5, dimana kita bisa menggunakan satu xlm sebagai input nya, yang nantinya aplikasi Fusionchart nya yang akan mengenerate chart/grafik yang akan kita buat.
penggunaan Fusionchart secara static

Beberapa hari terakhir saya mencoba membuat aplikasi yang membantu saya tentunya dalam pengecekan trafik harian detikcom. Dalam hal ini saya akan menggunakan tipe "Multi-series Line 2D Chart". Detikcom memiliki banyak subkanal, untuk itu saya butuh chart yang bisa dinamis yang secara otomatis untuk setiap subkanalnya. Untuk itu saya membuat aplikasi dengan gambaran umum seperti dibawah ini.
penggunaan Fusionchart secara dinamis

Dengan menggunakan php saya melakukan looping untuk mengambil data dari log anlyzer dengan menggunakan API nya, dan dari php saya menulis xml sesuai format yang diminta fusionchart, namun karena nantinya hasil xml nya akan banyak, maka saya menamai setiap file xml nya dengan urut (ex: 1.xml, 2.xml, 3.xml, etc), contoh file xml yang saya gunakan ada disini. Namun agar index.html nya dapat me-load file xml nya secara bergantian maka saya menggunakan bash script dan meta refesh.

Untuk otomatis referesh saya cuma menambahkan line berikut sebelum tag <html>
<META HTTP-EQUIV="REFRESH" CONTENT="60"> *dimana 60 dalam hitungan detik. Sehingga file indexnya menjadi seperti dibawah ini.
tampilan html page

Sedangkan untuk manipulasi string nya, saya menggunakan bash script dibawah ini.
bash script untuk manipulasi string di htlm page

dan hasilnya adalah sebagai berikut
contoh grafik dari fusionchart

semoga bermanfaat :)

No comments:

Post a Comment