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.

0,0

–o+←↓↑→

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.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;