Dynamically change chart axis date format

[ibar98]

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]

Any ideas?

[scottmartin]

Can you use the renderer to format the label?

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

Scott.

[ibar98]

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]

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');
}
} ]
}