flot jqueryを使用したリアルタイムチャート

Question

Flot（Jquery）Chartを使用してVMの現在のCPU使用率を表示する方法を探しています。

今から、私はシンプルなラインが、新しいデータが入るように、左に、グラフィックの移動を取得する方法について手掛かりを描くことができます。

<script type="text/javascript"> 
     var d1 = [ [0,0] ]; 
     options = { 
       lines: { 
        show: true 
       }, 
       points: { 
        show: true 
       }, 
       xaxis: { 
        tickDecimals: 0, 
        tickSize: 1 
       }, 
       grid: { 
        backgroundColor: { 
         colors: ["#fff", "#eee"] 
        } 
       } 
     }; 

     function init() {            
      $.plot($("#placeholder"), d1, options); 
     } /* init Function */ 

     function update(){ 
      for (var i = 0; i < 14; i += 0.5) { 
       d1.push([i, Math.floor(Math.random()*11)]); 
      } 
      $.plot($("#placeholder"), [ d1 ], options); 
     } 
     init(); 
     $("input.dataUpdate").click(function() { 
      update(); 
     });   
    </script> 

任意のアイデアまたは多分トリックを行うことができ、別のプラグインを？

編集：

[ [1, (random1)], [2, (random2), [3, (random2) ] 

[ [2, (random2)], [3, (random3), [4, (random4) ] (new element 4) 

にこれを達成する方法を知ってはいけない：

私は連想配列を変換する必要があります。

Answer 1

私はAPIを見ていて、既存のグラフデータを更新できるように見える 'setData'関数があります。

http://flot.googlecode.com/svn/trunk/API.txt

[更新] 他のブラウザで上記の例を見た後に、最初からプロットを再構成するリフレッシュレートは少し遅いです。私は更新の間に望ましくない点滅に気づいた。ここではよりよい解決策は以下のとおりです。

var xVal = 0; 
var data = [[],[]]; 
var plot = $.plot($("#chart4"), data); 

function getData(){ 
    // This could be an ajax call back. 
    var yVal1 = Math.floor(Math.random()*11); 
    var yVal2 = Math.floor(Math.random()*11); 
    var datum1 = [xVal, yVal1]; 
    var datum2 = [xVal, yVal2]; 
    data[0].push(datum1); 
    data[1].push(datum2); 
    if(data[0].length>10){ 
     // only allow ten points 
     data[0] = data[0].splice(1); 
     data[1] = data[1].splice(1); 
    } 
    xVal++; 
    plot.setData(data); 
    plot.setupGrid(); 
    plot.draw(); 
} 

setInterval(getData, 1000); 

私も一緒に、もう少し詳細にこれを説明しFLOTに関するブログ記事を置く：

http://blog.bobcravens.com/2011/01/web-charts-using-jquery-flot/

ボブ

Answer 2

あなたはshiftメソッドを使用することができます配列上で最初の要素を削除する（つまり、要素を1つ左にシフトしてサイズを減らす）とpushを追加し、最後にサイズを増やしてからshiftなど。

d1.shift(); 
d1.push(new_element); 

、この関数を呼び出すために、どのように$ .PLOT（....）