Membuat Grafik 3D dengan jQuery

Jika teman-teman mempunyai kesulitan untuk membuat sebuah grafik dengan menggunakan PHP, kalian dapat mencoba cara lain dengan menggunakan jQuery. Salah satu plugin jQuery yang dapat membantu kita untuk membuat sebuah grafik yaitu Plugin Fusion Chart. Dengan plugin tersebut kita hanya perlu membuat sebuah tabel yang berisi data-data yang akan dibuat grafiknya, kemudian Fusion Chart akan langsung meng-generate tabel tersebut menjadi sebuah grafik.

Cara penggunaan Plugin Fusion Chart dapat dilihat pada script berikut.


Perhatikan pada kode script jQuery-nya.
$('#myHTMLTable').convertToFusionCharts({
swfPath: "Charts/",
type: "MSColumn3D",
data: "#myHTMLTable",
dataFormat: "HTMLTable",
});

Di situ terdapat 4 buah parameter, yaitu:
  1. swfPath, merupakan lokasi URL file swf diletakkan.
  2. type, merupakan jenis grafik yang digunakan. Di contoh ini kita menggunakan grafik kolom 3D.
  3. data, merupakan id tabel yang akan di-generate menjadi grafik.
  4. dataFormat, merupakan jenis data yang digunakan. Di contoh ini karena kita menggunakan data dari tabel, maka dataFormat-nya berupa HTMLTable.

Gimana teman menurut kalian? Kalau ada yang kurang jelas silakan kunjungi situsnya di http://www.fusioncharts.com/jquery/. Di situ juga menyediakan dokumentasi yang cukup lengkap lho tentang Plugin Fusion Chart.

Semoga bermanfaat.
 


26 Comment:

Longfield said...

hmm mantabh ini bang.. thx infonya

Den said...

gimana kalau tabelnya dinamis, alias menggunakan database. Saya pernah coba, tapi gak muncul chartnya.???

Ahmad Fikry said...

Sudah pernah saya coba bisa kok sob, caranya tinggal ganti saja angka2nya dengan variabel PHP yang nilainya berasal dari database.

Seumpama masih belum jelas, silakan bisa kirim contoh coding+database nya ke email saya. Insyaalah nanti akan saya bantu.

nLs said...

iy, pakai database bisa, lalu panggil data nya lewat PHP. tp, klo saya mau tablenya ga muncul bisa ga? jd yg muncul hanya grafiknya aja.
thx

Anonymous said...

kalau nampilin grafik yang isi nya kita select dari combo gimanan gan, misalnya nampilin grafik pertahun,

gimana tu..?
bantuin gan..?
hee david.reflexs@gmail.com

Anonymous said...

Saya juga pake cara ini gan..:)
tp saya pingin menghilangkan 2 angka di belakang koma.
ktanya bisa pke atribut decimal precision di set 0.,
tapi saya bingung menempatkan-y dimana klo pke cara ini..
Mohon pencerahannya yah...
mkasih sebelum-y..:)

Ahmad Fikry said...

nLs:
Bisa diakali pakai CSS.. Kalo pakai contoh diatas, id tablenya adalah myHTMLTable, maka kode CSSnya seperti ini:

#myHTMLTable{ display: none; }

choyruel said...

thanks for sharing .... bermanfaaat gan ...

Anonymous said...

Kalo grafik pie ada modelnya nga? tks

-___- said...

kenapa flash.??

admin said...

mas kalo ukuran grafiknya bisa diatur ga ya>?

heru said...

saya pake fusion chart tapi menu drop down nya malah gak muncul kenapa ia. . .

elfridatse2 said...

wah, makasih banget mas tutorialnya, sangat membantu sekali dalam pembuatan skripsi saya, salam kenal. :D

Anonymous said...

kalo nilai 3000 menjadi 3,00K, gimana kalo untuk merubah angka sesuai data, dan menghilangkan decimal juga ya.. thx

Ahmad Fikry said...

admin: bisa, caranya dengan menambahkan parameter width, contoh: width: "600".

heru: menu drop-down yang mana ya?

elfridatse2: sama-sama.. terimaksih juga sudah mau berkunjung. Salam kenal :))

Anonymous said...

Gan gimana kalo untuk merubah angka sesuai data??
ex: 382822 // data aslinya
menjadi 382,82k

yoyox said...

pertanyaan yang sama, jika nilai 1000 kom menjadi 1k ya? gimana caranya biar angka 1000 tetep menjadi 1000 bukan 1k?? mohon pencerahan dari agan2 semua.. :D

Rendy said...

Gan Kalo di Codeigniter gmana gan.. Saya coba kok file .swf nya ga mau keload ya.. Padahal directori swfnya uda bener.. Mohon pencerahannya.. Trims..

Rendy said...

Uda Bisa ga... Keep Share.. Suwun... :D

history number said...

makasi ya om untuk infonya

great..

check your number in http://historynumber.com

Anonymous said...

saya coba kok ngga muncul grafiknya ya, padahal saya sudah download filenya yg Folder Charts sama Folder JS..

atau ada yg kurangnya,, cuma muncul judul sama Tabel nya aja, grafik nya ngga muncul...

Mohon penjelasannya..

belajar said...

mantap nih ilmu php nya, makasih infonya mas bro?

Fajri Jauhari said...

thank's for your information...

visit me...
http://pcomtricks.blogspot.com

Famili Motor said...

gan mau tanya, ane dah buat grafik dengan jquery tapi kok pas ane hosting gak muncul ya gan grafiknya, tapi kalo lacal mau. ada yang bisa bantu gk. makasih sebelumnya

Nico Manggala said...

gan, kalau penambahan number suffix, gimana caranya ?

muhamad amin said...

mas cara pakenya gmn yaaahh kalo ga ada file jsnya yaah ?

Post a Comment