Grafico di aggiornamento automatico JQPlot con dati dinamici Ajax

Question

Desidero aggiornare il grafico disegnato da jqPlot in modo sequenziale a intervalli di tempo.

Il mio caso d'uso è tale che la chiamata AJAX restituisce solo un singolo valore. Per es .:

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

Quindi voglio fare tracciare il grafico come:

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

Possiamo estrarre già tracciati dati in JQPlot e quindi aggiungere impostare questi nuovi dati e ridisegnare il grafico ??

Qualcuno può aiutare per favore ??

Answer 1

Sarà necessario memorizzare i dati in un array, quindi inserire nuovi dati nell'array all'interno di ciascuna chiamata Ajax.

Ecco un semplice demo usando un pulsante per avviare gli aggiornamenti AJAX su 3 secondo intervallo:

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

Lasciatemi aggiungere a @charlietfl risposta. Quando usi replot() ci vuole 2 volte di più per ridisegnare, piuttosto che distruggere jqplot. Quindi usa destroy() per ridisegnare la trama.

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

http://jsfiddle.net/zjjvm/ ci vuole 46sec disegnare in esecuzione sine utilizzando replot()

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

http://jsfiddle.net/p9SbP/ ci vuole 25sec per disegnare lo stesso utilizzando destroy()