JQPlot Auto Refresh-Diagramm mit dynamischen Ajax-Daten

Question

Ich möchte das Diagramm von jqPlot sequenziell in Zeitintervallen aktualisiert werden.

Mein Anwendungsfall ist so, dass der AJAX-Aufruf nur einen einzelnen Wert zurückgibt. Für z.B .:

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

So möchte ich Plot das Diagramm machen wie:

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

Können wir bereits gezeichneten Daten in JQPlot extrahieren und dann fügen Sie diese neue Datensatz und die Grafik neu zu zeichnen ??

Kann mir bitte jemand helfen ??

Answer 1

Sie müssen die Daten in einem Array speichern und dann innerhalb jedes Ajax-Aufrufs neue Daten an das Array senden.

Hier ist ein einfaches Demo eine Schaltfläche mit Hilfe der AJAX-Updates auf einem 3-Sekunden-Intervall zu starten:

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

mir Antwort auf @charlietfl Let hinzuzufügen. Wenn Sie replot() verwenden, dauert es 2 mal länger, um neu zu zeichnen, anstatt jqplot zu zerstören. Verwenden Sie also die Funktion destroy(), um das Diagramm neu zu zeichnen.

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

http://jsfiddle.net/zjjvm/ es 46sec nimmt mit Replot läuft Sinus zu zeichnen()

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

http://jsfiddle.net/p9SbP/ es 25sec nimmt zu zerstören, das gleiche zu ziehen() verwendet