Membuat Grafik Fusioncharts 3D dari HTMLTable

Menampilkan data dalam bentuk grafik dapat mempermudah orang untuk menganalisa data tersebut. Dibanding dengan menampilkan data dalam bentuk tabel yang hanya berisi angka-angka saja. Apalagi jika grafik yang ditampilkan disertai animasi. Orang akan lebih terpana terlepas dia paham atau tidak.

Kali ini kita akan membahas cara menampilkan grafik dari tabel data horisontal menggunakan Fusioncharts Jquery. Tentu saja kita harus menyiapkan dahulu file-file pendukung dari fusioncharts ini. Diantaranya file jquery (versi 1.4 ke atas dianjurkan), jquery.fusioncharts.js, dan file-file swf untuk masing-masing tipe grafik yang diletakkan dalam folder typecharts.

Kemudian buat file html dan panggil file js-nya.

Buat tabel horisintal dengan id tertentu misalnya tabelku

Load data tabel dengan script berikut :

 

Atribut Keterangan
swfPath  direktori/foleder dimana file swf diletakkan
type  tipe grafik yang diinginkan (MSBar2D,MSColumn3D,Pie3D,dll)
data  id table sumber data (#tabelku)
dataFormat  jenis pengambilan data (JSON, XML,HTMLTable )
width  lebar grafik

 

Maka akan tampil grafik 3D seperti berikut :

statistik-web

File Download