Biểu đồ thời gian thực bằng cách sử dụng flot jquery

Question

Tôi đang tìm cách hiển thị mức sử dụng CPU hiện tại của VM bằng Biểu đồ Flot (Jquery).

Từ bây giờ, tôi có thể vẽ đường nét đơn giản nhưng không có đầu mối về cách để có được sự di chuyển đồ họa sang trái khi dữ liệu mới đến.

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

Bất kỳ ý tưởng hoặc có thể một plugin mà có thể làm các việc lừa?

chỉnh sửa:

tôi cần phải dịch các mảng kết hợp:

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

để

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

Không biết làm thế nào để đạt được điều này.

Answer 1

Tôi đã xem API của họ và họ có chức năng 'setData' trông giống như nó cho phép bạn cập nhật dữ liệu biểu đồ hiện có.

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

[Cập nhật] Sau khi xem xét các ví dụ trên trong các trình duyệt khác, tỷ lệ làm mới khi xây dựng lại cốt truyện từ đầu là một chút chậm. Tôi nhận thấy các nhấp nháy không mong muốn ở giữa các bản cập nhật. Đây là một giải pháp tốt hơn:

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

Tôi cũng đặt cùng một bài đăng blog về flot mô tả này trong một chút chi tiết hơn:

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

Bob

Answer 2

Bạn có thể sử dụng phương pháp shift trên mảng để loại bỏ phần tử đầu tiên (tức là dịch chuyển nó sang trái và giảm kích thước của nó xuống 1 phần tử) và push để thêm vào cuối và tăng kích thước của nó lên kích thước ban đầu trước shift ví dụ:

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

sau đó hiển thị các âm mưu một lần nữa với $ .plot (....)