Kemarin dapat PM dari salah seorang teman yang mau minta tutorial membuat grafik pada web.
Dulunya mungkin hal ini sangat susah tapi dengan pengembangan code dari para developer akhirnya sekarang sudah banyak script yang tersedia untuk membuat grafik tersebut
untuk membuat grafik pada web kita dapat berpatokan pada database atau tabel yang di buat secara manual, seperti halnya pada microsoft office. nah berikut ini adalah cara membuat grafik dengan berpatokan pada tabel data. silahkan menyimak :
sebelumnya download dulu file javascript pendukung pada link di bawah ini.
file yang kita akan perlukan adalah (jquery-1.4.js dan jquery.fusioncharts.js)
| http://www.ziddu.com/download/15185892/javascriptgrafik.zip.html |
setelah itu kita akan membuat sebuah file grafik.html yang berisi tentang script untuk menampilkan grafik yang akan kita buat. berikut ini adalah penampakannya
grafik.html
<html>
<head>
<script type="text/javascript" src="JS/jquery-1.4.js"></script>
<script type="text/javascript" src="JS/jquery.fusioncharts.js"></script>
</head>
<body>
<center>
<table id="myHTMLTable" border="1" align="center">
<tr> <th>Produk List</th> <th>2009</th> <th>2010</th> <th>2011</th> </tr>
<tr> <td>Produk 1</td> <td>23</td> <td>34</td> <td>45</td> </tr>
<tr> <td>Produk 2</td> <td>25</td> <td>39</td> <td>60</td> </tr>
</table>
<script type="text/javascript">
$('#myHTMLTable').convertToFusionCharts({
swfPath: "Charts/",
type: "MSColumn3D",
data: "#myHTMLTable",
dataFormat: "HTMLTable"
});
</script>
</center>
</body>
</html>
hasilnya seperti ini
semoga bermanfaat :)
Posted in: 
Tidak ada komentar:
Posting Komentar