график на таймере - PullRequest
Новая
       10

график на таймере

0 голосов
/ 24 августа 2009

Я хочу, чтобы мой флот-график обновлял данные через заданные интервалы. Мне не удалось найти какой-либо встроенной функциональности, которая делает это, поэтому я намерен что-то делать по линии перерисовки графика каждый раз, когда истекает интервал. Параметр данных, передаваемый в flot, является единственным значением, которое изменится. Переменная data заполняется с помощью ajax-запроса к методу сервера, который возвращает json.

Я лаю на правильное дерево или есть лучший способ сделать это?

Кроме того, как создать экземпляр таймера (предпочтительно с обратным вызовом, который я могу передать для обработки запроса 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 в (почти) формате, необходимом для 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; }
}

1 Ответ

2 голосов
/ 24 августа 2009

Ваш подход звучит как правильный способ сделать это. Как вы просите, это просто написание неплотного javascript для периодической перерисовки графика.

JQuery имеет красивый таймер плагин .

...