ExtJS 4.2 - Chart Redraw, still see old labels

Question

I have some problem with my line chart that I am making.

I am making it so it will automatically update every second, and it will take the value in the "Ping Time" text field, then place it onto the chart, at the next "Minute" index.

What is wrong however, is that, when the chart updates, it would not properly refresh the axis. You can see this in action here:

http://jsfiddle.net/HTj5Q/71/

The concerned pieces of code would be the chart creation,

Ext.create('Ext.chart.Chart',{
        renderTo:Ext.getBody(),
        id:'ChartTest',
        xtype: 'chart',
        width: 400,
        height:300,
        store: testStore,
        axes:[
            {
                title:'Ping Time',
                type: 'Numeric',
                position: 'left',
                grid:true,
                fields: ['ping'],
            },
            {
                title:'Minutes',
                type: 'Numeric',
                position: 'bottom',
                grid:true,
                fields:['id'],
                minimum:0,
            }
        ],
        series: [
             {
                 type:'line',
                 xField:'id',
                 yField:'ping',
                tips: {
                trackMouse: true,
                width: 80,
                height: 40,
                renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('id'));
                    this.update(storeItem.get('ping'));
                }
            }
             }
        ],
});

As well as the refreshing code

var task = Ext.TaskManager.start({
 run: function () {
     min=min+1;
    // max=max+1;
    // Ext.getCmp('ChartTest').axes.items[1].maximum=max;
     Ext.getCmp('ChartTest').axes.items[1].minimum=min;
     test= Ext.getCmp('PingTime').getValue();
     temp = temp+1;
     Ext.getCmp('display').setValue('Temp = '+temp+' Test = '+test);   

     testStore.add({id:temp,ping:test});
     var rec=  testStore.getAt(0);
     Ext.getCmp('display2').setValue('rec is '+rec.get('id'));
     if(rec.get('id')<temp-8)
     {
         testStore.remove(rec);
     }
     Ext.getCmp('ChartTest').redraw();

     },
     interval: 2000
 });

Answer 1

Try to use

Ext.getCmp('ChartTest').surface.removeAll();

before redraw() method.

It's not a complete solution because of there are some issues are still remained. For instance if you change a value in the "Ping time" textfield significantly Y axis will be broken. Moreover it may not works properly in the all browsers but I guess this additional information may help you to find out a final solution.