Real-time graphing: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
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 08: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);
?>