Difference between revisions of "Data plot of live data via AJAX"

From JSXGraph Wiki
Jump to navigationJump to search
Line 71: Line 71:
 
</html>
 
</html>
  
 +
=== The JavaScript code of the client ===
 
<source lang="javascript">
 
<source lang="javascript">
 +
        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);
 +
            }
 +
        }
 +
       
 +
       
 
</source>
 
</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:Examples]]

Revision as of 16:41, 2 December 2008

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;