我正在寻找一种使用Flot(Jquery)图表显示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)],(random3),[4,(random4) ] (new element 4)
不知道如何实现这一目标.
解决方法
我正在查看他们的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/
短发