동적 아약스 데이터가있는 JQPlot 자동 새로 고침 차트

Question

시간 간격으로 jqPlot에 의해 그려진 차트를 순차적으로 업데이트하려고합니다.

내 용도는 AJAX 호출이 단일 값만 반환하도록하는 경우입니다. 예컨대 : 들어

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

그래서 내가 플롯을 만들고 싶어 같은 그래프 :

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

우리가 이미 JQPlot 데이터를 꾸몄다 다음이 새로운 데이터 세트 추가와 그래프를 그리기 추출 할 수 있습니다?

아무도 도와 줄 수 있습니까 ??

Answer 1

배열에 데이터를 저장 한 다음 각 아약스 호출 내에서 배열에 새 데이터를 푸시해야합니다. 여기

는 3 초 간격의 AJAX 업데이트를 시작하는 버튼을 사용하여 간단한 데모입니다 :

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

나에게 대답을 @charlietfl에 추가 할 수 있습니다. replot()을 사용할 때 jqplot을 파기하는 것보다 다시 그리는 데 2 ​​배의 시간이 걸립니다. 그러므로 plot()을 그리려면 destroy()를 사용하십시오.

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

http://jsfiddle.net/zjjvm/가 파괴 사용하여 동일한을 그릴 수는 25sec 소요

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

http://jsfiddle.net/p9SbP/ replot()를 사용하여 사인을 실행 그릴 46sec 소요()