0

アプリケーションでグラフを描画するために 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();
4

2 に答える 2

2

Ext Flot 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();
于 2013-04-19T19:33:04.840 に答える
0

Json/適切な形式で 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();

}
于 2013-04-24T06:04:46.623 に答える