Aktualisierung Datensatz mit flot setzt Daten

Habe ich eine flot Diagramm, das möchte ich dynamisch per AJAX aktualisieren.

Ich machen kann das Diagramm zunächst, aber immer wenn ich versuche zu aktualisieren, das dataSet und das Neuzeichnen des Diagramms, werden alle meine Daten Punkte:

plot.setData(dataSet);
        plot.draw();

Habe ich versucht, diese mit verschiedenen array-setups, und wie es scheint, ich bin übergeben Sie die richtigen Daten—das Diagramm einfach nicht nehmen.

Jemand irgendwelche Ideen? Danke!

http://datasift.islsandbox.com/

In diesem Beispiel verwendet WebSockets, also ein WebKit-browser ist Ihre beste Wette für die Prüfung.

  • das der link kaputt ist..., Was Sie tun, scheint grundsätzlich Recht, so liegt das problem sehr wahrscheinlich in dataSet. Posten Sie den Inhalt des dataSet für ein Neuzeichnen, vielleicht können wir herausfinden, das Problem von dort.
  • Huch, danke Ryley. Ist jetzt behoben. dataSet-Inhalt sollte in der Quelle.
InformationsquelleAutor Jon | 2011-04-23
  1. 11

    In deinem code hast du zwei Dinge mit flot-setup. Auf laden, Sie dies tun:

    var plot = $.plot($("#flotchart"), [{
    data: [[35, 0]],
    bars: {show: true, horizontal: true}
}]);

    Dann später, erhalten Sie einige neue Daten per AJAX und tun Sie dies:

     var dataSet = [[pacCount, 0]];//pacCount is a number that increments each call
 plot.setData(dataSet);
 plot.draw();

    Die Sache, die fehlt, ist, dass Sie in Ihren ersten Anruf bist du mit dem Daten-format, bei dem jede Serie ist ein Objekt, aber dann, wenn Sie anrufen setData beim zweiten mal, bist du mit der der "Serie als array" - variation. Ich bin mir nicht ganz sicher wo, aber das ist vermasselt flot. Hier ist, wie fix es in Ihrem zweiten Anruf:

     var dataSet = [[pacCount, 0]];//pacCount is a number that increments each call
 plot.setData([{
    data:dataSet,
    bars: {show: true, horizontal: true}
 }]);
 plot.draw();
    • ARG! Sie nannten diese bestimmte Sache in der Dokumentation, nicht Sie 🙂 Toller Ort, vielen Dank für die Hilfe.
    • link zum Platz in Google docs bitte?
    • href="https://github.com/flot/flot/blob/master/API.md#plot-methods" >github.com/flot/flot/blob/master/API.md#plot-methods
    InformationsquelleAutor Ryley
  2. 2

    Wenn Sie möchten, dass mehrere Serien mit Ihren labels:

    plot.setData([
  {
    label: 'Hola',
    data: data[0],
  },
  {
    label: 'Hola2',
    data: data[1]
  }
]);                 
plot.setupGrid();
plot.draw();

    Denen Daten abgerufen werden können, von einem ajax-Aufruf im json-format.

    Zum Beispiel in php:

    <?php

$data[] = array(2,4);
$data[] = array(12,6);
$data[] = array(22,8);
$data[] = array(32,2);
$data1[] = array(4,6);
$data1[] = array(14,3);
$data1[] = array(24,9);
$data1[] = array(34,5);

$response[0] = $data;
$response[1] = $data1;

echo json_encode($response);
?>

    In jedem Fall erfolgt die Rücksendung format Wert aus der server-Seite sollte so etwas wie dieses für zwei Serien, wie im Beispiel oben:

    [[[2,4],[12,6],[22,8],[32,2]],[[4,6],[14,3],[24,9],[34,5]]]

    InformationsquelleAutor
  3. 0

    Wenn Sie möchten, aktualisieren Sie Ihr Grundstück mehr als einmal können Sie Kapseln die Optionen Variablen

    var drawcourb = function(){

var options = {
                    series : {
                    }
                };

var plot = $.plot($("#placeholder"), [ {
label : "balbla",
data : courbData,
otherOption : "value"


} ], options);

return function(courbData){

    plot.setdata([{
label : "blabla",
data : courbData,
    }]);
    plot.draw();
}

    }

    Dann können Sie die Funktion aufrufen-update für exemple : 

    var updateProgressPlot = drawcourb();

updateProgressPlot(newDataSet);
    InformationsquelleAutor mustafa918
Schreibe einen Kommentar