實時圖表使用flot jquery

我正在尋找一種方式來顯示VM使用Flot（jquery）圖表當前的CPU使用率。實時圖表使用flot jquery

從現在開始，我會畫簡單的線條，但是，如何讓圖形向左移動作爲新的數據用武之地。

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

不知道如何實現這一目標。

來源

2011-01-21 Disco

我在看他們的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);

我也把一個博客帖子大約海軍報說明這一點更詳細：

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

鮑勃

來源

2011-01-21 12:57:33 rcravens

如何調用該函數重新顯示情節？ plot.setData不起作用...對不起我的無知 – Disco 2011-01-21 13:32:18

這是一個通過ajax和settimer進行更新的flot示例：http://people.iola.dk/olau/flot/examples/ajax.html – rcravens 2011-01-21 14:01:21

可以使用shift方法在陣列上移除第一個元素（即將其移到左側並將其大小減少1個元素）並將push添加到末尾並將其大小增加到其原始大小shift例如

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

然後用$ .plot（....）

來源

2011-01-21 13:06:37 Neil

實時圖表使用flot jquery

回答

相關問題