PDA

View Full Version : Implementation of Stacked Column Chart



samarth
29 Apr 2012, 9:13 PM
Hi folks,
I am using ExtJS 3.4. I have implemented StackedBarChart that is working fine. I have same store have to implement StackedColumnChart. But when i used the same logic as in StackedBarChart then it is not coming full blank panel is coming. So is it different from stacked bar chart and stacked column chart in extjs 3.4??? Please help me in this issue.:))


Thanks in advance.

willigogs
30 Apr 2012, 2:51 AM
Example code which is failing?

samarth
30 Apr 2012, 3:20 AM
Example code which is failing?




var BarChart=new Ext.Panel({
iconCls:'chart',
frame:true,
layout:'anchor',
autoScroll:true,
split: true,
hidden:true,
anchor: '100%, 100%',
width: '100%',
fullscreen: true,
items: {
xtype: 'stackedcolumnchart',
store:storer,
animate: true,
id:'barchart',
yField: 'codenumber',
xAxis: new Ext.chart.NumericAxis({
displayName: 'Code Number',
stackingEnabled: true,
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series) {
// function logic
},
chartStyle: {
padding: 15,
animate: true,
majorTickSteps:'1:1',
autoWidth:true,
legend: {
padding: 3,
autoWidth:true,
},
dataTip: {
padding: 10,
animationEnabled: true,
},
xAxis: {
showLabels:true,
}, yAxis: {
showLabels:true,
} },
axes: [{
id: 'tcleftaxis',
type: 'Numeric',
position: 'left',
fields: ['Count1' ,'Count2','Count3','Count4','Count5','Count6','Count7'],
grid: false,
},
{
type: 'Category',
position: 'right',
fields: ['code']
}],
series: [{
type:'bar',
displayName: 'count1',
xField: 'Count1',
axis: 'bottom',
displayName:'Count1',
highlight: true,
},{
type:'bar',
displayName: 'count2',
xField: 'Count2',
axis: 'bottom',
displayName:'Count2',
highlight: true,
},{
type:'bar',
displayName: 'count3',
xField: 'Count3',
axis: 'bottom',
displayName:'Count3',
highlight: true,
},{
type:'bar',
displayName: 'count4',
xField: 'Count4',
axis: 'bottom',
displayName:'Count4',
highlight: true,
},{
type:'bar',
displayName: 'count5',
xField: 'Count5',
axis: 'bottom',
displayName:'Count5',
highlight: true,
},{
type:'bar',
displayName: 'count6',
xField: 'Count6',
axis: 'bottom',
displayName:'Count6',
highlight: true,
},{
type:'bar',
displayName: 'count7',
xField: 'Count7',
axis: 'bottom',
displayName:'Count7',
highlight: true,
}]
}
});