Как оживить график Flot через AJAX?

Question

[Антон]

Имеется такой код для библиотеки Flot под jQuery:

$(function() {
    var updateInterval = 1000;
    var data = [
        [1, 10],
        [2, 20],
        [3, 30]
    ];
    var dataset = [{
        label: "line1",
        data: data
    }];
    var options = {
        series: {
            shadowSize: 0 // Drawing is faster without shadows
        },
        yaxis: {
            min: -50,
            max: 50
        },
        xaxis: {
            show: false
        }
    };

    var plot = $.plot("#placeholder", dataset, options);

    function update() {
        plot.setData(dataset);
        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();
});

Кто-нибудь может подсказать, как изменить код так, чтобы переменная data для dataset обновлялась через AJAX с заданного URL?

Answer 1

[Slava Kryvel]

$(function() {
    var updateInterval = 1000;
    var dataset = [{
        label: "line1",
        data: data
    }];
    var options = {
        series: {
            shadowSize: 0 // Drawing is faster without shadows
        },
        yaxis: {
            min: -50,
            max: 50
        },
        xaxis: {
            show: false
        }
    };

    var plot = $.plot("#placeholder", dataset, options);

    function update() {
        var ajax_data = null;
        $.ajax({
            url: "test.html",
            success: function(data){
                ajax_data = data;
            }
        });
        dataset = [{
            label: "line1",
            data: ajax_data
        }];
    
        plot.setData(dataset);
        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();
});

Comments

[Антон]

Как-то так вроде вернее будет:

$(function() {
    var updateInterval = 1000;
    var options = {
        series: {
            shadowSize: 0
        },
        yaxis: {
            min: -50,
            max: 50
        },
        xaxis: {
            show: false
        }
    };
    var url = document.getElementById("id").innerText
    function update() {
        $.ajax({
            url: "http://127.0.0.1:8000/api/monitoring/" + url + ".json",
            type: "GET",
            dataType: "json",
            success: function(series) {
                data = [series];
                $.plot("#placeholder", data, options);
            }
        });

        setTimeout(update, updateInterval);
    }

    update();
});