View source for Data plot of live data via AJAX

Beware that in order to simplify the handling of AJAX we use the additional library [http://www.prototypejs.org/ prototype.js] in this example.

<html>
<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
  <form>
    <input type="button" value="Start" onClick="Start()"> 
    <input type="button" value="Stop" onClick="Stop()"> 
  </form>
<div id="jxgbox" class="jxgbox" style="width:700px; height:400px;"></div>
  <p id='output'>Statistics:<br></p>
<script language="JavaScript">
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);
  }
};
        
</script>
</html>

=== The JavaScript code of the client ===
<source lang="javascript">
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);
  }
};
</source>

=== The PHP code of the server (ajaxserv.php) ===
<source lang="php">
$t = "";
for ($i=0;$i<70;$i++) {
    $x = $i;
    $y = mt_rand(0,20);
    $t .= $x.','.$y.';';
}
echo $t;

</source>

[[Category:Examples]]
[[Category:Statistics]]