Curve - Revision history

A WASSERMANN at 08:11, 7 December 2022

2022-12-07T08:11:02Z

← Older revision		Revision as of 08:11, 7 December 2022
Line 14:		Line 14:
	</jsxgraph>		</jsxgraph>

	As input data a ~~curve~~ needs 5 parameters:		As input data a function graph needs between 1 and 3 parameters:
	* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.		* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.
	<source lang="javascript">		<source lang="javascript">

Michael at 13:14, 7 June 2011

2011-06-07T13:14:02Z

← Older revision		Revision as of 13:14, 7 June 2011
Line 6:		Line 6:

	= Function graph=		= Function graph=
	First, we initialize the board ~~and set~~ axes:		First, we initialize the board with axes:
	<source lang="javascript">		<source lang="javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: ~~200, originY: 200~~, ~~unitX: 20~~, ~~unitY:~~ 20~~});~~		var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 20, -10], axis: true});
	~~axisx = b.create('axis', [[0,0], [1~~,0]], ~~{name:"x", withLabel:true});~~
	~~axisy = b.create('~~axis~~', [[0,0], [0,1]], {name:"y", withLabel~~:true});
	</source>		</source>
	<jsxgraph width="600" height="400">		<jsxgraph width="600" height="400">
	var b = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: ~~200, originY: 200~~, ~~unitX: 20~~, ~~unitY:~~ 20~~});~~		var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 20, -10], axis: true});
	~~axisx = b.create('axis', [[0,0], [1~~,0]], ~~{name:"x", withLabel:true});~~
	~~axisy = b.create('~~axis~~', [[0,0], [0,1]], {name:"y", withLabel~~:true});
	</jsxgraph>		</jsxgraph>

Line 34:		Line 30:
	</source>		</source>
	<jsxgraph width="600" height="400" box="jxgbox2">		<jsxgraph width="600" height="400" box="jxgbox2">
	var b2 = JXG.JSXGraph.initBoard('jxgbox2', {~~originX~~: ~~200~~, ~~originY: 200~~, ~~unitX:~~ 20, ~~unitY: 20});~~		var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-10, 10, 20, -10], axis: true});
	~~axisx = b2.create('axis', [[0,0~~], ~~[1,0]], {});~~
	~~axisy = b2.create('~~axis~~', [[0,0], [0,1]], {~~});
	b2.create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]);		b2.create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]);
	</jsxgraph>		</jsxgraph>
Line 43:		Line 37:
	The terms for the x-component and for the y-component can also depend on another element. This can be a JSXGraph element, but it can also be the value of a DOM element. Here, we show the sine curve sin(x) multiplied by the x-component of the point "A".		The terms for the x-component and for the y-component can also depend on another element. This can be a JSXGraph element, but it can also be the value of a DOM element. Here, we show the sine curve sin(x) multiplied by the x-component of the point "A".
	<source lang="javascript">		<source lang="javascript">
	p = b.create('point',[1,1],{~~style~~:6,name:'A'});		p = b.create('point',[1,1],{size:4,name:'A'});
	b.create('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});		b.create('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});
	</source>		</source>
	<jsxgraph width="600" height="400" box="jxgbox4">		<jsxgraph width="600" height="400" box="jxgbox4">
	var b4 = JXG.JSXGraph.initBoard('jxgbox4', {~~originX~~: ~~200~~, ~~originY: 200~~, ~~unitX:~~ 20, ~~unitY: 20});~~		var b4 = JXG.JSXGraph.initBoard('jxgbox4', {boundingbox: [-10, 10, 20, -10], axis: true});
	~~axisx = b4.create('axis', [[0,0], [1,0]~~], ~~{});~~		p = b4.create('point',[1,4],{size:4,name:'A'});
	~~axisy = b4.create('~~axis~~', [[0,0], [0,1]], {~~});
	p = b4.create('point',[1,4],{~~style~~:6,name:'A'});
	b4.create('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});		b4.create('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});
	</jsxgraph>		</jsxgraph>
Line 57:		Line 49:
	If the first component of the input data consists of an data array, the curveType is set to "plot". The second parameter (the y-component) can be a data array, but it also can be a function term.		If the first component of the input data consists of an data array, the curveType is set to "plot". The second parameter (the y-component) can be a data array, but it also can be a function term.
	<source lang="javascript">		<source lang="javascript">
	p = b.create('point',[1,4],{~~style~~:6,name:'A'});		p = b.create('point',[1,4],{size:4,name:'A'});
	var dataX = [1,2,3,4,5,6,7,8];		var dataX = [1,2,3,4,5,6,7,8];
	var dataY = [0.3,4.0,-1,2.3,7,9,8,9];		var dataY = [0.3,4.0,-1,2.3,7,9,8,9];
Line 65:		Line 57:

	<jsxgraph width="600" height="400" box="jxgbox3">		<jsxgraph width="600" height="400" box="jxgbox3">
	var b3 = JXG.JSXGraph.initBoard('jxgbox3', {~~originX~~: ~~200~~, ~~originY: 200~~, ~~unitX:~~ 20, ~~unitY: 20});~~		var b3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-10, 10, 20, -10], axis: true});
	~~axisx = b3.create('axis', [[0,0], [1,0]~~], ~~{});~~		var p3 = b3.create('point',[1,4],{size:4,name:'A'});
	~~axisy = b3.create('~~axis~~', [[0,0], [0,1]], {~~});
	var p3 = b3.create('point',[1,4],{~~style~~:6,name:'A'});
	var dataX = [-3,1,2,3,4,5,6,7,10,12];		var dataX = [-3,1,2,3,4,5,6,7,10,12];
	var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];		var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];

A WASSERMANN at 10:20, 12 September 2010

2010-09-12T10:20:54Z

← Older revision		Revision as of 10:20, 12 September 2010
Line 76:		Line 76:

	[[Category:Examples]]		[[Category:Examples]]
			[[Category:Curves]]

A WASSERMANN at 10:20, 12 September 2010

2010-09-12T10:20:25Z

← Older revision		Revision as of 10:20, 12 September 2010
Line 9:		Line 9:
	<source lang="javascript">		<source lang="javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});
	axisx = b.create('axis', [[0,0], [1,0]], {});		axisx = b.create('axis', [[0,0], [1,0]], {name:"x", withLabel:true});
	axisy = b.create('axis', [[0,0], [0,1]], {});		axisy = b.create('axis', [[0,0], [0,1]], {name:"y", withLabel:true});
	</source>		</source>
	<jsxgraph width="600" height="400">		<jsxgraph width="600" height="400">

A WASSERMANN at 10:18, 12 September 2010

2010-09-12T10:18:00Z

← Older revision		Revision as of 10:18, 12 September 2010
Line 15:		Line 15:
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});
	axisx = b.create('axis', [[0,0], [1,0]], {name:"x", withLabel:true});		axisx = b.create('axis', [[0,0], [1,0]], {name:"x", withLabel:true});
	axisy = b.create('axis', [[0,0], [0,1]], {~~namy~~:"y", withLabel:true});		axisy = b.create('axis', [[0,0], [0,1]], {name:"y", withLabel:true});
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 10:17, 12 September 2010

2010-09-12T10:17:20Z

← Older revision		Revision as of 10:17, 12 September 2010
Line 14:		Line 14:
	<jsxgraph width="600" height="400">		<jsxgraph width="600" height="400">
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});
	axisx = b.create('axis', [[0,0], [1,0]], {name:"x"});		axisx = b.create('axis', [[0,0], [1,0]], {name:"x", withLabel:true});
	axisy = b.create('axis', [[0,0], [0,1]], {namy:"y"});		axisy = b.create('axis', [[0,0], [0,1]], {namy:"y", withLabel:true});
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 10:16, 12 September 2010

2010-09-12T10:16:58Z

← Older revision		Revision as of 10:16, 12 September 2010
Line 14:		Line 14:
	<jsxgraph width="600" height="400">		<jsxgraph width="600" height="400">
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});
	axisx = b.create('axis', [[0,0], [1,0]], {});		axisx = b.create('axis', [[0,0], [1,0]], {name:"x"});
	axisy = b.create('axis', [[0,0], [0,1]], {});		axisy = b.create('axis', [[0,0], [0,1]], {namy:"y"});
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 10:16, 12 September 2010

2010-09-12T10:16:18Z

← Older revision		Revision as of 10:16, 12 September 2010
Line 14:		Line 14:
	<jsxgraph width="600" height="400">		<jsxgraph width="600" height="400">
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});
	axisx = b.~~createElement~~('axis', [[0,0], [1,0]], {});		axisx = b.create('axis', [[0,0], [1,0]], {});
	axisy = b.~~createElement~~('axis', [[0,0], [0,1]], {});		axisy = b.create('axis', [[0,0], [0,1]], {});
	</jsxgraph>		</jsxgraph>

Line 21:		Line 21:
	* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.		* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.
	<source lang="javascript">		<source lang="javascript">
	~~createElement~~('functiongraph', [function(x){return Math.sin(x);}, ...		create('functiongraph', [function(x){return Math.sin(x);}, ...
	</source>		</source>
	* The last two parameters are optional and can contain constants or functions which determine the interval of the x-component in which the graph is shown.		* The last two parameters are optional and can contain constants or functions which determine the interval of the x-component in which the graph is shown.
	If these parameters are not given, the graph is plotted from the left border to the right border.		If these parameters are not given, the graph is plotted from the left border to the right border.
	<source lang="javascript">		<source lang="javascript">
	~~createElement~~('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]		create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]
	</source>		</source>

	Together, the code looks like this:		Together, the code looks like this:
	<source lang="javascript">		<source lang="javascript">
	b.~~createElement~~('functiongraph', [function(x){return Math.sin(x);},-Math.PI,2*Math.PI]);		b.create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,2*Math.PI]);
	</source>		</source>
	<jsxgraph width="600" height="400" box="jxgbox2">		<jsxgraph width="600" height="400" box="jxgbox2">
	var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20});		var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20});
	axisx = b2.~~createElement~~('axis', [[0,0], [1,0]], {});		axisx = b2.create('axis', [[0,0], [1,0]], {});
	axisy = b2.~~createElement~~('axis', [[0,0], [0,1]], {});		axisy = b2.create('axis', [[0,0], [0,1]], {});
	b2.~~createElement~~('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]);		b2.create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]);
	</jsxgraph>		</jsxgraph>

Line 43:		Line 43:
	The terms for the x-component and for the y-component can also depend on another element. This can be a JSXGraph element, but it can also be the value of a DOM element. Here, we show the sine curve sin(x) multiplied by the x-component of the point "A".		The terms for the x-component and for the y-component can also depend on another element. This can be a JSXGraph element, but it can also be the value of a DOM element. Here, we show the sine curve sin(x) multiplied by the x-component of the point "A".
	<source lang="javascript">		<source lang="javascript">
	p = b.~~createLement~~('point',[1,1],{style:6,name:'A'});		p = b.create('point',[1,1],{style:6,name:'A'});
	b.~~createElement~~('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});		b.create('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});
	</source>		</source>
	<jsxgraph width="600" height="400" box="jxgbox4">		<jsxgraph width="600" height="400" box="jxgbox4">
	var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20});		var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20});
	axisx = b4.~~createElement~~('axis', [[0,0], [1,0]], {});		axisx = b4.create('axis', [[0,0], [1,0]], {});
	axisy = b4.~~createElement~~('axis', [[0,0], [0,1]], {});		axisy = b4.create('axis', [[0,0], [0,1]], {});
	p = b4.~~createElement~~('point',[1,4],{style:6,name:'A'});		p = b4.create('point',[1,4],{style:6,name:'A'});
	b4.~~createElement~~('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});		b4.create('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});
	</jsxgraph>		</jsxgraph>

Line 57:		Line 57:
	If the first component of the input data consists of an data array, the curveType is set to "plot". The second parameter (the y-component) can be a data array, but it also can be a function term.		If the first component of the input data consists of an data array, the curveType is set to "plot". The second parameter (the y-component) can be a data array, but it also can be a function term.
	<source lang="javascript">		<source lang="javascript">
	p = b.~~createElement~~('point',[1,4],{style:6,name:'A'});		p = b.create('point',[1,4],{style:6,name:'A'});
	var dataX = [1,2,3,4,5,6,7,8];		var dataX = [1,2,3,4,5,6,7,8];
	var dataY = [0.3,4.0,-1,2.3,7,9,8,9];		var dataY = [0.3,4.0,-1,2.3,7,9,8,9];
	b.~~createElement~~('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});		b.create('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});
	b.~~createElement~~('curve', [dataX,function(x){ return p.X()Math.sin(x)x;}],{strokeColor:'blue',strokeWidth:3,dash:1});		b.create('curve', [dataX,function(x){ return p.X()Math.sin(x)x;}],{strokeColor:'blue',strokeWidth:3,dash:1});
	</source>		</source>

	<jsxgraph width="600" height="400" box="jxgbox3">		<jsxgraph width="600" height="400" box="jxgbox3">
	var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20});		var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20});
	axisx = b3.~~createElement~~('axis', [[0,0], [1,0]], {});		axisx = b3.create('axis', [[0,0], [1,0]], {});
	axisy = b3.~~createElement~~('axis', [[0,0], [0,1]], {});		axisy = b3.create('axis', [[0,0], [0,1]], {});
	var p3 = b3.~~createElement~~('point',[1,4],{style:6,name:'A'});		var p3 = b3.create('point',[1,4],{style:6,name:'A'});
	var dataX = [-3,1,2,3,4,5,6,7,10,12];		var dataX = [-3,1,2,3,4,5,6,7,10,12];
	var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];		var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];
	b3.~~createElement~~('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});		b3.create('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});
	b3.~~createElement~~('curve', [dataX,function(x){ return p3.X()Math.sin(x)x;}],{strokeColor:'blue',strokeWidth:3,dash:1});		b3.create('curve', [dataX,function(x){ return p3.X()Math.sin(x)x;}],{strokeColor:'blue',strokeWidth:3,dash:1});
	</jsxgraph>		</jsxgraph>

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

A WASSERMANN: /* Plotting data - curveType:'plot' */

2010-09-12T10:14:42Z

Plotting data - curveType:'plot'

← Older revision		Revision as of 10:14, 12 September 2010
Line 65:		Line 65:

	<jsxgraph width="600" height="400" box="jxgbox3">		<jsxgraph width="600" height="400" box="jxgbox3">
	var b3 = JXG.JSXGraph.initBoard('~~jxgbox4~~', {originX: 200, originY: 200, unitX: 20, unitY: 20});		var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20});
	axisx = b3.createElement('axis', [[0,0], [1,0]], {});		axisx = b3.createElement('axis', [[0,0], [1,0]], {});
	axisy = b3.createElement('axis', [[0,0], [0,1]], {});		axisy = b3.createElement('axis', [[0,0], [0,1]], {});

A WASSERMANN at 10:13, 12 September 2010

2010-09-12T10:13:52Z

← Older revision		Revision as of 10:13, 12 September 2010
Line 38:		Line 38:
	axisy = b2.createElement('axis', [[0,0], [0,1]], {});		axisy = b2.createElement('axis', [[0,0], [0,1]], {});
	b2.createElement('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]);		b2.createElement('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]);
	</~~script~~>		</jsxgraph>
	~~</html>~~


	== Dynamic function graphs ==		== Dynamic function graphs ==