使用 flot jquery 的实时图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4758602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Realtime chart using flot jquery
提问by Disco
I'm looking for a way to display a VM current CPU usage using a Flot (Jquery) Chart.
我正在寻找一种使用 Flot (Jquery) 图表显示 VM 当前 CPU 使用率的方法。
From now, i can draw simple lines but no clue on how to get the graphic move to the left as new data comes in.
从现在开始，我可以绘制简单的线条，但不知道如何在新数据进入时使图形向左移动。
<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>
Any idea or maybe another plugin that can do the trick ?
任何想法或其他插件可以做到这一点？
edit :
编辑 ：
I need to translate the associative array :
我需要翻译关联数组：
[ [1, (random1)], [2, (random2), [3, (random2) ]
to
到
[ [2, (random2)], [3, (random3), [4, (random4) ] (new element 4)
Don't know how to achieve this.
不知道如何实现这一目标。
回答by rcravens
I was looking at their API and they have a 'setData' function that looks like it allows you to update an existing charts data.
我正在查看他们的 API，他们有一个“setData”函数，看起来它允许您更新现有图表数据。
http://flot.googlecode.com/svn/trunk/API.txt
http://flot.googlecode.com/svn/trunk/API.txt
[Update] After looking at the above example in other browsers, the refresh rate when reconstructing the plot from scratch is a bit slow. I noticed undesirable flashes in between updates. Here is a better solution:
[更新] 在其他浏览器中查看上述示例后，从头重建绘图时的刷新率有点慢。我注意到更新之间出现了不受欢迎的闪烁。这是一个更好的解决方案：
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);
I also put together a blog post about flot describing this in a bit more detail:
我还整理了一篇关于 flot 的博客文章，更详细地描述了这一点：
http://blog.bobcravens.com/2011/01/web-charts-using-jquery-flot/
http://blog.bobcravens.com/2011/01/web-charts-using-jquery-flot/
Bob
鲍勃
回答by Neil
You can use the shiftmethod on the array to remove the first element (i.e. shifting it to the left and decreasing its size by 1 element) and pushto add to the end and increasing its size to its original size before the shifte.g.
您可以使用shift数组上的方法删除第一个元素（即向左移动并将其大小减少 1 个元素）并push添加到末尾并将其大小增加到shift例如之前的原始大小
d1.shift();
d1.push(new_element);
then display the plot again with $.plot(....)
然后用 $.plot(....) 再次显示绘图
