title: Realtime chart using flot jquery
body: <p>I'm looking for a way to display a VM current CPU usage using a Flot (Jquery) Chart.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          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 &lt; 14; i += 0.5) {
                  d1.push([i, Math.floor(Math.random()*11)]);
              }
              $.plot($("#placeholder"), [ d1 ], options);
          }
          init();
          $("input.dataUpdate").click(function () {
              update();
          });         
      &lt;/script&gt;
  </code></pre>
  
  <p>Any idea or maybe another plugin that can do the trick ?</p>
  
  <p>edit : </p>
  
  <p>I need to translate the associative array :</p>
  
  <pre><code> [ [1, (random1)], [2, (random2), [3, (random2) ]
  </code></pre>
  
  <p>to </p>
  
  <pre><code> [ [2, (random2)], [3, (random3), [4, (random4) ] (new element 4)
  </code></pre>
  
  <p>Don't know how to achieve this.</p>