Ext Flot dynamically change chart values

Question

I am using Ext flot for drawing charts on my application. I want to update chart data with ajax request or with a button. I couldn't update values. Anyone have an idea?

var graphDataArr = [{ label: 'My Graph', data: myDataArray, color: '#46F252', hoverable: false, clickable: false }];

new Ext.Window({
    header      : false,
    layout      : 'anchor',
    height      : 200,
    width       : 750,
    baseCls     : 'ext_panel_header_bar',
    items       : [ {
        xtype       : 'flot',
        id          : 'flotGraph',
        cls         : 'x-panel-body',
        series      : graphDataArr,
        xaxis       : {
            min : xMin,
            max : xMax
        },
        yaxis       : {
            min : yMin,
            max : yMax
        },
        tooltip     : false,
        anchor      : '98% 99%'
    } ]
}).show();

Answer 1

Ext Flot API documentation says:

setData( Array Series ) : void

You can use this to reset the data used. Note that axis scaling, ticks, legend etc. will not be recomputed (use setupGrid() to do that). You'll probably want to call draw() afterwards. 

You can use this function to speed up redrawing a plot if you know that the axes won't change. Put in the new data with setData(newdata) and call draw() afterwards, and you're good to go.

You could do the following in a button handler (where dataArray is your new data array):

var chart = Ext.getCmp('flotGraph');    
chart.setData(dataArray);
chart.setupGrid();
chart.draw();