Building MySQL Real Time Data
I have the following code that gets values from a database and makes a simple line graph (UTC time). It works fine while static, but now I want to get the data in real time (just to check it, for example, get every item every 2 seconds, i.e. 2000 miliseconds). Here's the code that works in a static way:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM data";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<table><tr><th>User</th><th>Zulu</th><th>Server Time</th><th>Sample</th><th>Response Time</th></tr>";
// output data of each row
$dataset1 = array();
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row[""]. "</td><td>" . $row[""]. "</td><td>" . $row[""]. "</td><td>" . $row[""]. "</td><td>" . $row[""]. "</td></tr>";
$dataset1[] = array(floatval($row[""]),intval($row[""]));
}
echo "</table>";
} else {
echo "0 results";
}
$conn->close();
?>
As we can see, the data is stored in the $ dataset1 variable and then I just have a simple script that shows it:
<script>
//put array into javascript variable
var dataset1 = <?php echo json_encode($dataset1); ?>;
var data = [
{
data: dataset1,
}
];
var options = {
};
$(function () {
$.plot($("#placeholder"), data,options);
});
</script>
My question is: How can I "play" with this $ dataset1 to PLOT it every 2000ms?
And this is what I get:
source to share
If you want it every 2 seconds you should use .setTimeout () as .setInterval () might not be accurate.
You may need to tweek this to get the values for each call to the getData function. The best way would be to store them somehow in the element passed to the function.
I need you to post your HTML if you want me to check this and create a JS FIDDLE for it.
(function($){
$(function(){ //document.ready
});
(function getData(element){
var xval = xval ? xval : 0;
var yVal1 = Math.floor(Math.random()*11);
var yVal2 = Math.floor(Math.random()*11);
var datum1 = [xVal, yVal1];
var datum2 = [xVal, yVal2];
var data = data ? data : [[],[]];
var plot = $.plot(element, data);
data[0].push(datum1);
data[1].push(datum2);
if(data[0].length>10){
data[0] = data[0].splice(1);
data[1] = data[1].splice(1);
}
xVal++;
plot.setData(data);
plot.setupGrid();
plot.draw();
}
setTimeout(function(){
getData(element);
}, 2000);
})($('#chart4'));
})(jQuery);
source to share