PDA

View Full Version : Charts with Dreamweaver Recordset



higorvaz
14 Jul 2009, 1:49 PM
Hi people, Im new with ExtJs and loving it, of course!!!
Im learning a lot the last 24hs, and made some changes at Charts ExtJs 3.0 Example:

Changed charts.js to charts.php.
With Dreamweaver gererated a Recordset GrafsSimple from a Mysql that stores the data below and made some changes to charts.php, echoing the js:

<?php require_once('../../Connections/ExtJsConn.php');
mysql_select_db($database_ExtJsConn, $ExtJsConn);
$query_GrafsSimple = "SELECT * FROM charts ORDER BY id ASC";
$GrafsSimple = mysql_query($query_GrafsSimple, $ExtJsConn) or die(mysql_error());
$row_GrafsSimple = mysql_fetch_assoc($GrafsSimple);
$totalRows_GrafsSimple = mysql_num_rows($GrafsSimple);
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
echo "
<script>
Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';

Ext.onReady(function(){

var store = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [";
do { ?>
<?php echo "{name:'".$row_GrafsSimple['name']."', "; ?>
<?php echo "visits: ".$row_GrafsSimple['visits'].", "; ?>
<?php echo "views: ".$row_GrafsSimple['views']."},"; ?>
<?php } while ($row_GrafsSimple = mysql_fetch_assoc($GrafsSimple));
echo " ]
});
// extra extra simple
new Ext.Panel({
title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
renderTo: 'container',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: store,
xField: 'name',
yField: 'visits',
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
}
}
});
// extra simple
new Ext.Panel({
iconCls:'chart',
title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',
frame:true,
renderTo: 'container',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: store,
url: '../../resources/charts.swf',
xField: 'name',
yField: 'visits',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record){
return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
}
}
});

// more complex with a custom look
new Ext.Panel({
iconCls:'chart',
title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
frame:true,
renderTo: 'container',
width:500,
height:300,
layout:'fit',

items: {
xtype: 'columnchart',
store: store,
url:'../../resources/charts.swf',
xField: 'name',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){
if(series.yField == 'visits'){
return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
}else{
return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
}
},
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: 'Page Views',
yField: 'views',
style: {
image:'bar.gif',
mode: 'stretch',
color:0x99BBE8
}
},{
type:'line',
displayName: 'Visits',
yField: 'visits',
style: {
color: 0x15428B
}
}]
}
});
});
</script>";
?>
<?php
mysql_free_result($GrafsSimple);
?>


DROP TABLE IF EXISTS `charts`;
CREATE TABLE `charts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`visits` varchar(255) DEFAULT NULL,
`views` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `charts` VALUES (1,'Jul 07','245','3000');
INSERT INTO `charts` VALUES (2,'Ago 07','300','4000');
INSERT INTO `charts` VALUES (3,'Set 07','400','5000');
INSERT INTO `charts` VALUES (4,'Out 07','1000','9000');
INSERT INTO `charts` VALUES (5,'Nov 07','600','7000');
INSERT INTO `charts` VALUES (6,'Dez 07','700','8000');
INSERT INTO `charts` VALUES (7,'Jan 08','800','9000');
INSERT INTO `charts` VALUES (8,'Fev 08','900','10000');


Now its running well, just like the standard example, but Id like to know if is there a better way to do this?? Like less coding.
Thanks from Brazil,
Higor