PDA

View Full Version : Query on Ext js TimeAxis



chartuser
26 Nov 2011, 6:39 PM
Hi,

I am using a Ext js 3.4 columnchart and a stacked column chart , in which yAxis is a numeric axis and x axis as TimeAxis.

The numeric axis always start at zero and units are displayed according to values . However ,my TimeAxis does start on the least month with store has . I could see all the columns/bars. But the problem is since the value ranges from say Dec -1 -YYYY., my first bar always start on zeroth position. Is there a way to shift the bar , to first axis value, instead of zeroth axis value?

Also , is there a way to display the time axis label , exactly same as value?

My chart code is as below .


{

xtype:'stackedcolumnchart',
height:300,
store: mychartStore,
xField: 'timePeriod',
xAxis: new Ext.chart.TimeAxis({
labelRenderer: Ext.util.Format.dateRenderer('m/Y')
}),
yAxis: new Ext.chart.NumericAxis({
stackingEnabled: true,
title: 'Dollars',
labelRenderer: function(value)
{
return Ext.util.Format.number(value, '123,456.78');
}
}),
series: [{
yField:'earning',
displayName: 'Earnings',
style: { color: "#748746" }
},{
yField:'principal',
displayName: 'Principal',
style: { color: "#8C3F3A" }
}],


}

mitchellsimoens
27 Nov 2011, 7:37 AM
The YUI charts will try to do a lot of magic.. some of which is not exactly what everyone wants. You could check the YUI docs to see how to customize what you want.

chartuser
28 Nov 2011, 9:53 AM
Thank you. My collegue helped.
Instead of setting the xAxis to TimeAxis, donot set any. The chart will render its default. It worked.