Difference between revisions of "Real-time graphing"

From JSXGraph Wiki
Jump to: navigation, search
 
(28 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
   <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>
 +
  <style>
 +
    #jxgbox {
 +
      background-color:black;
 +
    }
 +
  </style>
 
</html>
 
</html>
<jsxgraph width="700" height="400">
+
This little script shows how to graph the data from a sensor in a web browser.
 +
Using AJAX, the web browser retrieves once per second data from the web server by calling the script ''fakesensor.php''.
 +
 
 +
Beware that in order to simplify the handling of AJAX we use the additional library [http://www.prototypejs.org/ prototype.js] in this example.
 +
 
 +
Here, ''fakesensor.php'' just returns a random number, but one can image that real sensor data can be accessed similarly.
 +
<jsxgraph width="647" height="400">
 
var brd, g,  
 
var brd, g,  
     x = [], y = [];
+
     xdata = [], ydata = [],
 +
    turt,i;
  
 
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,20,30,-2]});
 
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,20,30,-2]});
 +
 +
// Draw the additional lines
 +
turt = brd.create('turtle',[],{strokecolor:'#999999'});
 +
turt.hideTurtle().right(90);
 +
for (i=5;i<=15;i+=5) {
 +
    turt.penUp().moveTo([0,i]).penDown().forward(30);
 +
}
  
 
fetchData = function() {
 
fetchData = function() {
Line 15: Line 34:
 
                 t = transport.responseText;
 
                 t = transport.responseText;
 
                 a = parseFloat(t);
 
                 a = parseFloat(t);
                 if (x.length<30) {
+
                 if (xdata.length<30) {
                     x.push(x.length);
+
                     xdata.push(xdata.length);
 
                 } else {
 
                 } else {
                     y.splice(0,1);
+
                     ydata.splice(0,1);
 
                 }
 
                 }
                 y.push(a);
+
                 ydata.push(a);
 
                 if (!g) {                  // If the curve does not exist yet, create it.
 
                 if (!g) {                  // If the curve does not exist yet, create it.
                     g = brd.createElement('curve', [x,y],{strokeWidth:3, strokeColor:'green'});  
+
                     g = brd.create('curve', [xdata,ydata],{strokeWidth:3, strokeColor:'yellow'});  
 
                 }  
 
                 }  
 
                 brd.update();
 
                 brd.update();
Line 28: Line 47:
 
     }});
 
     }});
 
};
 
};
 
+
setInterval(fetchData,1000);  // Start the periodical update
Start = function() {
 
    periodical = setInterval(fetchData,500);  // Start the periodical update
 
};
 
 
 
Start();
 
 
</jsxgraph>
 
</jsxgraph>
  
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
 +
<source lang="html4strict">
 +
  <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
 +
  <style>
 +
    #jxgbox {
 +
      background-color:black;
 +
    }
 +
  </style>
 +
</source>
 +
 
<source lang="javascript">
 
<source lang="javascript">
 
var brd, g,  
 
var brd, g,  
     x = [], y = [];
+
     xdata = [], ydata = [],
 +
    turt,i;
  
 
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,20,30,-2]});
 
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,20,30,-2]});
 +
 +
// Draw the additional lines
 +
turt = brd.create('turtle',[],{strokecolor:'#999999'});
 +
turt.hideTurtle().right(90);
 +
for (i=5;i<=15;i+=5) {
 +
    turt.penUp().moveTo([0,i]).penDown().forward(30);
 +
}
 +
  
 
fetchData = function() {
 
fetchData = function() {
Line 50: Line 82:
 
                 t = transport.responseText;
 
                 t = transport.responseText;
 
                 a = parseFloat(t);
 
                 a = parseFloat(t);
                 if (x.length<30) {
+
                 if (xdata.length<30) {        
                     x.push(x.length);
+
                     xdata.push(xdata.length); // add data to the x-coordinates, if the right border has not been reached, yet
 
                 } else {
 
                 } else {
                     y.splice(0,1);
+
                     ydata.splice(0,1);       // remove the oldest entry of the y-coordinates, to make the graph move.
 
                 }
 
                 }
                 y.push(a);
+
                 ydata.push(a);
 
                 if (!g) {                  // If the curve does not exist yet, create it.
 
                 if (!g) {                  // If the curve does not exist yet, create it.
                     g = brd.createElement('curve', [x,y],{strokeWidth:3, strokeColor:'green'});  
+
                     g = brd.create('curve', [xdata,ydata],{strokeWidth:3, strokeColor:'yellow'});  
 
                 }  
 
                 }  
 
                 brd.update();
 
                 brd.update();
Line 63: Line 95:
 
     }});
 
     }});
 
};
 
};
 
+
setInterval(fetchData,1000);  // Start the periodical update
Start = function() {
 
    periodical = setInterval(fetchData,500);  // Start the periodical update
 
};
 
 
 
Start();
 
 
</source>
 
</source>
 
===The PHP code of fakesensor.php===
 
===The PHP code of fakesensor.php===

Latest revision as of 10:52, 13 March 2017

This little script shows how to graph the data from a sensor in a web browser. Using AJAX, the web browser retrieves once per second data from the web server by calling the script fakesensor.php.

Beware that in order to simplify the handling of AJAX we use the additional library prototype.js in this example.

Here, fakesensor.php just returns a random number, but one can image that real sensor data can be accessed similarly.

The underlying JavaScript code

  <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
  <style>
    #jxgbox {
       background-color:black;
    }
  </style>
var brd, g, 
    xdata = [], ydata = [],
    turt,i;

brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,20,30,-2]});

// Draw the additional lines
turt = brd.create('turtle',[],{strokecolor:'#999999'});
turt.hideTurtle().right(90);
for (i=5;i<=15;i+=5) {
    turt.penUp().moveTo([0,i]).penDown().forward(30);
}


fetchData = function() {
    new Ajax.Request('/ajax/fakesensor.php', {
        onComplete: function(transport) {
            var t, a;
            if (200 == transport.status) {
                t = transport.responseText;
                a = parseFloat(t);
                if (xdata.length<30) {          
                    xdata.push(xdata.length); // add data to the x-coordinates, if the right border has not been reached, yet
                } else {
                    ydata.splice(0,1);        // remove the oldest entry of the y-coordinates, to make the graph move.
                }
                ydata.push(a);
                if (!g) {                   // If the curve does not exist yet, create it.
                    g = brd.create('curve', [xdata,ydata],{strokeWidth:3, strokeColor:'yellow'}); 
                } 
                brd.update();
            };
    }});
};
setInterval(fetchData,1000);  // Start the periodical update

The PHP code of fakesensor.php

<?php
   echo mt_rand(0,20);
?>