实时图使用flot jquery [英] Realtime chart using flot jquery

问题描述

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

I'm looking for a way to display a VM current CPU usage using a Flot (Jquery) Chart.

从现在起，我可以绘制简单的线条，但不能

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 ?

编辑：

我需要翻译关联数组：

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

到

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

不知道如何实现。 p>

Don't know how to achieve this.

推荐答案

我在看他们的API，他们有一个'setData'功能，它允许你更新现有的图表数据。

I was looking at their API and they have a 'setData' function that looks like it allows you to update an existing charts data.

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

我也把一个关于flot的博客文章更详细地描述：

I also put together a blog post about flot describing this in a bit more detail:

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

Bob

这篇关于实时图使用flot jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！