PDA

View Full Version : How to create a column chart with whereby the the x axis will display three columns (



ngugi
12 Jan 2013, 2:54 AM
Hallo Guys,
I want to create a column chart with whereby the the x axis will display three columns (jan,feb and march) and the y axis will display the values.

The following is how my json file data looks like

{"type":"FeatureCollection","features":[{"geometry":{"type":"Point","coordinates":["36.82200","-1.29200"]},"type":"Feature","properties"{"country":"Kenya",,"january":"50.00","february":"40.00","march":"10.00"}}]}

mitchellsimoens
14 Jan 2013, 1:56 PM
You can do it like (local example), there are two lines in red that are important:


var store = Ext.create('Ext.data.JsonStore', {
fields : ['name', 'data1', 'data2', 'data3'],
data : [
{ name : 'metric one', data1 : 10, data2 : 4, data3 : 7 },
{ name : 'metric two', data1 : 7, data2 : 8, data3 : 2 },
{ name : 'metric three', data1 : 5, data2 : 2, data3 : 8 },
{ name : 'metric four', data1 : 2, data2 : 3, data3 : 9 },
{ name : 'metric five', data1 : 7, data2 : 5, data3 : 1 }
]
});

Ext.create('Ext.chart.Chart', {
renderTo : Ext.getBody(),
width : 500,
height : 300,
animate : true,
store : store,
axes : [
{
type : 'Numeric',
position : 'left',
fields : ['data1', 'data2', 'data3'],
label : {
renderer : Ext.util.Format.numberRenderer('0,0')
},
title : 'Sample Values',
grid : true,
minimum : 0
},
{
type : 'Category',
position : 'bottom',
fields : ['name'],
title : 'Sample Metrics'
}
],
series : [
{
type : 'column',
axis : 'left',
highlight : true,
tips : {
trackMouse : true,
width : 140,
height : 28,
renderer : function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label : {
display : 'insideEnd',
'text-anchor' : 'middle',
field : 'data',
renderer : Ext.util.Format.numberRenderer('0'),
orientation : 'vertical',
color : '#333'
},
xField : 'name',
yField : ['data1', 'data2', 'data3']
}
]
});

ngugi
14 Jan 2013, 10:25 PM
Many Thanks, the script has indeed pointed me to the right direction.