Flot-Grafik auf einem Timer

Question

Ich möchte mein flot-Diagramm aktualisieren seine Daten in festgelegten Intervallen. Ich konnte keine eingebaute Funktionalität finden, die dies tut, also beabsichtige ich etwas zu tun, um das Diagramm jedes Mal neu zu zeichnen, wenn ein Intervall abläuft. Der Datenparameter, der an flot übergeben wird, ist der einzige Wert, der sich ändert. Die Datenvariable wird mit einer Ajax-Anforderung an eine Servermethode gefüllt, die json zurückgibt.

Banne ich den richtigen Baum oder gibt es einen besseren Weg?

Wie auch Instanziieren Sie einen Timer (vorzugsweise mit einem Rückruf, den ich weitergeben kann, um die Ajax-Anfrage und Flot Redraw zu behandeln) in Javascript/jquery?

EDIT - Nun, wie unten ausgeführt:

$(document).ready(function() { 
    var options = { xaxis: { mode: 'time' } }; 
    var i = window.setInterval(function() { 
     $.getJSON('<%= Url.Action("SomeAction", "SomeController") %>', {}, function(jsonData) { 
      var graphData = new Array(); 
      $.each(jsonData, function(i, series) { 
       graphData[i] = { label: series.label, data: new Array() }; 
       $.each(series.data, function(j, point) { graphData[i].data[j] = [point.date, point.value]; }); 
      }); 
      var plot = $.plot($('#FlotPlot'), graphData, options); 
     }); 
    }, 1500); 
}); 

Bitte beachte, dass ich eine ASP.Net MVC-Controller, die json in (fast) das Format von flicht benötigt zurückgibt:

public class SomeController : Controller { 
    public ActionResult SomeAction() { 
     return Json(new Models.FlotGraph(...).Items); 
    } 
} 

public class FlotGraph { 
    public FlotGraph(...) { 
     List<FlotSeries> items = new List<FlotSeries>(); 
     ... 
     Items = items.ToArray(); 
    } 
    public FlotSeries[] Items { get; private set; } 
} 

public class FlotSeries { 
    internal FlotSeries(string label, IEnumerable<FlotPoint> data) { 
     this.label = label; 
     this.data = data.ToArray(); 
    } 
    public string label { get; private set; } 
    public FlotPoint[] data { get; private set; } 
} 
public class FlotPoint { 
    internal FlotPoint(DateTime date, float value) { 
     this.date = (date - new DateTime(1970, 1, 1, 0, 0, 0, 0).ToLocalTime()).TotalSeconds; 
     this.value = value; 
    } 
    public double date { get; private set; } 
    public float value { get; private set; } 
} 

Answer 1

Ihr Ansatz klingt wie der richtige Weg dies zu tun. Es ist nur eine Frage von, wie Sie fragen, das Nicht-Flot-Javascript zu schreiben, um das Diagramm regelmäßig neu zu zeichnen.

JQuery hat eine nice timer plugin.