Data plot of live data via AJAX

Beware that in order to simplify the handling of AJAX we use the additional library prototype.js in this example.

Statistics:

The JavaScript code of the client

brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,30,70,-5], axis:true});
var graph1,graph2,graph3,graph4,graph5;
var periodical;

function doIt() {
  new Ajax.Request('/ajax/ajaxserv.php', {
    onComplete: function(transport) {
      if (200 == transport.status) {
        var t = transport.responseText;
        var a = t.split(';');
        var x = [];
        var y = [];
        for (var i=0;i<a.length-1;i++) { // The last array entry is empty
          var b = a[i].split(',');
          x[i]=b[0]*1.0;  
          y[i]=b[1]*1.0;
        }
        var m = JXG.Math.Statistics.mean(y);
        var sd = JXG.Math.Statistics.sd(y);
        var med = JXG.Math.Statistics.median(y);
        if (!graph1) { 
          graph1 = brd.create('curve', [x,y],{strokeWidth:3}); 
          graph2 = brd.create('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'}); 
          graph3 = brd.create('curve', [[x[0],x[x.length-1]],[m+sd,m+sd]], {strokecolor:'red',dash:2}); 
          graph4 = brd.create('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2}); 
          graph5 = brd.create('curve', [[x[0],x[x.length-1]],[med,med]], {strokecolor:'red',dash:1}); 
        } else {
          graph1.dataX = x;                    graph1.dataY = y;
          graph2.dataX = [x[0],x[x.length-1]]; graph2.dataY = [m,m];
          graph3.dataX = [x[0],x[x.length-1]]; graph3.dataY = [m+sd,m+sd];
          graph4.dataX = [x[0],x[x.length-1]]; graph4.dataY = [m-sd,m-sd];
          graph5.dataX = [x[0],x[x.length-1]]; graph5.dataY = [med,med];
        }
        brd.update();
        document.getElementById('output').innerHTML = 'Statistics:<br>'+ 'Mean value=' + brd.round(m,2)+<br>Median=' + brd.round(med,2)+'<br>Sd='+brd.round(sd,2);
      };
    }
  });
};
        
function Start() {
  periodical = setInterval(doIt,1000);
};

function Stop() {
  if (periodical) {
    clearInterval(periodical);
  }
};

The PHP code of the server (ajaxserv.php)

$t = "";
for ($i=0;$i<70;$i++) {
    $x = $i;
    $y = mt_rand(0,20);
    $t .= $x.','.$y.';';
}
echo $t;