Friday, December 2, 2011

Membuat Grafik Chart dengan PHP dan JQuery

Ok,. kali ini mau share nie cara bikin grafik chart dengan PHP dan Jquery. JQUERY merupakan sebuah framework yang menyediakan fungsi-fungsi supaya web yang dibuat lebih interaktif dan dinamis. Untuk mempelajari lebih jauh silahkan kunjungi : JQUERY.COM
Hal pertama kita download dulu file jquery dan file jquery.fusioncharts selanjutnya taroh di folder dimana halaman file php nanti akan di buat.

[$] Hal pertama kita harus mereferensi halapan web kita ke file jquery dan file fusionchart seperti di bawah ini :

< script type="text/javascript" src="JS/jquery-1.4.js"> < / script >
< script type="text/javascript" src="JS/jquery.fusioncharts.js"> < / script >

[$]kemudian kita membuat kode java scriptnya :

< script type="text/javascript">
 $('#myHTMLTable').convertToFusionCharts({
  swfPath: "Charts/",
  type: "MSColumn3D",
  data: "#myHTMLTable",
  dataFormat: "HTMLTable"
 });
 < / script >

[$] selanjutnya kita membuat table data yang ananti akan di akses oleh script javascript:
 
< table id="myHTMLTable" border ='1'>< tr > < td >Kode< / td >< td >Nilai< / td > < / tr >
< tr > < td >A< / td >< td >10< / td > 
< tr > < td >B< / td >< td >20< / td > 
< tr > < td >C< / td >< td >10< / td > 
< tr > < td >D< / td >< td >50< / td > 
< tr > < td >E< / td >< td >40< / td > 
< / table >

KodeNilai
A10
B20
C10
D50
E40
[$] beri nama table tersebut -> id="myHTMLTable", nama table tersebut yang nanti akan di akses oleh script javascriptnya.
[$] kita bisa saja membuat table dari hasil Query database.

Tampilan dari Grafik yang akan di hasilkan dapat dilihat di bawah ini, selamat mencoba.

1 comment: