Automatyczne odświeżanie wykresu JQPlot z dynamicznymi danymi ajaxowymi

Question

Chcę aktualizować wykres rysowane przez jqPlot sekwencyjnie w odstępach czasu.

Mój przypadek użycia jest taki, że wywołanie AJAX zwraca tylko jedną wartość. Dla np .:

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

więc chcę, aby wykreślić wykres jak:

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

możemy wyjąć już wykreślić dane w JQPlot a następnie dołączyć ustawić to nowe dane i przerysować wykres ??

Czy ktoś może mi pomóc?

Answer 1

Będziesz musiał przechowywać dane w tablicy, a następnie wprowadzić nowe dane do tablicy w obrębie każdego wywołania ajax.

Oto prosty demo za pomocą przycisku, aby rozpocząć aktualizacje AJAX na 3 drugiego przedziału:

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

Dodam do @charlietfl odpowiedź. Podczas korzystania z funkcji replot() ponowne rysowanie trwa 2 razy, zamiast niszczenia jqplota. Więc użyj destroy(), aby przerysować fabułę.

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

http://jsfiddle.net/zjjvm/ trwa 46sec narysować działa sinus korzystając Replot()

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

http://jsfiddle.net/p9SbP/ potrzebnego 25 sek narysować takie same użyciu zniszczyć()