flot graph on a timer

我想讓我的flot圖表按照設定的時間間隔更新它的數據。我一直無法找到任何內置的功能，所以我打算按照每次間隔到期時重新繪製圖表的方式做一些事情。傳遞給flot的數據參數是唯一會改變的值。數據變量使用ajax請求填充到返回json的服務器方法。flot graph on a timer

我吠叫正確的樹還是有更好的方法呢？另外，你如何實例化一個計時器（最好是，我可以通過回調來處理Ajax請求和FLOT重繪）在JavaScript/jQuery中？

編輯 - 現在實現如下：

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

請注意，我有一個ASP.Net MVC控制器的（幾乎）由海軍報所需要的格式返回JSON：

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

來源

2009-08-24 grenade

如果您問兩個不同的問題，請在兩個單獨的問題中詢問他們。 – 2009-08-24 16:40:46

你的方法聽起來像是正確的做法。這只是一個問題，正如你所問，編寫非flot的JavaScript定期重繪圖。

JQuery有nice timer plugin。

來源

2009-08-24 16:46:51

flot graph on a timer

回答

相關問題