Gráfico en tiempo real usando flot jquery

Question

Estoy buscando una forma de mostrar el uso actual de la CPU de una máquina virtual usando una tabla Flot (Jquery).

A partir de ahora, puedo dibujar líneas simples pero ninguna pista sobre cómo conseguir el movimiento gráfico a la izquierda como llegan nuevos datos.

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

Cualquier idea o tal vez otro plugin que puede hacer el truco?

edición:

tengo que traducir la matriz asociativa:

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

a

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

No sabe cómo lograr esto.

Answer 1

Estaba viendo su API y tienen una función 'setData' que parece que le permite actualizar una tabla de datos existente.

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

[Actualización] Después de mirar el ejemplo anterior en otros navegadores, la frecuencia de actualización en la reconstrucción de la trama desde el principio es un poco lento. Noté destellos indeseables entre las actualizaciones. Aquí es una solución mejor:

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

También armar un post sobre flot describir esto en un poco más de detalle:

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

Bob

Answer 2

Usted puede utilizar el método shift en la matriz para eliminar el primer elemento (es decir, desplazarlo hacia la izquierda y disminuir su tamaño en 1 elemento) y push para agregarlo al final y aumentar su tamaño a su tamaño original antes del shift v.g.

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

a continuación, mostrar la trama de nuevo con $ .PLOT (....)