Ext Flot dynamically change chart values - extjs

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();

Answer 2

if you have send record from your web Application in Json/Proper format then you can simply create JavaScript that you can call on button /submit button.
function createCharts() {
var queryString = $('#mainForm').formSerialize();
var url_String = "runChartData.action" + '?'+queryString+'&selectedModule=Line';// URL to call ajax
$.ajax({
type: "post",
dataType: "json",
url: url_String,
async : true,
success: function(data){
chartData = data;
createChart(data); // the Method you have Created As I have created Bellow
}, error: function(data){
$('#chartDiv').empty(); //empty chart Div to recreate it.
}
});
}
createChart(var myDataArray){
$('#chartDiv').empty(); // reset to Create New Chart with new Data
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();
}