View source for Real-time graphing

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

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

turt = brd.createElement('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;
                document.getElementById('debug').innerHTML = t+'_'+x.length+'_'+y.length;
                a = parseFloat(t);
                if (xdat.length<30) {
                    xdat.push(xdat.length);
                } else {
                    ydat.splice(0,1);
                }
                ydat.push(a);
                if (!g) {                   // If the curve does not exist yet, create it.
                    g = brd.createElement('curve', [xdat,ydat],{strokeWidth:3, strokeColor:'yellow'}); 
                } 
                brd.update();
            };
    }});
};

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

Start();
</jsxgraph>
<html><div id="debug"></div></html>

===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">
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,1000);  // Start the periodical update
};

Start();
</source>
===The PHP code of fakesensor.php===
<source lang="php">
<?php
   echo mt_rand(0,20);
?>
</source>

[[Category:Examples]]
[[Category:Charts]]