In this post, i’ll explain how to display static chart using new feature chart in Extjs 3.1. Basically, this example is already in extjs example. Supposed you already have Extjs Library, goto Extjs lib directory and find “examples” subdirectory. In this case, i’ll create subdirectory in Examples directory, named “koharudin.com” then create new subdirectory named “static-chart” then add 2 files : index.php and chart.js
The file hierarchy descrbibed as image below :
Extjs Root Directory
- Create index.php then write as follows :
- Then, create charts.js and write as follows :
- Finish.
<!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>
/*!
* 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.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'Jul 07', visits: 245000, views: 3000000},
{name:'Aug 07', visits: 240000, views: 3500000},
{name:'Sep 07', visits: 355000, views: 4000000},
{name:'Oct 07', visits: 375000, views: 4200000},
{name:'Nov 07', visits: 490000, views: 4500000},
{name:'Dec 07', visits: 495000, views: 5800000},
{name:'Jan 08', visits: 520000, views: 6000000},
{name:'Feb 08', visits: 620000, views: 7500000}
]
});
// 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
}
}]
}
});
});
Visit this links : Demo, Source Code.
Static Chart Extjs 3.1 – LineChart is posted on January 30th, 2010 by admin. This post is filed under: Extjs, chart, Database, Extjs, MySQL, PHP, tutorial .
And here is the related entries of this post:
- Dynamic Load Chart Extjs from PHP,Mysql
- Getting Started (Extjs : Part 2)
- What is Extjs ? (Part 1)
- How to select the nth-child in jQuery?
- Embed Captcha into Login Form Extjs ?
Incoming search terms for the article:
- extjs linechart
- tipRenderer extjs
- extjs chartstyle
- xtype: linechart
- extjs chart example colors
- extjs linechart example
- extjs tiprenderer html
- javascripts static chart
- extjs linechart style
- extjs script source 3 1
- extjs 3 1 tutorial
- displayName series Extjs
- static store example extjs
- dynamic line chart extjs
- tutorials extjs 3 1
Leave a Reply