更新Flot plot with 2 series in realtime

我正在使用jquery和flot來顯示2個時間序列的值。我正在使用他們一段時間，現在我堅持這些例子。基本上我調整了幾個例子，使用PHP腳本從MySQL數據庫中提取系列文件，這些腳本包含在JQuery腳本中。所有的工作都很好。我希望能夠每隔幾秒刷新一次該系列。此刷新似乎不起作用，我不知道爲什麼。 Bellow是用於生成圖形的jquery代碼。我現在把腳本的一部分。更新Flot plot with 2 series in realtime

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

來源

2012-03-05 pacosino

的第一個參數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

來源

2012-03-05 14:39:15

你是對。在我的腳本中我已經使用了（），結果仍然是一樣的。問題可能出在PHP腳本在JQuery中實例化，因爲就像調用PHP腳本沒有刷新一樣。但我不確定如何強制PHP腳本刷新它的數據。 – pacosino 2012-03-05 15:16:50

我已經更新了我的答案。往上看。 – 2012-03-05 15:26:17

我也嘗試把所有情節放在不同的PHP文件中，並嵌入到DIV中，然後使用DIV加載該文件的AJAX刷新。這會給我整個DIV的更新，包括傳奇和網格，並且它看起來不錯，因爲DIV開始閃爍，變白，然後重新繪製自己。我想讓它工作，因爲它在數據從數學函數中自動生成數據的flot示例中工作，只是在我的情況下，數據是從MySQL中的最新值中獲取的。 – pacosino 2012-03-05 18:56:08

更新Flot plot with 2 series in realtime

回答

相關問題