Data plot of live data via AJAX
From JSXGraph Wiki
Jump to navigationJump to searchBeware 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;