graphe de flot sur une minuterie

Question

Je veux que mon graphique de flot pour mettre à jour ses données sur les intervalles définis. J'ai été incapable de trouver une fonctionnalité intégrée qui fait cela, donc j'ai l'intention de faire quelque chose dans le sens de redessiner le graphique chaque fois qu'un intervalle expire. Le paramètre de données transmis à flot est la seule valeur qui va changer. La variable de données est remplie à l'aide d'une requête ajax à une méthode de serveur qui renvoie json. Est-ce que j'aboie le bon arbre ou y a-t-il une meilleure façon de le faire?

De même, comment pouvez-vous instancier un temporisateur (de préférence, avec un rappel que je peux passer pour gérer la requête ajax et refaire le flot) dans javascript/jquery?

EDIT - maintenant mis en œuvre comme ci-dessous:

$(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); 
}); 

Notez que j'ai un contrôleur ASP.Net MVC qui retourne dans JSON (presque) le format requis par Flot:

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

Votre approche semble être la bonne façon de le faire. C'est juste une question de, comme vous le demandez, écrire le javascript non-flot pour périodiquement redessiner le graphique.

JQuery a un nice timer plugin.