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 3: | Line 3: | ||
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script> | <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script> | ||
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | ||
<form> | <form> | ||
<input type="button" value="Start" onClick="Start()"> | <input type="button" value="Start" onClick="Start()"> | ||
<input type="button" value="Stop" onClick="Stop()"> | <input type="button" value="Stop" onClick="Stop()"> | ||
</form> | </form> | ||
<div id="jxgbox" class="jxgbox" style="width:700px; height:400px;"></div> | |||
<p id='output'>Statistics:<br></p> | <p id='output'>Statistics:<br></p> | ||
<script language="JavaScript"> | <script language="JavaScript"> |
Revision as of 11:38, 10 March 2009
Statistics:
The JavaScript code of the client
brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, unitX: 10, unitY: 10, axis:true});
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;