Difference between revisions of "Real-time graphing"

From JSXGraph Wiki
Jump to: navigation, search
Line 19: Line 19:
 
     turt.penUp().moveTo([0,i]).penDown().forward(30);
 
     turt.penUp().moveTo([0,i]).penDown().forward(30);
 
}
 
}
 
  
 
fetchData = function() {
 
fetchData = function() {
Line 61: Line 60:
 
<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]});
 +
 +
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() {
 
fetchData = function() {
Line 72: Line 79:
 
                 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.createElement('curve', [xdata,ydata],{strokeWidth:3, strokeColor:'yellow'});  
 
                 }  
 
                 }  
 
                 brd.update();
 
                 brd.update();

Revision as of 10:42, 18 December 2009

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]});

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

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

Start();

The PHP code of fakesensor.php

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