Membuat Grafik dengan FusionCharts Menggunakan Php
dan Mysql
Bayu Lesmana Putra
[email protected]
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:
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
<?phpmysql_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()."' >";
$data2= "<dataset seriesName='2002' color='".getFCColor()."' >";
$data3= "<dataset seriesName='2003' color='".getFCColor()."' >";
$data4= "<dataset seriesName='2004' color='".getFCColor()."' >";
$sql="SELECT * FROM grafik "; $qr=mysql_query($sql); while($Data=mysql_fetch_array($qr)){
$arrData[0][1]="$Data[nama_produk]";
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] ."' />";
$data2.= "<set value='".$arSubData[4] ."' />";
$data3.= "<set value='".$arSubData[5] ."' />";
$data4.= "<set value='".$arSubData[6] ."' />";
} } $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";
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]"); }
