2009-08-24 6 views
0

フロートグラフを設定した間隔でデータを更新したい。私はこれを行う組み込みの機能を見つけることができませんでしたので、間隔が切れるたびにグラフを再描画する行に沿って何かを行うつもりです。 flotに渡されるデータパラメータは、変更される唯一の値です。データ変数は、jsonを返すサーバーメソッドにajax要求を使用して設定されます。タイマーの浮動グラフ

私は正しいツリーを樹立していますか、これを行うには良い方法がありますか?

また、どうやって(私はajaxリクエストとflot redrawを処理するために渡すことができるコールバックで)javascript/jqueryのタイマーをインスタンス化するのですか?

EDIT - 今、以下のように実装:

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; } 
} 
+0

2つの異なる質問をする場合は、2つの別々の質問で質問してください。 –

答えて

2

あなたのアプローチ:私はFLOTが必要とする(ほとんど)フォーマットでJSONを返すASP.Net MVCコントローラを持って

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

注意これを行う正しい方法のように聞こえる。あなたが尋ねるように、定期的にグラフを再描画するために、non-flot javascriptを書くだけです。

JQueryにはnice timer pluginがあります。