Featured Post
Ext-JS Custom charts
- Get link
- X
- Other Apps
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="ext3/css/ext-all.css" />
<script type="text/javascript" src="ext3/ext-base.js"></script>
<script type="text/javascript" src="ext3/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext3/images/default/s.gif';
Ext.chart.Chart.CHART_URL = 'ext3/resources/charts.swf';
Ext.onReady(function() {
var store = new Ext.data.JsonStore({
fields:['name', 'games', 'movies','music'],
data: [
{name:'Jul 07', games: 245, movies: 300, music:700},
{name:'Aug 07', games: 240, movies: 350, music:550},
{name:'Sep 07', games: 355, movies: 400, music:615},
{name:'Oct 07', games: 375, movies: 420, music:460},
{name:'Nov 07', games: 490, movies: 450, music:625}
]
});
var chart = new Ext.chart.LineChart({
renderTo: Ext.getBody(),
width: 300,
height: 300,
id: 'chart',
store: store,
xField: 'name',
yAxis: new Ext.chart.NumericAxis({
displayName: 'games',
labelRenderer: Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer: function(chart, record, index, series) {
if (series.yField == 'games') {
return Ext.util.Format.number(record.data.games, '0,0') + '
games in ' + record.data.name;
} if (series.yField == 'music') {
return Ext.util.Format.number(record.data.games, '0,0') + '
CD\'s in ' + record.data.name;
}
else {
return Ext.util.Format.number(record.data.movies, '0,0') + '
movies in ' + record.data.name;
}
},
extraStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
legend: {
display: 'bottom'
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size: 1
},
background: {
color: 0xDAE7F6,
alpha: 1
},
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: 'line',
displayName: 'Movies',
yField: 'movies',
style: {
color: 0xCCCCCC,
image: 'img/star_red.png',
mode: 'stretch'
}
}, {
type: 'line',
displayName: 'Games',
yField: 'games',
style: {
color: 0xCCCCCC,
image: 'img/star_green.png',
mode: 'stretch'
}
}, {
type: 'line',
displayName: 'Cd\'s',
yField: 'music',
style: {
color: 0xCCCCCC,
image: 'img/star_blue.png',
mode: 'stretch'
}
}]
});
});
</script>
</head>
<body style="padding: 20px">
<div id="container"></div>
</body>
</html>
This e-Mail may contain proprietary and confidential information and is sent for the intended recipient(s) only. If by an addressing or transmission error this mail has been misdirected to you, you are requested to delete this mail immediately. You are also hereby notified that any use, any form of reproduction, dissemination, copying, disclosure, modification, distribution and/or publication of this e-mail message, contents or its attachment other than by its intended recipient/s is strictly prohibited.
Visit us at http://www.polaris.co.in
Comments