PDA

View Full Version : need example for extjs chart



dikadibratha
4 Apr 2011, 8:47 PM
please give me some source code example for extjs chart..

steffenk
5 Apr 2011, 12:18 AM
http://www.sencha.com/products/extjs/examples/#sample-6

billel dah
11 Aug 2012, 8:42 AM
c'est un programme qui utilise la méthode MVC
chart_v.js
/** untuk menandakan bahwa script ini valid dan akan di eksekusi * */
valid_script = true;
ajax_url = 'ajax.handler.php?id=' + page;
Ext.chart.Chart.CHART_URL = 'extjs/resources/charts.swf';


var dsDate = new Ext.data.JsonStore({
url: ajax_url,
//proxy: new Ext.data.HttpProxy(conn),
autoLoad:true,
baseParams: {
task: 'getChart',
start: 0,
limit:10
},
root: 'data',
fields: [
{
name:'id'
},
{
name:'lat_zone',
type:'float'
}

],
sortInfo: {field: 'id', direction: 'DESC'},
remoteSort: true,
listeners: {
load: function(){
rDsData.refreshData();
}
}
});

var rDsData = new Ext.data.JsonStore({
fields: ['id','lat_zone'],
sortInfo: {field: 'id', direction: 'ASC'},
data : [],
refreshData: function(){
var data =[];
dsDate.each(function(r,i){
data.push({
id : r.data.id,
lat_zone : r.data.lat_zone
});

});
rDsData.loadData(data);
//setTimeout(function(){dsDate.reload();},500);
}
});

the_first = {
title:'Live Graph',
iconCls:'stat-line2',
layout:'fit',
border:false,
bbar: [{
text:'Refresh',
iconCls:'drop',
qtip:'Refresh Data',
handler:function(){
dsDate.reload();
}
}],
items: {
xtype: 'columnchart',
store: rDsData,
xField: 'id',
yAxis: new Ext.chart.NumericAxis({
displayName: 'lat_zone',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){
if(series.yField == 'data'){
return Ext.util.Format.number(record.data.id, '0,0') + ' vehicles detected in ' + record.data.lat_zone;

}
},
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
},
series: [{
type: 'column',
displayName: 'Number',
yField: 'lat_zone',
style: {
//image:'bar.gif',
//mode: 'stretch',
color:0x99BBE8
}
},{
type:'line',
displayName: 'Number',
yField: 'lat_zone',
style: {
color: 0x15428B
}
}]
}
};

the_content = {
border:true,
layout:'accordion',
activeItem:0,
items:[the_first]/*,
sync: function(){
dsDate.reload();
},
setTimeout(sync, 1000)*/

};

var main_content = {
id : id_panel,
title:n.text,
iconCls:n.attributes.iconCls,
bodyStyle:'padding:5px;',
items:[the_content]
};
chart_m.php
<?php

class chart extends msDB {
function __construct($connection) {
$this->messsage = "initialize class";
if ($connection ==true) {
$radiochecked = $this->connect();
}
}
function __destruct() {
unset($radiochecked);
}

function getChart($REQUEST){
$grid = new Grid;
$grid->setTable("zones");
$grid->addField(Array(
"field"=>"id",
"name"=>"id"
));
$grid->addField(Array(
"field"=>"lat_zone",
"name"=>"lat_zone"
));
return $grid->doRead($REQUEST);
}
}
?>
chart_c.php
<?php
$task = $_REQUEST['task']; //parameter yang dikirim oleh js
$handler->loadModel("billel_chart_zone_m"); //model di core
$chart = new chart(true);
switch($task) {
case 'getChart':
echo $chart->getChart($_REQUEST); //pake $_REQUEST juga sama aja
break;
}

?>

rbraddy
19 Aug 2012, 1:22 PM
https://www.google.com/#hl=en&newwindow=1&sclient=psy-ab&q=extjs+chart+site:jsfiddle.net&fp=598de71f36f8acad