使用flot jquery的实时图表

我正在寻找一种使用Flot（Jquery）图表显示VM当前CPU使用率的方法。

从现在开始，我可以绘制简单的线条，但不知道如何在新数据进入时将图形移动到左侧。

 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(); });  

任何想法或可能是另一个插件可以做到这一点？

编辑：

我需要翻译关联数组：

  [ [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（….）显示情节