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

Ext Flot говорит:

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, тогда вы можете просто создать 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(); 

}