График в реальном времени с использованием flot jquery

Question

Я ищу способ отображения текущего использования процессора виртуальной машиной с помощью диаграммы 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)

Не знаю, как этого добиться.

Answer 1

Я смотрел на их API, и у них есть функция 'setData', которая выглядит так, как будто она позволяет обновлять существующие данные графиков.

http://flot.googlecode.com/svn/trunk/API.txt

[Update] После просмотра приведенного выше примера в других браузерах частота обновления при восстановлении графика с нуля немного медленнее. Я заметил нежелательные вспышки между обновлениями. Вот лучшее решение:

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/

Bob

Answer 2

Вы можете использовать метод shift в массиве, чтобы удалить первый элемент (т.е. сместить его влево и уменьшить его размер на 1 элемент) и push, чтобы добавить в конец и увеличить его размер до исходного размер до shift например

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

, затем снова отобразите график с $ .plot (....)