Featured Post

Ext-JS Custom charts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"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

Popular posts from this blog

[Inside AdSense] Understanding your eCPM (effective cost per thousand impress...