Difference between revisions of "Real-time graphing"

From JSXGraph Wiki
Jump to: navigation, search
Line 4: Line 4:
 
<jsxgraph width="700" height="400">
 
<jsxgraph width="700" height="400">
 
var brd, g,  
 
var brd, g,  
     x = [],
+
     x = [], y = [];
    y = [];
 
  
 
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,20,30,-2]});
 
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,20,30,-2]});
Line 22: Line 21:
 
                 }
 
                 }
 
                 y.push(a);
 
                 y.push(a);
                 if (!g) {  
+
                 if (!g) {                   // If the curve does not exist yet, create it.
 
                     g = brd.createElement('curve', [x,y],{strokeWidth:3, strokeColor:'green'});  
 
                     g = brd.createElement('curve', [x,y],{strokeWidth:3, strokeColor:'green'});  
 +
                }
 +
                brd.update();
 +
            };
 +
    }});
 +
};
 +
 +
Start = function() {
 +
    periodical = setInterval(fetchData,500);  // Start the periodical update
 +
};
 +
 +
Start();
 +
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
<source lang="javascript">
 +
var brd, g,
 +
    x = [], y = [];
 +
 +
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[0,20,30,-2]});
 +
 +
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 (x.length<30) {
 +
                    x.push(x.length);
 
                 } else {
 
                 } else {
                     //g.dataY = y;
+
                     y.splice(0,1);
 
                 }
 
                 }
 +
                y.push(a);
 +
                if (!g) {                  // If the curve does not exist yet, create it.
 +
                    g = brd.createElement('curve', [x,y],{strokeWidth:3, strokeColor:'green'});
 +
                }
 
                 brd.update();
 
                 brd.update();
 
             };
 
             };
Line 37: Line 69:
  
 
Start();
 
Start();
</jsxgraph>
+
</source>
 +
===The PHP code of fakesensor.php===
 +
<source lang="php">
 +
<?php
 +
  echo mt_rand(0,20);
 +
?>
 +
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Charts]]
 
[[Category:Charts]]

Revision as of 10:15, 18 December 2009

The underlying JavaScript code

var brd, g, 
    x = [], y = [];

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

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 (x.length<30) {
                    x.push(x.length);
                } else {
                    y.splice(0,1);
                }
                y.push(a);
                if (!g) {                   // If the curve does not exist yet, create it.
                    g = brd.createElement('curve', [x,y],{strokeWidth:3, strokeColor:'green'}); 
                } 
                brd.update();
            };
    }});
};

Start = function() {
    periodical = setInterval(fetchData,500);  // Start the periodical update
};

Start();

The PHP code of fakesensor.php

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