PDA

View Full Version : Dynamically change chart axis date format



ibar98
18 Jul 2012, 7:26 AM
If the range of a chart's time axis falls within a certain range, I would like to change how the date is formatted. E.g., if the range falls within one day I would like the axis to display hours/minutes instead of the normal month/day. Conceptually, something like this:


chart.axes.items[1].dateFormat = 'H:i';

However, I've been unable to get the axis to update to a new dateFormat thus far. Does anyone have any suggestions as to how I can accomplish this?

Thanks!

ibar98
20 Jul 2012, 9:56 AM
Any ideas?

scottmartin
21 Jul 2012, 9:12 AM
Can you use the renderer to format the label?



label: {
renderer: function(date) {
// format date
}
}


Scott.

ibar98
24 Jul 2012, 6:32 AM
Hi Scott, thank you for replying.

While this would theoretically work, it would also then require me to manually set the step for the axis. When trying to dynamically set the step for the currently selected date range, I've often found the graph to not render correctly (series going right off of the graph). I've chalked this up to the step not liking to be altered after initial instantiation as well. Please correct me if I'm wrong.

loki4u
29 Jan 2013, 5:32 AM
chart.axes.items[1].dateFormat = 'H:i';

chart.series.items[1].drawSeries();chart.axes.items[1].drawAxis();

probably it would help..

or


we can format data in model itself as follows:

Ext.define('model.Chart', {
extend: 'Ext.data.Model'
,fields : [
{name:'date',type:'date',convert:function(date){
var dt = Ext.Date.parse(date, "Y m");
return Ext.Date.format(dt, 'F ,Y');
}
} ]
}