1

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
 });
user3216871
  • 11
  • 1
  • 2

1 Answers1

0

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.

Stanislau
  • 402
  • 1
  • 5
  • 16
  • I attempted to do what you asked, however, as you stated, the y-axis would immediately lose most of its labels. Attempting to fix this through setting a maximum and minimum of 0 to 100 breaks the chart entirely. The updated code can be seen here: – user3216871 Jan 22 '14 at 14:13