Data plot of live data via AJAX: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 11: | Line 11: | ||
<script language="JavaScript"> | <script language="JavaScript"> | ||
brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, unitX: 10, unitY: 10}); | brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, unitX: 10, unitY: 10}); | ||
b1axisx = brd.createElement('axis', [[0,0], [1,0]], { | b1axisx = brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'#000000'}); | ||
b1axisy = brd.createElement('axis', [[0,0], [0,1]], { | b1axisy = brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'#000000'}); | ||
b1axisx.ticksDelta = 5; | b1axisx.ticksDelta = 5; | ||
b1axisy.ticksDelta = 5; | b1axisy.ticksDelta = 5; |
Revision as of 11:37, 10 March 2009
Statistics:
The JavaScript code of the client
brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, unitX: 10, unitY: 10});
b1axisx = brd.createElement('axis', [[0,0], [1,0]], {ticksDelta:5, strokeColor:'#000000'});
b1axisy = brd.createElement('axis', [[0,0], [0,1]], {ticksDelta:5, strokeColor:'#000000'});
b1axisx.ticksDelta = 5;
b1axisy.ticksDelta = 5;
brd.fullUpdate = true;
brd.update();
brd.fullUpdate = false;
var graph1,graph2,graph3,graph4,graph5;
var periodical;
function doIt() {
new Ajax.Request('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 = brd.mathStatistics.mean(y);
var sd = brd.mathStatistics.sd(y);
var med = brd.mathStatistics.median(y);
if (!graph1) {
graph1 = brd.createElement('curve', [x,y],{strokeWidth:3});
graph2 = brd.createElement('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'});
graph3 = brd.createElement('curve', [[x[0],x[x.length-1]],[m+sd,m+sd]], {strokecolor:'red',dash:2});
graph4 = brd.createElement('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2});
graph5 = brd.createElement('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();
$('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;