PDA

View Full Version : How to adjust column height with respect to y axis?



Vishwastalule
21 Nov 2012, 5:19 AM
Hi,
I want to display column chart of daily output in which output is shown on y axis and date of month on x axis.
Also I want to show line chart of daily plan with plan value shown on y axis with respect to date.
But columns of chart cut off as its value exceeds max value of x axis.
my values for output are between 200-1300 and these for plan are between 600-1400.
While my y-axes have max value 1000 for output.Dates on which output is greater than 1000 is not displayed correctly (as it is displayed upto 1000 only).


In chart output value may be greater than plan.


I added fields: ['earning','plan'] in config of axes.


But still it is not working.




Ext.define("myapp.view.Daily_Column_Chart",{
extend:"Ext.chart.Chart",
xtype:"daily_column_chart",
config:{
width:"98%",
height:"93%",
title:"chart",
iconCls:'bookmarks',
id:"daily_chart",
margin:"30px 0px 0px 0px",
shadow: false,
animate: true,
axes: [{
type: 'Numeric',
position: 'left',
id:"set_axis",
fields: ['earning','plan'],
title: 'Output',
grid: true,
label:{
fill:"#fff"
},
labelTitle: {
font: '16px Helvetica,sans-serif',
fill:"#fff"
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['date'],
title:'Month of year',
label:{
fill:"#fff"
},
labelTitle: {
font: '16px Helvetica,sans-serif',
fill:"#fff"
}
}],
//create the actual area series
series:[
{
type:"column",
animate:true,
highlight: true,
showInLegend: true,
axis:"left",
xField:'date',
yField:'earning',
renderer: function (sprite, storeItem, barAttr, i, store) {
barAttr.fill ="fbff97";
return barAttr;
}
},
{
type: 'line',
highlight: true,
showInLegend: true,
showMarkers:false,
smooth: true,
axis: 'left',
xField: 'date',
yField: 'plan'
}
]
}
});







Thanks,
Vishwas