Membuat diagram chart statistik dengan javascript (Highcharts)

Artikel ini merupakan revisi tulisan saya sebelumnya. Dalam artikel kali ini saya mencoba untuk memperbaiki program dan tulisan saya mengenai cara membuat dan menampilkan data yang ada didalam sebuah table database kedalam bentuk chart atau diagram menggunakan Highcharts. Sebelumnya saya mempunya sebuah tabel “stat” di database “test“

Tabel stat

Dalam menggunakan Highcharts, saya memilih type chart “column-parsed” untuk menampilkan data dalam bentuk diagram.

Sedangkan untuk menampilkan datanya,  Highcharts membuat sebuah table “virtual” untuk membaca datanya dan menampilkannya kedalam bentuk diagram. potongan skripnya sebagai berikut  :

<?php
include “conn.php”;
$query=mysql_query(“select * from stat order by view desc limit 0,5″);
?>
<p>&nbsp;</p>
<table id=”datatable” width=”61%” align=”center”>
<thead>
<tr>
<th width=”28%”>Menu Demo Labhouse</th>
<th width=”24%”>View</th>
<th width=”24%”>Good</th>
<th width=”24%”>Bad</th>
</tr>
</thead>
<tbody>
<?php
while($row=mysql_fetch_array($query)){
?>
<tr>
<th><div align=”left”><?php echo $row['menu'];?></div></th>
<td><?php echo $row['view'];?></td>
<td><?php echo $row['good'];?></td>
<td><?php echo $row['bad'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>

Program revisi ini lebih simple dibandingkan dengan artikel saya belumnya. karena Highcharts otomatis akan membaca tabel virtual tadi, dan mengenerate nya kedalam bentuk diagram. kita tidak usah menentukan colom ataupun array sebagaimana pada tulisan saya sebelumnya.

Download Source

http://www.4shared.com/file/bDuYRQTJ/diagram-ri32.html

Download Sample Highcharts

http://www.4shared.com/file/KYIcjPbl/Highcharts-ri32.html

Demo Program

http://labhouse.co.cc

 

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua

 

Depok, 06-02-2011

 

noname