Ext Flot動態更改圖表值

Question

我正在使用Ext flot在我的應用程序上繪製圖表。我想用ajax請求或按鈕更新圖表數據。我無法更新值。任何人有想法？

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

分機海軍報API文檔說：

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. 

你可以做下面的按鈕處理程序（其中dataArray是新的數據排列）：

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

Answer 2

，如果你有送從JSON/Proper格式的Web應用程序記錄，然後您可以簡單地創建JavaScript，您可以通過按鈕/提交按鈕來調用。

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

}