Membuat Grafik Dinamis dengan HighCharts


Jika anda akan menampilkan data berupa diagram didalam web anda, ada baiknya anda mencoba HighCharts situs resminya http://www.highcharts.com silahkan anda download demonya. namun masalahnya, data yang ditampilkan adalah statis tidak dinamis (diambil dari database). oleh karena itu saya membuat tutorial ini agar data yang ditampilkan pada diagram merupakan data yang diambil dari database.

Langkah-langkah dalam HighCharts :

  1. Tambahkan inklusi ini JavaScript di bagian kepala halaman Anda

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”highcharts.js”></script>

2. Tambahkan JavaScript untuk menginisialisasi tabel pada dokumen siap

<script type=”text/javascript”>
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: ‘container’,
defaultSeriesType: ‘column’
},
title: {
text: ‘Diagram Statistik “Demo Aplikasi Web LabHouse”‘
},
xAxis: {
categories: [<?php echo $aray; ?>]
},
yAxis: {
title: {
text: ‘Jumlah’
}
},

3. Tambahkan kontainer

<div id=”container” style=”width: 800px; height: 400px; margin: 0 auto”></div>

Silahkan lihat langsung ke coding nya yang ada di file index.php

SOURCE :

http://www.4shared.com/file/T2hQKc0K/diagram_dinamis.html

PENTING :

Berhubung datanya diambil dari sebuah database, maka kita mendefinisikan sebuah array pada coding

$string_query=”select * from stat limit 0,$limit”;
$query=mysql_query($string_query);
$jumlah_limit=mysql_num_rows($limit);

$query_array=mysql_query($string_query);
$menu = array();

while($row=mysql_fetch_assoc($query_array)){
$menu[] = $row['menu'];
}

$aray=”‘”.join(“‘,'”,$menu).”‘”;

karena variabel $aray tersebut akan di pakai untuk menampilkan kategorinya

chart: {
renderTo: ‘container’,
defaultSeriesType: ‘column’
},
title: {
text: ‘Diagram Statistik “Demo Aplikasi Web LabHouse”‘
},
xAxis: {
categories: [<?php echo $aray; ?>]
},
yAxis: {
title: {
text: ‘Jumlah’
}
},

sedangkan datanya di ambil dari table yang sudah terbentuk

<tbody>
<?
while($row=mysql_fetch_array($query)){

?>
<tr>
<th><div align=”left”><? echo $row['menu'];?></div></th>
<td><? echo $row['view'];?></td>
<td><? echo $row['bad'];?></td>
<td><? echo $row['good'];?></td>

</tr>
<?
}
?>
</tbody>

Referensi Buku :

Ok, sekian tutorial dari saya selamat mencoba, dan mohon maaf jika ada yang kurang jelas. semoga artikel ini bermanfaat untuk anda :)

Depok, 18 mei 2010

noname

About these ads

6 Responses

  1. trima kasih infonya ya :)
    blogwalking ^^

  2. cara mendownload java skript dari higchartnya gimana ya? kalo pengen jadi bar bisa pak?
    terus cara mampilkan angkanya secara desimal gimana ya?

    terima kasih :)

  3. Gus, boleh nanya gus, di gw kok ngga bisa ya??

    padahal gw dah nyoba pake listing yang dari lu…

    mohon bantuannya ya…

  4. REVISI :

    http://ri32.wordpress.com/2011/02/06/membuat-diagram-chart-statistik-dengan-javascript/

  5. Semoga ri32 slalu sukses n amal ibadahnya dterima disisi Allah SWT.

  6. gan di print preview tampil gak grafiknya…….????

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

Follow

Get every new post delivered to your Inbox.

Join 537 other followers

%d bloggers like this: