Biểu đồ tự động làm mới JQPlot với dữ liệu ajax động

Question

Tôi muốn cập nhật biểu đồ được vẽ bởi jqPlot theo tuần tự trong khoảng thời gian.

Trường hợp sử dụng của tôi là như vậy mà cuộc gọi AJAX chỉ trả về một giá trị duy nhất. Đối với ví dụ .:

1st AJAX call: 20 
2nd AJAX call: 30 
3rd AJAX call: 40 
4th AJAX call: 32 

Vì vậy, tôi muốn thực hiện âm mưu đồ thị như:

First: only 20 
Second: 20,30 
Third: 20,30,40 
Fourth: 20,30,40,32 

thể Chúng tôi trích xuất đã âm mưu dữ liệu trong JQPlot và sau đó nối thêm thiết lập dữ liệu mới này và vẽ lại đồ thị ??

Có thể giúp đỡ bất kỳ ai không ??

Answer 1

Bạn sẽ cần phải lưu trữ dữ liệu trong một mảng sau đó đẩy dữ liệu mới vào mảng trong mỗi cuộc gọi ajax.

Đây là một bản demo đơn giản bằng cách sử dụng nút để bắt đầu cập nhật AJAX trên một khoảng 3 giây:

/* store empty array or array of original data to plot on page load */ 

var storedData = [3, 7]; 

/* initialize plot*/ 

var plot1; 
renderGraph(); 

$('button').click(function(){ 
    doUpdate(); 
    $(this).hide(); 
}); 

function renderGraph() { 
    if (plot1) { 
     plot1.destroy(); 
    } 
    plot1 = $.jqplot('chart1', [storedData]); 
} 
/* sample data for demo*/ 
var newData = [9, 1, 4, 6, 8, 2, 5]; 


function doUpdate() { 
    if (newData.length) { 
     /* used to pull new number from sample data for demo*/ 
     var val = newData.shift(); 

     $.post('/echo/html/', { 
      html: val 
     }, function(response) { 
      var newVal = new Number(response); /* update storedData array*/ 
      storedData.push(newVal); 
      renderGraph();    
      setTimeout(doUpdate, 3000) 
     }) 

    } else { 
     alert("All Done") 
    } 
} 

DEMO: http://jsfiddle.net/ZqCXP/

Answer 2

Hãy để tôi thêm vào @charlietfl câu trả lời. Khi bạn sử dụng replot() phải mất 2 lần để vẽ lại, thay vì phá hủy jqplot. Vì vậy, sử dụng tiêu diệt() để vẽ lại âm mưu.

$.jqplot('chart1', [storedData]).replot(); 

http://jsfiddle.net/zjjvm/ phải mất 46sec để vẽ chạy sin sử dụng replot()

plot1.destroy(); 
plot1 = $.jqplot('chart1', [storedData]) 

http://jsfiddle.net/p9SbP/ phải mất 25sec để vẽ cùng sử dụng tiêu diệt()