動的Ajaxデータを使用したJQPlot自動リフレッシュチャート

Question

jqPlotによって描画されたグラフを時間間隔で順次更新したいとします。

私の使用例は、AJAX呼び出しが単一の値だけを返すようなケースです。例えば：用

1st AJAX call: 20 
2nd AJAX call: 30 
3rd AJAX call: 40 
4th AJAX call: 32 

だから私はプロットを作りたいようなグラフ：

First: only 20 
Second: 20,30 
Third: 20,30,40 
Fourth: 20,30,40,32 

は、我々はすでにJQPlot内のデータをプロットし、この新しいデータセットを追加し、グラフを再描画抽出することができます？

誰でもお手伝いできますか？

Answer 1

データを配列に格納し、新しいデータを各ajax呼び出し内の配列にプッシュする必要があります。ここで

は3秒間隔でのAJAXの更新を開始するには、ボタンを使用して簡単なデモです：

/* store empty array or array of original data to plot on page load */ 

var storedData = [3, 7]; 

/* initialize plot*/ 

var plot1; 
renderGraph(); 

$('button').click(function(){ 
    doUpdate(); 
    $(this).hide(); 
}); 

function renderGraph() { 
    if (plot1) { 
     plot1.destroy(); 
    } 
    plot1 = $.jqplot('chart1', [storedData]); 
} 
/* sample data for demo*/ 
var newData = [9, 1, 4, 6, 8, 2, 5]; 


function doUpdate() { 
    if (newData.length) { 
     /* used to pull new number from sample data for demo*/ 
     var val = newData.shift(); 

     $.post('/echo/html/', { 
      html: val 
     }, function(response) { 
      var newVal = new Number(response); /* update storedData array*/ 
      storedData.push(newVal); 
      renderGraph();    
      setTimeout(doUpdate, 3000) 
     }) 

    } else { 
     alert("All Done") 
    } 
} 

DEMO：http://jsfiddle.net/ZqCXP/

Answer 2

私は答えを@charlietflに追加してみましょう。 replot（）を使用すると、jqplotを破棄するのではなく、再描画するのに2倍の時間がかかります。したがって、プロットを再描画するためにdestroy（）を使用してください。

$.jqplot('chart1', [storedData]).replot(); 

http://jsfiddle.net/zjjvm/それが破壊使用して同じことを描画することが25秒かかる

plot1.destroy(); 
plot1 = $.jqplot('chart1', [storedData]) 

http://jsfiddle.net/p9SbP/再プロットを（）を使用してサインを実行している描画する46secかかる（）