Membuat Grafik Fusioncharts 3D dari HTMLTable

Menampilkan data dalam bentuk grafik dapat mempermudah orang untuk menganalisa data tersebut. Dibanding dengan menampilkan data dalam bentuk tabel yang hanya berisi angka-angka saja. Apalagi jika grafik yang ditampilkan disertai animasi. Orang akan lebih terpana terlepas dia paham atau tidak.

Kali ini kita akan membahas cara menampilkan grafik dari tabel data horisontal menggunakan Fusioncharts Jquery. Tentu saja kita harus menyiapkan dahulu file-file pendukung dari fusioncharts ini. Diantaranya file jquery (versi 1.4 ke atas dianjurkan), jquery.fusioncharts.js, dan file-file swf untuk masing-masing tipe grafik yang diletakkan dalam folder typecharts.

Kemudian buat file html dan panggil file js-nya.

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

Buat tabel horisintal dengan id tertentu misalnya tabelku

<table id='tabelku'>
<tr><th>Tanggal</th><th>2012-10-24</th><th>2012-10-25</th><th>2012-10-26</th><th>2012-10-27</th><th>2012-10-28</th><th>2012-10-29</th><th>2012-10-30</th></tr>
<tr><td>Visitor</td><td>109</td><td>76</td><td>51</td><td>63</td><td>89</td><td>126</td><td>8</td></tr>
<tr><td>Pageview</td><td>266</td><td>245</td><td>121</td><td>173</td><td>267</td><td>246</td><td>41</td></tr>
</table>

Load data tabel dengan script berikut :

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

Maka akan tampil grafik 3D seperti berikut :

File Download