ExtJs Charts with time axis, update problem

Question

I'm using Ext4 js to create charts. My charts are line charts showing evolution of events during time, so my bottom axes is a time axes:

    {
    type: 'Time',
    position: 'bottom',
    grid: grid,
    fields: 'name',
    title: false,
    dateFormat: 'd/m/y',
    groupBy: 'year,month,day',

    aggregateOp: 'sum',
    label: {
        orientation: 'horizontal',
        rotate: {
            degrees: label_rotation
        }
    }

I have links to change the scale. Clicking on one of those link should change dateformat and groupby options. Here the code:

scaleGroups = {
    'DAY': {
    dateFormat: 'd/m/y',
        groupBy: 'year,month,day' 
    },
    'MONTH' :{
            dateFormat: 'M Y',
            groupBy: 'year,month'
    },
    'YEAR' :{
            dateFormat: 'Y',
            groupBy: 'year'
    }
};


function changeChartScale(chart_id, scale) {
    var chart = Ext.getCmp(chart_id);
    var axis = chart.axes.get(1);
    selectedGroup = scaleGroups[scale];
    axis.dateFormat = selectedGroup.dateFormat;
    axis.groupBy = selectedGroup.groupBy;

    chart.redraw();
}

The problem is that changing from a scale to another, for example from days to months, previous labels remain. So the line is correct, but I see both day labels and month labels.

Does anyone know why?

Thanks in advance, Sabrina

UPDATE 07/06/2011: The same code on a sample html page, importing only this javascript library, works.

Maybe it's a problem of compatibility with other javascript libraries I use (Jquery, googlempas...). Did anyone experience the same problem?

Answer 1

I found a workaround since the chart.redraw() method doesn't automatically redraw the axis scale/values.

Set a new maximum for the axes, then use the axis.drawAxis() method prior to redrawing the chart...

My chart redraws when the user sorts a column on a bound grid.

    chart.axes.items[0].fields = [column.dataIndex];
    chart.series.items[0].yField = [column.dataIndex];


    var s = Ext.data.StoreManager.lookup('myStore');
    var max = s.max(column.dataIndex);


    chart.axes.items[0].maximum = max;
    chart.axes.items[0].drawAxis();


    chart.redraw();

Answer 2

This is a Sencha bug!

This is still unanswered on their forum: http://www.sencha.com/forum/showthread.php?145433-ExtJS-4-chart-store-update-issue