Now it’s time for us to learn how to create chart which has store data from database. In my previous article, we’ve already tried how to create chart from static data. In a ‘real’ application, chart data load from database. To the point,
First, we’ll create table,extjs_visits_stats, in our database.
CREATE TABLE IF NOT EXISTS `extjs_visits_stats` ( `name` varchar(100) NOT NULL, `visits` int(11) NOT NULL, `views` int(11) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
then insert data :
INSERT INTO `extjs_visits_stats` (`name`, `visits`, `views`) VALUES
('Jul 07', 245000, 3000000),
('Aug 07', 240000, 3500000),
('Sep 07', 355000, 4000000),
('Oct 07', 375000, 4200000),
('Nov 07', 490000, 4500000),
('Dec 07', 495000, 5800000),
('Jan 08', 520000, 6000000),
('Feb 08', 620000, 7500000);
In this case i’ve created new subdirectory, named dynamic-chart under koharudin.com directory. You can see hierarchy file as described below :
There are 5 files under dynamic-chart directory:
- Index.php : View Html
- DbConn.php : Database Configuration
- Chart-act.php : Controller
- charts.js : Chart Configuration
- data.sql : SQL data
Index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Charts</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../../ext-all.js"></script>
<script type="text/javascript" src="charts.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../../shared/examples.css" />
<style type="text/css">
#container {
padding:10px;
}
#container .x-panel {
margin:10px;
}
#container .x-panel-ml {
padding-left:1px;
}
#container .x-panel-mr {
padding-right:1px;
}
#container .x-panel-bl {
padding-left:2px;
}
#container .x-panel-br {
padding-right:2px;
}
#container .x-panel-body {
}
#container .x-panel-mc {
padding-top:0;
}
#container .x-panel-bc .x-panel-footer {
padding-bottom:2px;
}
#container .x-panel-nofooter .x-panel-bc {
height:2px;
}
#container .x-toolbar {
border:1px solid #99BBE8;
border-width: 0 0 1px 0;
}
.chart {
background-image: url(chart.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript" src="../../shared/examples.js"></script><!-- EXAMPLES -->
<h1>Charts</h1>
<p>The js is not minified so it is readable. See <a href="charts.js">charts.js</a>.</p>
<div id="container">
</div>
</body>
</html>
DbConn.php
<?php
$MYSQL_SERVER = 'localhost';
$MYSQL_PORT = '3306';
$MYSQL_DB = 'extjs-example';
$MYSQL_USER = 'root';
$MYSQL_PASS = '';
?>
Chart-Act.php
<?php
include_once("DbConn.php");
$query = mysql_connect($MYSQL_SERVER,$MYSQL_USER,$MYSQL_PASS);
$select_db = mysql_select_db($MYSQL_DB);
$rs = mysql_query("select name,visits,views from extjs_visits_stats");
$data = array();
while($row=mysql_fetch_assoc($rs)){
$data[] = $row;
}
echo json_encode(array('data' => $data)) ;
?>
Charts.js
/*!
* Ext JS Library 3.1.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.chart.Chart.CHART_URL = '../../../resources/charts.swf';
Ext.onReady(function(){
var store= new Ext.data.Store({
autoLoad:true,
proxy: new Ext.data.HttpProxy({
url: 'chart-act.php'
}),
reader: new Ext.data.JsonReader({
root: 'data'
}, [
{name: 'name'},
{name: 'visits',type: 'int'},
{name: 'views',type: 'int'}
]),
listeners:{
load: function(){
}
}
});
// 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
}
}]
}
});
});
Links : Demo,Source Code.
Dynamic Load Chart Extjs from PHP,Mysql is posted on January 31st, 2010 by admin. This post is filed under: Extjs, captcha, Extjs, login, MySQL, PHP, tutorial .
And here is the related entries of this post:
- Static Chart Extjs 3.1 – LineChart
- Getting Started (Extjs : Part 2)
- How to select the nth-child in jQuery?
- Embed Captcha into Login Form Extjs ?
- What is Extjs ? (Part 1)
Incoming search terms for the article:
- extjs php mysql
- Ext util Format numberRenderer
- extjs 3 1 charts
- extjs chart colors
- tipRenderer extjs
- chart php extjs
- extjs create bar chart php example
- extjs 3 1 upload sample demo application
- php extjs application
- extjs sample
- extjs charts example
- extjs chart php
- extjs charts
- php mysql dynamic chart demo
- extjs load pie chart with dynamic data
Mas kohar ini orang indonesia ya ? BHS inggris nya kok kacau gitu ?
ThenkYU… Males… cari sana sini sample.. disini,, lumayan membantu.. !! Tambahin lagi tutorialNya Bos!!
Thanks for your visit and comment, any questions just write on request page