Returning MySQL table values from PHP script to Javascript function - Live Graphing

Question

I have been searching similar problems for hours but with no avail.

I am using Highcharts to update a graph every 3 seconds with the last entry of a specific MySQL table. I am using the example Javascript code as a guide. Here is the snippet of code I am concerned with

var chart;
$('#container').highcharts({
  chart: {
    type: 'spline',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,
    events: {
      load: function() {
        // set up the updating of the chart every 3 seconds
        var series = this.series[0];
        setInterval(function() {
          var x = (new Date()).getTime(), // current time - adjust to align with data vals
              y = getyval();
          series.addPoint([x, y], true, true);
        }, 3000);

...where the function getyval() uses $.get():

function getyval(){
  $.get('testget.php', function(output){
    alert(parseFloat(output));
  });
};

My testget.php file:

<?php
session_start();
$db = $_SESSION['monitorId'];
$table = $_SESSION['tableId'];
$split_table = explode("_", $table);
$param = $split_table[1];

$dbcon = mysqli_connect("localhost","root","",$db);
$query = "SELECT * FROM ".$table." ORDER BY datetime DESC LIMIT 1";
$lastentry = mysqli_query($dbcon, $query) or die('error reading table');
$row = mysqli_fetch_array($lastentry, MYSQLI_ASSOC);
$yval = $row[$param];
echo $yval;    
?>

This works all well and good at "alerting" the last value every 3 seconds but when I try to assign the variable y to this result, it does not work. For example, if I change the getyval() function to:

function getyval(){
  $.get('testget.php', function(output){
    return parseFloat(output);
  });
};

Thanks in advance!

Answer 1

If you use just return, it'll return from anonymous function, not from getyval(). Second problem is that getyval() is asynchronous (you'll not receive value just after calling). You have to call that function earlier, save its result somewhere and then use it.

var yValue = null;
function getyval(){
    $.get('testget.php', function(output){
      yValue = parseFloat(output);
    });
 };

Answer 2

AJAX methods like $.get are asynchronous, meaning the script doesn't wait for them to finish. The function you passed to $.get can return something, but it kind of gets dumped into the bit bucket - there's nowhere useful to return it to.

Your code needs a little bit of a redesign to take full advantage of being asynchronous. Change the function inside setInterval to this:

setInterval(function() {
  // current time - adjust to align with data vals
  var x = (new Date()).getTime();
  // we need to do this in here so `function(result)` can use `x`
  $.get('testget.php', function(result) {
  // this gets run when the result is received
    var y = parseFloat(result);
    series.addPoint([x, y], true, true);
  });
}, 3000);

The work is now done when $.get gets its result and invokes its function, which is whenever your PHP runs.

(You might be worried that the async stuff will mean data points might be received out-of-order. That won't happen - you're specifying the x-coordinate manually, and each time the outer function is run a new x is created. Every y will be paired with its matching x.)