[trick] Membuat grafik dengan php extjs

Bismillah …

kali ini kita coba membuat aplikasi grafik dengan php extjs

siapkan database :

databases

2.chart.html

<html>
<head>
<title>Chart</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="chart.js"> </script>
<style type="text/css">
 body {
  padding:10px;
 }
</style>
</head>
<body>
</body>
</html>

2. chart.php

<?php

 $host ="localhost";
 $user ="root";
 $pass = "";
 $db = "hp";
 $table ="penjualan";

 $con = @mysql_connect($host,$user,$pass) or die("tidak bisa terkoneksi ke Mysql");
 mysql_select_db($db,$con) or die("tidak bisa memilih database test");

 $sql = "select bulan_angka as bulan, sum(total_penjualan) as total1 from $table";
 $sql .= " group by bulan_angka ";
 $rs = mysql_query($sql) or die(mysql_error($con));
 $data = array();
 while ($row = mysql_fetch_object($rs)){
  $data[] = $row;
 }

 $result = new stdClass();
 $result->success= true;
 $result->data = $data;
 echo json_encode($result);

?>

3. chart.js


Ext.chart.Chart.CHART_URL = 'extjs/resources/charts.swf';

Ext.onReady(function(){
Ext.QuickTips.init(); //mengaktifkan QuickTips
var store = new Ext.data.JsonStore({
url:'chart.php',
root:'data',
autoLoad:true,
fields: [
{
name:'bulan'
},{
name:'total1'
}
],
listeners:{
load: function(){
cstore.refreshData();
}
}
});

var cstore = new Ext.data.JsonStore({
fields: ['bulan', 'total1'],
data: [],
refreshData: function(){
var data =[];
for(i=0;i<12;i++){
total1 =0;
found = store.findExact('bulan',String(i));
if (found != -1)
total1 = Math.floor(store.getAt(found).data.total1);
data.push({
bulan: Date.monthNames[i],
total1:total1
});
}
cstore.loadData(data);
}
});

new Ext.Panel({
width: 600,
height: 400,
renderTo: document.body,
title: 'Grafik Batang',
tbar: [
{
text:'Refresh Data',
handler:function(){
store.reload();
}
}
],
items: {
xtype: 'columnchart',
store: cstore,
yField: 'total1',
url: 'extjs/resources/charts.swf',
xField: 'bulan',
xAxis: new Ext.chart.CategoryAxis({
title: 'Bulan'
}),
yAxis: new Ext.chart.NumericAxis({
title: 'Penjualan'
}),
extraStyle: {
xAxis: {
labelRotation: -90
}
}
}
});
});

untuk hasil kira-kira seperti ini :

hasil

untuk download extjsnya, saya sudah sisipkan pada kodingan sebelumnya.

download  code

Leave a comment

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: