Обновление сюжета Flot с 2 сериями в реальном времени - PullRequest
Новая
       33

Обновление сюжета Flot с 2 сериями в реальном времени

2 голосов
/ 05 марта 2012

Я работаю над отображением 2 временных рядов значений, используя jquery и flot.Я использую их в течение небольшого промежутка времени, и пока я придерживаюсь примеров.По сути, я адаптировал несколько примеров для извлечения из базы данных MySQL серии, используя скрипт PHP, который я включил в скрипт JQuery.Пока все отлично работает.Я хочу иметь возможность обновлять эту серию каждые несколько секунд.Это обновление не работает, и я не уверен, почему.Ниже приведен код jquery, используемый для генерации графа.Я поставил сейчас первую часть сценария. 

    $(function(){ 

  //add data source to flot. 2 datasets with same structure: data in UNIX_TIMESTAMP format, value in DECIMAL format

    <?php include 'datasource.php'; ?>;

  //declare datasets

  var datasets = {
        "temperature": {
            label: "Temperature (C)",
            data:   <?php echo json_encode($dataset1); ?>
        },
        "humidity": {
            label: "Humidity (%)",
            data:   <?php echo json_encode($dataset2); ?>
        }
    };

    //set fixed colors for each series
    var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });

    // insert checkboxes
    var choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append('&nbsp;&nbsp;<input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<label for="id' + key + '">'
                                + val.label + '</label>');
    });
    choiceContainer.find("input").click(plotAccordingToChoices);
    //define plot options
    var options = {series: { shadowSize: 0 },
              yaxis: { min: <?php echo json_encode($mintemp) ?>, max: <?php echo json_encode($maxtemp) ?> },
              xaxis: { show: true, mode: "time", timeformat: "%h:%M %d.%m.%y", labelWidth: "10"}};
    //draw plot
    function plotAccordingToChoices() {
             var data = [];
             choiceContainer.find("input:checked").each(function () {
             var key = $(this).attr("name");
             if (key && datasets[key])
                data.push(datasets[key]);
        });
        if (data.length > 0)
           $.plot($("#placeholder"), data, options);
    }
    plotAccordingToChoices();
    //define plot refresh timeout
    setInterval(plotAccordingToChoices(), 3000);})

1 Ответ

0 голосов
/ 05 марта 2012

Первый аргумент setInterval должен быть строкой: 

setInterval('plotAccordingToChoices()', 3000);

Или только имя функции (без вызова): 

setInterval(plotAccordingToChoices, 3000);

См .: https://developer.mozilla.org/en/window.setInterval

Чтобы получать обновленные данные со стороны сервера (PHP), вам также необходимо выполнять удаленные вызовы (AJAX).Вы можете использовать jQuery getScript function .

Примерно так: 

function updatePlot() {
    $.getScript('update_plot.php');
}
setInterval(updatePlot, 3000);

Затем в файле update_plot.php вы можете вернутьКод JavaScript, смешанный с PHP (как вы уже сделали): 

<?php // here some PHP code to get your data ?>
// and here some javascript code to use the data
plotAccordingToChoices(); // and finally update the plot
...