Data plot of live data via AJAX: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
Beware that in order to simplify the handling of AJAX we use the additional library [http://www.prototypejs.org/ prototype.js] in this example.
<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="https://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="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
   <form>
   <form>
     <input type="button" value="Start" onClick="Start()">  
     <input type="button" value="Start" onClick="Start()">  
Line 10: Line 12:
   <p id='output'>Statistics:<br></p>
   <p id='output'>Statistics:<br></p>
<script language="JavaScript">
<script language="JavaScript">
        brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, unitX: 10, unitY: 10, axis:true});
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,30,70,-5], axis:true});
        var graph1,graph2,graph3,graph4,graph5;
var graph1,graph2,graph3,graph4,graph5;
        var periodical;
var periodical;


        function doIt() {
function doIt() {
            new Ajax.Request('/~alfred/jsxgraph/branches/0.70/examples/ajaxserv.php', {
  new Ajax.Request('/ajax/ajaxserv.php', {
                onComplete: function(transport) {
    onComplete: function(transport) {
                    if (200 == transport.status) {
      if (200 == transport.status) {
                        var t = transport.responseText;
        var t = transport.responseText;
                        var a = t.split(';');
        var a = t.split(';');
                        var x = [];
        var x = [];
                        var y = [];
        var y = [];
                        for (var i=0;i<a.length-1;i++) { // The last array entry is empty
        for (var i=0;i<a.length-1;i++) { // The last array entry is empty
                            var b = a[i].split(',');
          var b = a[i].split(',');
                            x[i]=b[0]*1.0;   
          x[i]=b[0]*1.0;   
                            y[i]=b[1]*1.0;
          y[i]=b[1]*1.0;
                        }
        }
                        var m = brd.mathStatistics.mean(y);
        var m = JXG.Math.Statistics.mean(y);
                        var sd = brd.mathStatistics.sd(y);
        var sd = JXG.Math.Statistics.sd(y);
                        var med = brd.mathStatistics.median(y);
        var med = JXG.Math.Statistics.median(y);
                        if (!graph1) {  
        if (!graph1) {  
                            graph1 = brd.createElement('curve', [x,y],{strokeWidth:3});  
          graph1 = brd.create('curve', [x,y],{strokeWidth:3});  
                            graph2 = brd.createElement('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'});  
          graph2 = brd.create('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});  
          graph3 = brd.create('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});  
          graph4 = brd.create('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});  
          graph5 = brd.create('curve', [[x[0],x[x.length-1]],[med,med]], {strokecolor:'red',dash:1});  
                        } else {
        } else {
                            graph1.dataX = x;                    graph1.dataY = y;
          graph1.dataX = x;                    graph1.dataY = y;
                            graph2.dataX = [x[0],x[x.length-1]]; graph2.dataY = [m,m];
          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];
          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];
          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];
          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);
                       
                    };
                }});
         }
         }
        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() {
function Start() {
            periodical = setInterval(doIt,1000);
  periodical = setInterval(doIt,1000);
        }
};
        function Stop() {
 
            if (periodical) {
function Stop() {
                clearInterval(periodical);
  if (periodical) {
            }
    clearInterval(periodical);
        }
  }
};
          
          
</script>
</script>
Line 65: Line 67:
=== The JavaScript code of the client ===
=== 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, axis:true});
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,30,70,-5], axis:true});
        var graph1,graph2,graph3,graph4,graph5;
var graph1,graph2,graph3,graph4,graph5;
        var periodical;
var periodical;


        function doIt() {
function doIt() {
            new Ajax.Request('ajaxserv.php', {
  new Ajax.Request('/ajax/ajaxserv.php', {
                onComplete: function(transport) {
    onComplete: function(transport) {
                    if (200 == transport.status) {
      if (200 == transport.status) {
                        var t = transport.responseText;
        var t = transport.responseText;
                        var a = t.split(';');
        var a = t.split(';');
                        var x = [];
        var x = [];
                        var y = [];
        var y = [];
                        for (var i=0;i<a.length-1;i++) { // The last array entry is empty
        for (var i=0;i<a.length-1;i++) { // The last array entry is empty
                            var b = a[i].split(',');
          var b = a[i].split(',');
                            x[i]=b[0]*1.0;   
          x[i]=b[0]*1.0;   
                            y[i]=b[1]*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);
                       
                    };
                }});
         }
         }
          
         var m = JXG.Math.Statistics.mean(y);
         function Start() {
         var sd = JXG.Math.Statistics.sd(y);
            periodical = setInterval(doIt,1000);
        var med = JXG.Math.Statistics.median(y);
        }
        if (!graph1) {  
        function Stop() {
          graph1 = brd.create('curve', [x,y],{strokeWidth:3});  
            if (periodical) {
          graph2 = brd.create('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'});
                clearInterval(periodical);
          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);
  }
};
</source>
</source>


Line 131: Line 131:


[[Category:Examples]]
[[Category:Examples]]
[[Category:Statistics]]

Latest revision as of 08:12, 1 March 2017

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