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.
<html>
<head>
<!-- Memanggil file jQuery dan jQuery fusionCharts -->
<script type="text/javascript" src="JS/jquery-1.4.js"></script>
<script type="text/javascript" src="JS/jquery.fusioncharts.js"></script>
</head>
<body>
<!-- Tabel dengan id "myHTMLTable"-->
<table id="myHTMLTable" border="1" align="center">
<tr> <th>Status</th> <th>Januari</th> <th>Februari</th> <th>Maret</th> </tr>
<tr> <td>Masuk</td> <td>40</td> <td>39</td> <td>40</td> </tr>
<tr> <td>ijin</td> <td>3</td> <td>1</td> <td>2</td> </tr>
<tr> <td>Alpha</td> <td>1</td> <td>2</td> <td>3</td> </tr>
<tr> <td>Sakit</td> <td>3</td> <td>5</td> <td>4</td> </tr>
<tr> <td>Cuti</td> <td>3</td> <td>3</td> <td>1</td> </tr>
</table>
<!-- Script jQuery untuk meng-generate tabel menjadi grafik-->
<script type="text/javascript">
$('#myHTMLTable').convertToFusionCharts({
swfPath: "Charts/",
type: "MSColumn3D",
data: "#myHTMLTable",
dataFormat: "HTMLTable",
});
</script>
</center>
</body>
</html>
<head>
<!-- Memanggil file jQuery dan jQuery fusionCharts -->
<script type="text/javascript" src="JS/jquery-1.4.js"></script>
<script type="text/javascript" src="JS/jquery.fusioncharts.js"></script>
</head>
<body>
<!-- Tabel dengan id "myHTMLTable"-->
<table id="myHTMLTable" border="1" align="center">
<tr> <th>Status</th> <th>Januari</th> <th>Februari</th> <th>Maret</th> </tr>
<tr> <td>Masuk</td> <td>40</td> <td>39</td> <td>40</td> </tr>
<tr> <td>ijin</td> <td>3</td> <td>1</td> <td>2</td> </tr>
<tr> <td>Alpha</td> <td>1</td> <td>2</td> <td>3</td> </tr>
<tr> <td>Sakit</td> <td>3</td> <td>5</td> <td>4</td> </tr>
<tr> <td>Cuti</td> <td>3</td> <td>3</td> <td>1</td> </tr>
</table>
<!-- Script jQuery untuk meng-generate tabel menjadi grafik-->
<script type="text/javascript">
$('#myHTMLTable').convertToFusionCharts({
swfPath: "Charts/",
type: "MSColumn3D",
data: "#myHTMLTable",
dataFormat: "HTMLTable",
});
</script>
</center>
</body>
</html>
Perhatikan pada kode script jQuery-nya.
$('#myHTMLTable').convertToFusionCharts({swfPath: "Charts/",type: "MSColumn3D",data: "#myHTMLTable",dataFormat: "HTMLTable",});
Di situ terdapat 4 buah parameter, yaitu:
- swfPath, merupakan lokasi URL file swf diletakkan.
- type, merupakan jenis grafik yang digunakan. Di contoh ini kita menggunakan grafik kolom 3D.
- data, merupakan id tabel yang akan di-generate menjadi grafik.
- 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.
Tidak ada komentar:
Posting Komentar