membuat report graphic dengan mengunakan zingcharts…

zingchart adalah sebuah library dimana kita dapat mengunakannya untuk membuat laporan. Dengan memanfaatkan zingchart kita dapat membuat pie chart, line chart , dan bahkan gauges. selain difungsikan untuk membuat laporan kita dapat memanfaatkanya untuk membuat sebuah dashboard sebuah aplikasi, misalnya NMS ataupun aplikasi keuangan. zingchart sendiri mengunakan html 5. ya teknologi baru dari html. oke langsung saja ke object yg diamati.

langkah-langkah
1. download zingchart di situsnya http://www.zingchart.com/
2. ektract semua file.
3. kemudian buatlah hellozing.php


<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/md5-min.js"></script>
<script type="text/javascript" src="js/zingchart-html5beta-min.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function() {
	zingchart.render({
		id 			: 'zingchart',
		output		: 'canvas',
		width 		: 800,
		height 		: 400,
		dataurl 	: 'coba.php'
	});
});
// ]]></script>

 

4. membuat isi dari chart coba.php file isi ini memanggil data dari database dengan values seperti (3.01,1.01,..) anda dapat membuatnya sendiri.

{
  "graphset" : [
  {
    "type" : "area",
    "series" : [
     {
        "values" : [
<!--?php 	include('Config.php'); 	$values = "select rtt_delay from hasilping limit 10"; 	$result = pg_query($values); 	while($row = pg_fetch_array($result)) 		{ 		$rtime  = $row["rtt_delay"]; 		$rtime .= ","; 		echo $rtime;  		} ?-->
]
     }]
  }]
}

5. kemudian jalankan maka akan menghasilkan.

 

nah sekian sediikit celoteh saya, ya walaupun pasti anda tidak mudeng ,silahkan bertanya..:D

info : zingchart mengunakan json.

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