Membuat Grafik dengan FusionCharts Menggunakan Php dan Mysql

(1)

Membuat Grafik dengan FusionCharts Menggunakan Php

dan Mysql

Bayu Lesmana Putra

bayu.lesmana@raharja.info

Abstrak

FusionCharts merupakan sebuah komponen atau library chart yang bersifat open source

dan gratis yang dapat digunakan untuk membuat grafik data dengan animasi flash.

FusionCharts dapat digunakan dengan bahasa scripting web PHP, ASP, .NET, JSP,

ColdFusion, JavaScript, Ruby, dan lain-lain.

Penggunaan FusionCharts ini sebagai grafik data pada media web, menggunakan XML

sebagai media pembacaan data. Grafik dan animasi yang indah, sebagian besar

programmer web menggunakan library ini untuk menampilkan grafik data.

Kata Kunci: FusionCharts, PHP, Javascript

Pendahuluan

Tutorial kali ini saya membahas cara membuat grafik yang menarik dengan

menggunakan library fusionacharts (JQuery), jadi hanya membahas bagaimana

menampilkan data di database berbentuk grafik di PHP.

Dengan menggunakan PHP kita dapat membuat highchart lebih dinamis karena dapat

langsung mengakses database MySQL.

Pembahasan

Yang harus kita lakukan pertama kali adalah membuat database-nya. Pada contoh saya

kali ini saya menggunakan database 'latihan'. Kemudian dengan data table “grafik”

seperti gambar dibawah ini:

(2)

Sesudah membuat table kemudian ketiklah script program php seperti yang ada

dibawah ini dan simpan dengan nama index.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<?php

mysql_connect("localhost","root",""); mysql_select_db("latihan");

include"FusionCharts/FC_Colors.php"; include"FusionCharts/FusionCharts_Gen.php"; include"FusionCharts/FusionCharts.php";

echo"<SCRIPT LANGUAGE='Javascript' SRC='FusionCharts/ FusionCharts.js'></SCRIPT>";

$strXML="<graph caption='Grafik Penjualan' numberPrefix=

'Rp ' yAxisName='Jumlah' decimalPrecision='0' formatNumberScale='0'>";

$kategori="<categories>";

$data= "<dataset seriesName='2000' color='".getFCColor()."' >";

$data1= "<dataset seriesName='2001' color='".getFCColor()."' >";

$sql="SELECT * FROM grafik "; $qr=mysql_query($sql); while($Data=mysql_fetch_array($qr)){

$arrData[0][1]="$Data[nama_produk]";

(3)

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

$arrData[0][2]="$Data[jumlah_a]";

$arrData[0][3]="$Data[jumlah_b]";

$arrData[0][4]="$Data[jumlah_c]";

foreach($arrDataas$arSubData) {

$kategori.= "<category name='".$arSubData[1]."' />";

$data.= "<set value='".$arSubData[2] ."' />";

$data1.= "<set value='".$arSubData[3] ."' />";

} } $kategori.= "</categories>";

$data.= "</dataset>"; $data1.= "</dataset>"; $data2.= "</dataset>"; $data3.= "</dataset>"; $data4.= "</dataset>";

$strXML.= $kategori. $data. $data1. $data2. $data3. $data4;

$strXML.= "</graph>"; echorenderChart("FusionCharts/FCF_MSColumn3D.swf", "", $strXML, "productSales", 500, 300);

?>

1

2

3

4

5

6

7

8

9

10

11

12

13

\\2. Grafik Kedua >>

<?php

echo"<div style='margin-left:450px;'><SCRIPT LANGUAGE=

'Javascript' SRC='FusionCharts/<span class="skimlinks-unlinked"> FusionCharts.js'></span>>";

$FC= newFusionCharts("Column3D","500","300");

$FC->setSWFPath("FusionCharts/");

$strParam="caption=Grafik Penjualan ; subcaption=PerTahun; xAxisName=Produk & tahun ; yAxisName=Jumlah; numberPrefix=; decimalPrecision=0";

(4)

14

15

16

17

18

19

20

21

$FC->setChartParams($strParam);

$qr=mysql_query("select* from grafik"); while($data=mysql_fetch_array($qr)){ $FC->addChartData("$data[jumlah_a]","name=$data[nama_produk]"); }

$FC->renderChart(); echo"</div>";

?>

Untuk FusionChart bias didownload free diwebsite ini http://www.fusioncharts.com/

Hasil dari script dan data table diatas kira – kira seperti dibawah ini :

(5)

Penutup

Ada beberapa keuntungan menggunakan FusionCharts diantaranya sebagai berikut:

1. Animasi dan Interaktif Charts Menggunakan FusionCharts, Anda dapat dengan

cepat dan mudah membuat animasi grafik yang memiliki banyak pilihan interaktif

untuk pengguna akhir.

2. Mudah dan terintegrasi dengan JavaScript FusionCharts menawarkan pilihan

lanjutan untuk mengintegrasikan grafik dengan modul JavaScript. Anda dapat

memperbarui bagan di sisi client, memanggil fungsi JavaScript sebagai link hotspot.

3. Tidak perlu menginstall tools apapun dan sifatnya standalone Untuk menggunakan

FusionCharts, Anda tidak perlu menginstal apapun pada server Anda. Yang perlu

Anda lakukan adalah copy-paste file SWF (file inti FusionCharts) ke server Anda.

4. Mudah digunakan FusionCharts membuat diagram proses chart menggunakan XML

sebagai data, semua yang perlu Anda lakukan adalah mengkonversi data Anda ke

dalam XML menggunakan bahasa pemrograman atau bahkan menggunakan editor

teks seperti Notepad dll – dan itu semua apa yang dibutuhkan untuk membuat grafik

interaktif dan animasi. Bagian terbaik adalah Anda TIDAK perlu tahu apa-apa

tentang Flash untuk menggunakan FusionCharts.

5. Berjalan pada berbagai platform web Terlepas dari bahasa apa yang digunakan,

FusionCharts dapat digunakan untuk membuat diagram dengan baik. Sejak

FusionCharts menggunakan XML sebagai antarmuka data, Anda dapat

menjalankannya pada server apapun dan terhadap segala bahasa scripting. Juga,

untuk melihat grafik, pengguna Anda hanya perlu memiliki Adobe Flash Player 6

(atau di atas), yang merupakan salah satu plugin browser yang paling digunakan di

planet ini.

6. Mengurangi beban pada server

7. Bersifat gratis

(6)