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

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

Depok, 06-02-2011

noname

Advertisements

14 Responses

  1. Nice share gan

    Like

  2. bro,klo chart balok nya di ubah menjadi linechart coding nya gmn tuh,, mohon pencerahan:)

    Like

  3. keren hehee…o iya bro gw ada yg tau statistik pengunjung web berdasarkan web menggunakan php sederhana ngk..?? ..

    Like

  4. like this lah pak 🙂

    Like

  5. wah mantap. grafik nya,

    kalau cara untuk menjadikan view good bad nya jadi xAxis.
    dan login, input kalender, forum, kirim email di jadikan category untuk line chart nya.

    soalnya gini untuk view good bad mau dijadikan sebagai tanggal atau nama bulan atau tahun. dan login, input kalender dan lainnya mau dijaikan nama barang.

    terima kasih.

    Like

  6. untuk mengganti angka pada units gmana ya??mohon infonya…

    Like

  7. untuk mengganti angka sebelah kiri (jumlah) gmana ya??mohon infonya…

    Like

  8. bisa ga warna bar nya kita rubah…. dan dimana merubahnya.

    soalnya saya cari2 di highchart.src.js pun ga ketemu. thx

    Like

    • Kata kunci google : change color bar highchart

      http://stackoverflow.com/questions/10755236/highcharts-change-bar-color-based-on-value

      Like

    • ok mas makasih banget, sudah saya implementasikan dan berubah warna seperti keinginan, makasih sangat

      Like

  9. yang pake jsp nya ada gak bos ?

    Like

  10. mas kalo membuat bagan pertandingan kayak piala dunia itu gimana ya caranya.. ada yang tau nggak mohon pencerahannya..???
    terima kasih

    Like

    • ada contohnya di internet mas?

      Like

    • silahkan kirim email ke agus_sumarna@ri32.com

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: