Change Equation of a Graph - Revision history

A WASSERMANN at 08:30, 3 April 2019

2019-04-03T08:30:47Z

← Older revision		Revision as of 08:30, 3 April 2019
Line 68:		Line 68:
	//a text for displaying slope's value		//a text for displaying slope's value
	// variable x coordinate variable y coordinate variable value		// variable x coordinate variable y coordinate variable value
	t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+~~(Math.round~~(p2.Y()-p3.Y(),2));}],{color:ff0000});		t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(p2.Y()-p3.Y()).toFixed(2);}],{color:ff0000});
	</source>		</source>

A WASSERMANN at 08:29, 3 April 2019

2019-04-03T08:29:43Z

← Older revision		Revision as of 08:29, 3 April 2019
Line 14:		Line 14:
	p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''}),		p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''}),
	pol = board.create('polygon', [p1,p2,p3], {}),		pol = board.create('polygon', [p1,p2,p3], {}),
	t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(~~JGX.Math.round~~(p2.Y()-p3.Y(),2));}]);		t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+((p2.Y()-p3.Y()).toFixed(2));}]);

	function doIt(){		function doIt(){

A WASSERMANN at 08:27, 3 April 2019

2019-04-03T08:27:45Z

← Older revision		Revision as of 08:27, 3 April 2019
Line 14:		Line 14:
	p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''}),		p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''}),
	pol = board.create('polygon', [p1,p2,p3], {}),		pol = board.create('polygon', [p1,p2,p3], {}),
	t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(Math.round(p2.Y()-p3.Y(),2));}]);		t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(JGX.Math.round(p2.Y()-p3.Y(),2));}]);

	function doIt(){		function doIt(){

Michael at 08:40, 21 February 2013

2013-02-21T08:40:31Z

← Older revision		Revision as of 08:40, 21 February 2013
Line 8:		Line 8:

	eval("function f(x){ return "+document.getElementById("eingabe").value+";}");		eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
	var graph = board.~~createElement~~('functiongraph', [function(x){ return f(x); }, -10, 10]),		var graph = board.create('functiongraph', [function(x){ return f(x); }, -10, 10]),
	p1 = board.~~createElement~~('glider', [0,0,graph], {style:6, name:'P'}),		p1 = board.create('glider', [0,0,graph], {style:6, name:'P'}),
	p2 = board.~~createElement~~('point', [function() { return p1.X()+1;}, function() {return p1.Y()+~~board~~.D(graph.Y)(p1.X());}], {style:1, name:''}),		p2 = board.create('point', [function() { return p1.X()+1;}, function() {return p1.Y()+JXG.Math.Numerics.D(graph.Y)(p1.X());}], {style:1, name:''}),
	l1 = board.~~createElement~~('line', [p1,p2],{}),		l1 = board.create('line', [p1,p2],{}),
	p3 = board.~~createElement~~('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''}),		p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''}),
	pol = board.~~createElement~~('polygon', [p1,p2,p3], {}),		pol = board.create('polygon', [p1,p2,p3], {}),
	t = board.~~createElement~~('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(~~board~~.round(p2.Y()-p3.Y(),2));}]);		t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(Math.round(p2.Y()-p3.Y(),2));}]);

	function doIt(){		function doIt(){
Line 48:		Line 48:
	Use f(x) for defining the Graph		Use f(x) for defining the Graph
	<source lang="javascript">		<source lang="javascript">
	graph = board.~~createElement~~('functiongraph', [function(x){ return f(x); },-10, 10]);		graph = board.create('functiongraph', [function(x){ return f(x); },-10, 10]);
	</source>		</source>

Line 54:		Line 54:
	<source lang="javascript">		<source lang="javascript">
	//glider on the curve		//glider on the curve
	p1 = board.~~createElement~~('glider', [0,0,graph], {style:6, name:'P'});		p1 = board.create('glider', [0,0,graph], {style:6, name:'P'});
	//define the derivative of f		//define the derivative of f
	g = ~~board~~.D(f);		g = JXG.Math.Numerics.D(f);
	//a point on the tangent		//a point on the tangent
	// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()		// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()
	p2 = board.~~createElement~~('point', [function() { return p1.X()+1;}, function() {return p1.Y()+~~board~~.D(graph.Y)(p1.X());}], {style:1, name:''});		p2 = board.create('point', [function() { return p1.X()+1;}, function() {return p1.Y()+JXG.Math.Numerics.D(graph.Y)(p1.X());}], {style:1, name:''});
	//the tangent		//the tangent
	l1 = board.~~createElement~~('line', [p1,p2],{});		l1 = board.create('line', [p1,p2],{});
	//a third point fpr the slope triangle		//a third point fpr the slope triangle
	p3 = board.~~createElement~~('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});		p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
	//the slope triangle		//the slope triangle
	pol = board.~~createElement~~('polygon', [p1,p2,p3], {});		pol = board.create('polygon', [p1,p2,p3], {});
	//a text for displaying slope's value		//a text for displaying slope's value
	// variable x coordinate variable y coordinate variable value		// variable x coordinate variable y coordinate variable value
	t = board.~~createElement~~('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(~~board~~.round(p2.Y()-p3.Y(),2));}],{color:ff0000});		t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(Math.round(p2.Y()-p3.Y(),2));}],{color:ff0000});
	</source>		</source>

Michael at 12:34, 7 June 2011

2011-06-07T12:34:28Z

← Older revision		Revision as of 12:34, 7 June 2011
Line 36:		Line 36:

	=== JavaScript Part ===		=== JavaScript Part ===
	~~'''~~Setting up the board~~'''~~		Setting up the board
	<source lang="javascript">		<source lang="javascript">
	board = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: ~~250, originY: 250, unitX: 40, unitY: 20});~~		board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-6, 12, 8, -6], axis: true});
	~~// Axes~~
	~~b1axisx = board.createElement('axis', [~~[0,0], [1,0]], ~~{});~~
	~~b1axisy = board.createElement('~~axis~~', [[0,0], [0,1]], {~~});
	</source>		</source>

	~~'''~~Create a JavaScript Function f(x) From the Text Field~~'''~~		Create a JavaScript Function f(x) From the Text Field
	<source lang="javascript">		<source lang="javascript">
	eval("function f(x){ return "+document.getElementById("eingabe").value+";}");		eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
	</source>		</source>

	~~'''~~Use f(x) for defining the Graph~~'''~~		Use f(x) for defining the Graph
	<source lang="javascript">		<source lang="javascript">
	graph = board.createElement('functiongraph', [function(x){ return f(x); },-10, 10]);		graph = board.createElement('functiongraph', [function(x){ return f(x); },-10, 10]);
	</source>		</source>

	~~'''Define Further Elements'''~~		The slope triangle
	<source lang="javascript">		<source lang="javascript">
	//glider on the curve		//glider on the curve
Line 74:		Line 71:
	</source>		</source>

	~~'''Define JavaScript Function doIt() for Reacting on User Input'''~~		Change the plotted function
	<source lang="javascript">		<source lang="javascript">
	function doIt(){		function doIt(){

Michael at 12:29, 7 June 2011

2011-06-07T12:29:23Z

← Older revision		Revision as of 12:29, 7 June 2011
Line 1:		Line 1:
	This example shows how you can change the equation of a graph without creating the whole construction again. ~~Dependend~~ elements are updated automatically.		This example shows how you can change the equation of a graph without creating the whole construction again. Dependent elements are updated automatically.
	<html>		<html><br />
	~~<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />~~
	<~~script type="text~~/~~javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>~~
	~~<div style="width:960px">~~
	~~<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>~~
	<p>
	<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">		<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
	<input type="button" value="set" onClick="doIt()" style='margin:1em'>		<input type="button" value="set" onClick="doIt()" style='margin:1em'>
	</p>		</html>
	<~~/div>~~		<jsxgraph width="600" height="400" box="jxgbox">
	~~<div id~~="~~debug~~" ~~style~~="~~display:none;~~"~~></div>~~		var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-6, 12, 8, -6], axis: true});
	~~<script type~~="~~text/javascript~~">
	~~/* <![CDATA[ */~~

	board = JXG.JSXGraph.initBoard('jxgbox', {~~originX: 250, originY: 250, unitX: 40, unitY~~: ~~20});~~
	~~b1axisx = board.createElement('axis', [~~[0,0], [1,0]], ~~{});~~
	~~b1axisy = board.createElement('~~axis~~', [[0,0], [0,1]], {~~});

	eval("function f(x){ return "+document.getElementById("eingabe").value+";}");		eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
	graph = board.createElement('functiongraph', [function(x){ return f(x); }, -10, 10]);		var graph = board.createElement('functiongraph', [function(x){ return f(x); }, -10, 10]),
	p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});		p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'}),
	p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.D(graph.Y)(p1.X());}], {style:1, name:''});		p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.D(graph.Y)(p1.X());}], {style:1, name:''}),
	l1 = board.createElement('line', [p1,p2],{});		l1 = board.createElement('line', [p1,p2],{}),
	p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});		p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''}),
	pol = board.createElement('polygon', [p1,p2,p3], {});		pol = board.createElement('polygon', [p1,p2,p3], {}),
	t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]);		t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]);

	function doIt(){		function doIt(){
	eval("function f(x){ return "+document.getElementById("eingabe").value+";}");		eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
	graph.Y = function(x){ return f(x); };		graph.Y = function(x){ return f(x); };
	graph.updateCurve();		graph.updateCurve();
	board.update();		board.update();
	}		}
			</jsxgraph>
	~~/* ]]> */~~
	~~</script>~~
	</~~html~~>

Matthias at 06:39, 3 December 2009

2009-12-03T06:39:24Z

← Older revision		Revision as of 06:39, 3 December 2009
Line 1:		Line 1:
	This example shows how you can change the equation of a graph without creating the whole construction again. Dependend elements are updated automatically.		This example shows how you can change the equation of a graph without creating the whole construction again. Dependend elements are updated automatically.
	~~<math>\int{x} dx</math>~~
	<html>		<html>
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />

A WASSERMANN at 15:21, 29 October 2009

2009-10-29T15:21:44Z

← Older revision		Revision as of 15:21, 29 October 2009
Line 3:		Line 3:
	<html>		<html>
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>~~
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div style="width:960px">		<div style="width:960px">

A WASSERMANN at 11:27, 10 March 2009

2009-03-10T11:27:18Z

← Older revision		Revision as of 11:27, 10 March 2009
Line 21:		Line 21:

	eval("function f(x){ return "+document.getElementById("eingabe").value+";}");		eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
	graph = board.createElement('functiongraph', [function(x){ return f(x); }, -10, 0]);		graph = board.createElement('functiongraph', [function(x){ return f(x); }, -10, 10]);
	p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});		p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});
	p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.D(graph.Y)(p1.X());}], {style:1, name:''});		p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.D(graph.Y)(p1.X());}], {style:1, name:''});

A WASSERMANN at 11:26, 10 March 2009

2009-03-10T11:26:57Z

← Older revision		Revision as of 11:26, 10 March 2009
Line 21:		Line 21:

	eval("function f(x){ return "+document.getElementById("eingabe").value+";}");		eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
	graph = board.createElement('~~curve~~', [~~"x",~~ function(x){ return f(x); }~~, "x"~~, -10, 10]~~,{curveType:'plot'}~~);		graph = board.createElement('functiongraph', [function(x){ return f(x); }, -10, 0]);
	~~//graph = eval("board.createElement('curve', ['x', function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])",{curveType:'plot'});~~
	p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});		p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});
	p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.D(graph.Y)(p1.X());}], {style:1, name:''});		p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.D(graph.Y)(p1.X());}], {style:1, name:''});
Line 68:		Line 67:
	'''Use f(x) for defining the Graph'''		'''Use f(x) for defining the Graph'''
	<source lang="javascript">		<source lang="javascript">
	graph = board.createElement('~~curve~~', [~~"x",~~ function(x){ return f(x); }~~, "x"~~, -10, 10]~~,{curveType:'plot'}~~);		graph = board.createElement('functiongraph', [function(x){ return f(x); },-10, 10]);
	</source>		</source>