Real-time graphing - Revision history

A WASSERMANN at 09:52, 13 March 2017

2017-03-13T09:52:59Z

← Older revision		Revision as of 09:52, 13 March 2017
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>		<style>
	#jxgbox {		#jxgbox {

A WASSERMANN at 08:46, 3 June 2010

2010-06-03T08:46:31Z

← Older revision		Revision as of 08:46, 3 June 2010
Line 10:		Line 10:
	Using AJAX, the web browser retrieves once per second data from the web server by calling the script ''fakesensor.php''.		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 [www.prototypejs.org/ prototype.js] in this example.		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.		Here, ''fakesensor.php'' just returns a random number, but one can image that real sensor data can be accessed similarly.

A WASSERMANN at 08:46, 3 June 2010

2010-06-03T08:46:01Z

← Older revision		Revision as of 08:46, 3 June 2010
Line 10:		Line 10:
	Using AJAX, the web browser retrieves once per second data from the web server by calling the script ''fakesensor.php''.		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 "[www.prototypejs.org/ prototype.js]" in this example.		Beware that in order to simplify the handling of AJAX we use the additional library [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.		Here, ''fakesensor.php'' just returns a random number, but one can image that real sensor data can be accessed similarly.

A WASSERMANN at 08:45, 3 June 2010

2010-06-03T08:45:33Z

← Older revision		Revision as of 08:45, 3 June 2010
Line 9:		Line 9:
	This little script shows how to graph the data from a sensor in a web browser.		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''.		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 "[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.		Here, ''fakesensor.php'' just returns a random number, but one can image that real sensor data can be accessed similarly.

A WASSERMANN at 08:09, 15 May 2010

2010-05-15T08:09:28Z

← Older revision		Revision as of 08:09, 15 May 2010
Line 18:		Line 18:
	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'});		// Draw the additional lines
			turt = brd.create('turtle',[],{strokecolor:'#999999'});
	turt.hideTurtle().right(90);		turt.hideTurtle().right(90);
	for (i=5;i<=15;i+=5) {		for (i=5;i<=15;i+=5) {
Line 38:		Line 39:
	ydata.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', [xdata,ydata],{strokeWidth:3, strokeColor:'yellow'});		g = brd.create('curve', [xdata,ydata],{strokeWidth:3, strokeColor:'yellow'});
	}		}
	brd.update();		brd.update();
Line 64:		Line 65:
	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'});		// Draw the additional lines
			turt = brd.create('turtle',[],{strokecolor:'#999999'});
	turt.hideTurtle().right(90);		turt.hideTurtle().right(90);
	for (i=5;i<=15;i+=5) {		for (i=5;i<=15;i+=5) {
Line 85:		Line 87:
	ydata.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', [xdata,ydata],{strokeWidth:3, strokeColor:'yellow'});		g = brd.create('curve', [xdata,ydata],{strokeWidth:3, strokeColor:'yellow'});
	}		}
	brd.update();		brd.update();

A WASSERMANN at 08:07, 15 May 2010

2010-05-15T08:07:16Z

← Older revision		Revision as of 08:07, 15 May 2010
Line 9:		Line 9:
	This little script shows how to graph the data from a sensor in a web browser.		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''.		Using AJAX, the web browser retrieves once per second data from the web server by calling the script ''fakesensor.php''.
	~~In this example~~ just a random number ~~is produced on server side~~.
			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">		<jsxgraph width="647" height="400">
	var brd, g,		var brd, g,

A WASSERMANN at 08:05, 15 May 2010

2010-05-15T08:05:48Z

← Older revision		Revision as of 08:05, 15 May 2010
Line 7:		Line 7:
	</style>		</style>
	</html>		</html>
			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''.
			In this example just a random number is produced on server side.
	<jsxgraph width="647" height="400">		<jsxgraph width="647" height="400">
	var brd, g,		var brd, g,

A WASSERMANN at 14:00, 21 December 2009

2009-12-21T14:00:47Z

← Older revision		Revision as of 14:00, 21 December 2009
Line 7:		Line 7:
	</style>		</style>
	</html>		</html>
	<jsxgraph width="~~700~~" height="400">		<jsxgraph width="647" height="400">
	var brd, g,		var brd, g,
	xdata = [], ydata = [],		xdata = [], ydata = [],

A WASSERMANN at 09:06, 18 December 2009

2009-12-18T09:06:48Z

← Older revision		Revision as of 09:06, 18 December 2009
Line 40:		Line 40:
	}});		}});
	};		};
			setInterval(fetchData,1000); // Start the periodical update
	~~Start = function() {~~
	~~periodical =~~ setInterval(fetchData,1000); // Start the periodical update
	};

	~~Start();~~
	</jsxgraph>		</jsxgraph>

Line 92:		Line 87:
	}});		}});
	};		};
			setInterval(fetchData,1000); // Start the periodical update
	~~Start = function() {~~
	~~periodical =~~ setInterval(fetchData,1000); // Start the periodical update
	};

	~~Start();~~
	</source>		</source>
	===The PHP code of fakesensor.php===		===The PHP code of fakesensor.php===

A WASSERMANN at 08:50, 18 December 2009

2009-12-18T08:50:33Z

← Older revision		Revision as of 08:50, 18 December 2009
Line 79:		Line 79:
	t = transport.responseText;		t = transport.responseText;
	a = parseFloat(t);		a = parseFloat(t);
	if (xdata.length<30) {		if (xdata.length<30) {
	xdata.push(xdata.length);		xdata.push(xdata.length); // add data to the x-coordinates, if the right border has not been reached, yet
	} else {		} else {
	ydata.splice(0,1);		ydata.splice(0,1); // remove the oldest entry of the y-coordinates, to make the graph move.
	}		}
	ydata.push(a);		ydata.push(a);