Update Flot plot with 2 series in realtime - php

Question

I'm working on displaying 2 time series of values using jquery and flot. I'm using them for a small period of time and for now I'm sticking to the examples. Basically I adapted several examples to extract from MySQL database the series using a PHP script that I include in the JQuery script. All works fine this far. I wish to be able to refresh this series every several seconds. This refresh doesn't seem to work and I'm not sure why. Bellow is the jquery code used to generate the graph. I put now part one of the script.
$(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(' <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);})

Answer 1

The first argument to setInterval should to be a string:
setInterval('plotAccordingToChoices()', 3000);
Or only the function name (not calling it):
setInterval(plotAccordingToChoices, 3000);
See: https://developer.mozilla.org/en/window.setInterval
To get updated data from the server-side (PHP), you also need to do remote calls (AJAX). You may use jQuery getScript function.
Something like this:
function updatePlot() {
$.getScript('update_plot.php');
}
setInterval(updatePlot, 3000);
Then, in your update_plot.php file, you can return JavaScript code mixed with PHP (just like you already did):
<?php // here some PHP code to get your data ?>
// and here some javascript code to use the data
plotAccordingToChoices(); // and finally update the plot