https://jsxgraph.org/wiki/api.php?action=feedcontributions&feedformat=atom&user=132.180.198.9JSXGraph Wiki - User contributions [en]2026-04-06T21:44:00ZUser contributionsMediaWiki 1.43.1https://jsxgraph.org/wiki/index.php?title=Main_Page&diff=261Main Page2008-10-13T17:13:17Z<p>132.180.198.9: Undo revision 260 by 132.180.198.9 (Talk)</p>
<hr />
<div>== JSXGraph Wiki ==<br />
Welcome to the JSXGraph Wiki. This Wiki provides information and examples about the use of JSXGraph. <br />
<br />
* [[Howto include JSXGraph into web pages]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Displaying Intergeo constructions]]<br />
* [[Create your own constructions/visualizations using JavaScript]]<br />
** [[Point]]<br />
** [[Line]]<br />
** [[Curve]]<br />
* [[Advanced constructions]]<br />
* [[Contributions]]<br />
<br />
To learn more about creating constructions with JSXGraph from the scratch visit the the examples category: [[:Category:Examples]]<br />
<br />
[http://jsxgraph.org Homepage of the JSXGraph project]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Main_Page&diff=260Main Page2008-10-13T17:12:24Z<p>132.180.198.9: /* JSXGraph Wiki */</p>
<hr />
<div>== JSXGraph Wiki ==<br />
Welcome to the JSXGraph Wiki. This Wiki provides information and examples about the use of JSXGraph. <br />
<br />
* [[Howto include JSXGraph into web pages]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Displaying Intergeo constructions]]<br />
* [[Create your own constructions/visualizations with JSXGraph]]<br />
** [[Point]]<br />
** [[Line]]<br />
** [[Curve]]<br />
* [[Advanced constructions]]<br />
* [[Contributions]]<br />
<br />
To learn more about creating constructions with JSXGraph from the scratch visit the the examples category: [[:Category:Examples]]<br />
<br />
[http://jsxgraph.org Homepage of the JSXGraph project]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=259Curve2008-09-19T11:31:51Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
<br />
== Dynamic function plots ==<br />
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".<br />
<source lang="javascript"><br />
p = b.createLement('point',[1,1],{style:6,name:'A'});<br />
b.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox4" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b4.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b4.createElement('axis', [[0,1], [0,0]], {});<br />
p = b4.createElement('point',[1,4],{style:6,name:'A'});<br />
b4.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:1});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first component of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
p = b3.createElement('point',[1,4],{style:6,name:'A'});<br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b.createElement('curve', [dataX,'X(A)*Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
b3.createElement('point',[1,4],{style:6,name:'A'});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'X(A)*Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html><br />
<br />
[[Category:Examples]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=258Curve2008-09-19T11:28:24Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
<br />
== Dynamic function plots ==<br />
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".<br />
<source lang="javascript"><br />
p = b.createLement('point',[1,1],{style:6,name:'A'});<br />
b.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox4" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b4.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b4.createElement('axis', [[0,1], [0,0]], {});<br />
p = b4.createElement('point',[1,4],{style:6,name:'A'});<br />
b4.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:1});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
p = b3.createElement('point',[1,4],{style:6,name:'A'});<br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b.createElement('curve', [dataX,'X(A)*Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
b3.createElement('point',[1,4],{style:6,name:'A'});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'X(A)*Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html><br />
<br />
[[Category:Examples]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=257Curve2008-09-19T11:27:36Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
<br />
== Dynamic function plots ==<br />
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".<br />
<source lang="javascript"><br />
p = b.createLement('point',[1,1],{style:6,name:'A'});<br />
b.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox4" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b4.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b4.createElement('axis', [[0,1], [0,0]], {});<br />
p = b4.createElement('point',[1,4],{style:6,name:'A'});<br />
b4.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:1});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
p = b3.createElement('point',[1,4],{style:6,name:'A'});<br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b.createElement('curve', [dataX,'X(A)*Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
p = b3.createElement('point',[1,4],{style:6,name:'A'});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'X(A)*Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html><br />
<br />
[[Category:Examples]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=256Curve2008-09-19T11:26:09Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
<br />
== Dynamic function plots ==<br />
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) mutiplied by the x-component of the point "A".<br />
<source lang="javascript"><br />
p = b.createLement('point',[1,1],{style:6,name:'A'});<br />
b.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox4" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b4.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b4.createElement('axis', [[0,1], [0,0]], {});<br />
p = b4.createElement('point',[1,4],{style:6,name:'A'});<br />
b4.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:1});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html><br />
<br />
[[Category:Examples]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=255Curve2008-09-19T09:33:11Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
<br />
== Dynamic function plots ==<br />
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) mutiplied by the x-component of the point "A".<br />
<source lang="javascript"><br />
p = b.createLement('point',[1,1],{style:6,name:'A'});<br />
b.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox4" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b4.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b4.createElement('axis', [[0,1], [0,0]], {});<br />
p = b4.createElement('point',[1,4],{style:6,name:'A'});<br />
b4.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:1});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html><br />
<br />
[[Category:Examples]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Main_Page&diff=254Main Page2008-09-19T09:24:58Z<p>132.180.198.9: </p>
<hr />
<div>== JSXGraph Wiki ==<br />
Welcome to the JSXGraph Wiki. This Wiki provides information and examples about the use of JSXGraph. <br />
<br />
* [[Howto include JSXGraph into web pages]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Displaying Intergeo constructions]]<br />
* [[Create your own constructions/visualizations using JavaScript]]<br />
** [[Point]]<br />
** [[Line]]<br />
** [[Curve]]<br />
* [[Advanced constructions]]<br />
* [[Contributions]]<br />
<br />
To learn more about creating constructions with JSXGraph from the scratch visit the the examples category: [[:Category:Examples]]<br />
<br />
[http://jsxgraph.org Homepage of the JSXGraph project]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=253Curve2008-09-19T09:23:14Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
<br />
== Dynamic function plots ==<br />
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) mutiplied by the x-component of the point "A".<br />
<source lang="javascript"><br />
p = b.createLement('point',[1,1],{style:6,name:'A'});<br />
b.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox4" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b4.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b4.createElement('axis', [[0,1], [0,0]], {});<br />
p = b4.createElement('point',[1,4],{style:6,name:'A'});<br />
b4.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:1});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=252Curve2008-09-19T09:22:48Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
<br />
== Dynamic function plots ==<br />
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) mutiplied by the x-component of the point "A".<br />
<source lang="javascript"><br />
p = b.createLement('point',[1,1],{style:6,name:'A'});<br />
b.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox4" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b4.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b4.createElement('axis', [[0,1], [0,0]], {});<br />
p = b4.createElement('point',[1,4],{style:6,name:'A'});<br />
b4.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot',dash:4});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=251Curve2008-09-19T09:22:15Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
<br />
== Dynamic function plots ==<br />
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) mutiplied by the x-component of the point "A".<br />
<source lang="javascript"><br />
p = b.createLement('point',[1,1],{style:6,name:'A'});<br />
b.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox4" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b4.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b4.createElement('axis', [[0,1], [0,0]], {});<br />
p = b4.createElement('point',[1,1],{style:6,name:'A'});<br />
b4.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=250Curve2008-09-19T09:21:43Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
<br />
== Dynamic function plots ==<br />
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) mutiplied by the x-component of the point "A".<br />
<source lang="javascript"><br />
p = b.createLement('point',[1,1],{style:6,name:'A'});<br />
b.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox4" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b4.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b4.createElement('axis', [[0,1], [0,0]], {});<br />
p = b4.createLement('point',[1,1],{style:6,name:'A'});<br />
b4.createElement('curve', ['x',function(x){return p.X()*Math.sin(x);},'x'],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=249Curve2008-09-19T09:12:55Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=248Curve2008-09-19T09:12:04Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
b3.createElement('curve', [dataX,'Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=247Curve2008-09-19T09:10:39Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [-3,1,2,3,4,5,6,7,10,12];<br />
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=246Curve2008-09-19T09:09:37Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY]);<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [1,2,3,4,5,6,7,10,12];<br />
var dataY = [0.3,4.0,-1,2.3,7,1.1,-2.0,4];<br />
b3.createElement('curve', [dataX,dataY]);<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=245Curve2008-09-19T09:08:43Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
= Function plotter - curveType:'plot' =<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
= Plotting data - curveType:'graph' =<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY]);<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b3.createElement('curve', [dataX,dataY]);<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=244Curve2008-09-19T09:07:42Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
== Function plotter - curveType:'plot' ==<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
==<br />
As input data a curvve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html><br />
<br />
== Plotting data - curveType:'graph' ==<br />
If the first componment of the input data consists of an data array, the curvveType is set to "graph". The second parameter (the y-component) can be a data array, but it also can be a function term.<br />
<source lang="javascript"><br />
var dataX = [1,2,3,4,5,6,7,8];<br />
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];<br />
b.createElement('curve', [dataX,dataY]);<br />
</source><br />
<html><br />
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b3.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b3.createElement('axis', [[0,1], [0,0]], {});<br />
b3.createElement('curve', [dataX,dataY]);<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=243Curve2008-09-19T09:01:49Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
== Function plotter - curveType:'plot' ==<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curvve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=242Curve2008-09-19T09:00:50Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
== Function plotter - curveType:'plot' ==<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As input data a curvve needs 5 parameters:<br />
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:<br />
<source lang="javascript"><br />
createElement('curve', ['x', ...<br />
createElement('curve', [function(x) {return x;}, ...<br />
</source><br />
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, ...<br />
</source><br />
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', ...<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...<br />
</source><br />
* 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.<br />
If these parameters are not given, the graph is plotted from the left border to the right border.<br />
<source lang="javascript"><br />
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]<br />
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', Togehter the code lokks like this:<br />
</source><br />
<br />
Together, the code looks like this:<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=241Curve2008-09-19T08:52:16Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
== Function plotter - curveType:'plot' ==<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
As an example we now plot a sine curve from -&pi; to 4&pi;.<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=240Curve2008-09-19T08:51:39Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
== Function plotter - curveType:'plot' ==<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
Now we can plot for example a sine curve from -&pi; to 4&pi;.<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'plot'});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=239Curve2008-09-19T08:51:06Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
== Function plotter - curveType:'plot' ==<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html><br />
<br />
Now we can plot for example a sine curve from -&pi; to &pi;.<br />
<source lang="javascript"><br />
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</source><br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b2.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b2.createElement('axis', [[0,1], [0,0]], {});<br />
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=238Curve2008-09-19T08:47:43Z<p>132.180.198.9: </p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
== Function plotter - curveType:'plot' ==<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Curve&diff=237Curve2008-09-19T08:47:09Z<p>132.180.198.9: New page: There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType". In many cases JSXGraph can g...</p>
<hr />
<div>There are various possibilities to display curves and plots. JSXGraph supports the following curve types which can be set by changing the property "curveType".<br />
In many cases JSXGraph can guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.<br />
* 'plot': function plotter<br />
* 'parameter': parameter curves. <br />
* 'graph': data plot<br />
* 'polar': polar curves<br />
<br />
== Function plotter - curveType:'plot' ==<br />
First, we initialize the board and set axes:<br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20}); <br />
axisx = b.createElement('axis', [[1,0], [0,0]], {});<br />
axisy = b.createElement('axis', [[0,1], [0,0]], {});<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Power_Series_for_sine_and_cosine&diff=215Power Series for sine and cosine2008-09-17T14:24:40Z<p>132.180.198.9: </p>
<hr />
<div>== Power Series for Sine ==<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox1" class="jxgbox" style="width:600px; height:300px;"></div><br />
<script language="JavaScript"><br />
// Board<br />
board1 = JXG.JSXGraph.initBoard('jxgbox1', {originX: 300, originY: 150, unitX: 50, unitY: 50});<br />
board1.suspendUpdate();<br />
// Axes and Properties<br />
board1.createElement('axis', [[1,0], [0,0]], {});<br />
board1.createElement('axis', [[0,1], [0,0]], {});<br />
//<br />
board1.createElement('curve', [function(t){ return t; }, function(t){ return Math.sin(t); }, "t", -10, 10],{strokeColor: "#cccccc"});<br />
//<br />
var s = board1.createElement('slider', [0.75,-2.5,5,0,10,0], {name:'S'});<br />
//<br />
board1.createElement('curve', [<br />
't', <br />
function(t) {<br />
var val = 0;<br />
for(var i = 0; i < Math.floor(s.X()) + 1; i++) {<br />
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / board1.factorial(2*i+1);<br />
}<br />
return val;<br />
},<br />
"t", -10, 10], {strokeColor: "#bb0000", curveType:'plot'});<br />
board1.unsuspendUpdate();<br />
/*<br />
*/ <br />
</script> <br />
</html><br />
<source lang="javascript"><br />
board1 = JXG.JSXGraph.initBoard('jxgbox1', {originX: 300, originY: 150, unitX: 50, unitY: 50});<br />
board1.suspendUpdate();<br />
board1.createElement('axis', [[1,0], [0,0]], {});<br />
board1.createElement('axis', [[0,1], [0,0]], {});<br />
board1.createElement('curve', [function(t){ return t; }, function(t){ return Math.sin(t); }, "t", -10, 10],{strokeColor: "#cccccc"});<br />
var s = board1.createElement('slider', [0.75,-2.5,5,0,10,0], {name:'S'});<br />
board1.createElement('curve', [<br />
't', <br />
function(t) {<br />
var val = 0;<br />
for(var i = 0; i < Math.floor(s.X()) + 1; i++) {<br />
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / board1.factorial(2*i+1);<br />
}<br />
return val;<br />
}, "t", -10, 10], {strokeColor: "#bb0000", curveType:'plot'});<br />
board1.unsuspendUpdate();<br />
</source><br />
<br />
== Power Series for Cosine ==<br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:300px;"></div><br />
<script language="JavaScript"><br />
// Board<br />
board2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 300, originY: 150, unitX: 50, unitY: 50});<br />
board2.suspendUpdate();<br />
// Axes and Properties<br />
board2.createElement('axis', [[1,0], [0,0]], {});<br />
board2.createElement('axis', [[0,1], [0,0]], {});<br />
//<br />
board2.createElement('curve', [function(t){ return t; }, function(t){ return Math.cos(t); }, "t", -10, 10],{strokeColor: "#cccccc"});<br />
//<br />
var s2 = board2.createElement('slider', [0.75,-2.5,5,0,10,0], {name:'T'});<br />
//<br />
board2.createElement('curve', [<br />
't', <br />
function(t) {<br />
var val = 0;<br />
for(var i = 0; i < Math.floor(s2.X()) + 1; i++) {<br />
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i) / board2.factorial(2*i);<br />
}<br />
return val;<br />
},<br />
"t", -10, 10],{strokeColor: "#009900", curveType:'plot'}); <br />
board2.unsuspendUpdate();<br />
</script><br />
</html><br />
<source lang="javascript"><br />
board2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 300, originY: 150, unitX: 50, unitY: 50});<br />
board2.suspendUpdate();<br />
board2.createElement('axis', [[1,0], [0,0]], {});<br />
board2.createElement('axis', [[0,1], [0,0]], {});<br />
board2.createElement('curve', [function(t){ return t; }, function(t){ return Math.cos(t); }, "t", -10, 10],{strokeColor: "#cccccc"});<br />
var s2 = board2.createElement('slider', [0.75,-2.5,5,0,10,0], {name:'T'});<br />
board2.createElement('curve', [<br />
't', <br />
function(t) {<br />
var val = 0;<br />
for(var i = 0; i < Math.floor(s2.X()) + 1; i++) {<br />
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i) / board2.factorial(2*i);<br />
}<br />
return val;<br />
}, "t", -10, 10],{strokeColor: "#009900", curveType:'plot'}); <br />
board2.unsuspendUpdate();<br />
</source><br />
<br />
[[Category:Examples]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Power_Series_for_sine_and_cosine&diff=214Power Series for sine and cosine2008-09-17T14:23:00Z<p>132.180.198.9: </p>
<hr />
<div>== Power Series for Sine ==<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox1" class="jxgbox" style="width:600px; height:300px;"></div><br />
<script language="JavaScript"><br />
// Board<br />
board1 = JXG.JSXGraph.initBoard('jxgbox1', {originX: 300, originY: 150, unitX: 50, unitY: 50});<br />
board1.suspendUpdate();<br />
// Axes and Properties<br />
board1.createElement('axis', [[1,0], [0,0]], {});<br />
board1.createElement('axis', [[0,1], [0,0]], {});<br />
//<br />
board1.createElement('curve', [function(t){ return t; }, function(t){ return Math.sin(t); }, "t", -10, 10],{strokeColor: "#cccccc"});<br />
//<br />
var s = board1.createElement('slider', [0.75,-2.5,5,0,10,0], {name:'S'});<br />
//<br />
board1.createElement('curve', [<br />
't', <br />
function(t) {<br />
var val = 0;<br />
for(var i = 0; i < Math.floor(s.X()) + 1; i++) {<br />
f = board1.factorial(2*i+1);<br />
// var f = 1;<br />
// var n = 1;<br />
// while (n <= 2 * i + 1) { f = f * n++; }<br />
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / f;<br />
}<br />
return val;<br />
},<br />
"t", -10, 10], {strokeColor: "#bb0000", curveType:'plot'});<br />
board1.unsuspendUpdate();<br />
/*<br />
*/ <br />
</script> <br />
</html><br />
<source lang="javascript"><br />
board1 = JXG.JSXGraph.initBoard('jxgbox1', {originX: 300, originY: 150, unitX: 50, unitY: 50});<br />
board1.suspendUpdate();<br />
board1.createElement('axis', [[1,0], [0,0]], {});<br />
board1.createElement('axis', [[0,1], [0,0]], {});<br />
board1.createElement('curve', [function(t){ return t; }, function(t){ return Math.sin(t); }, "t", -10, 10],{strokeColor: "#cccccc"});<br />
var s = board1.createElement('slider', [0.75,-2.5,5,0,10,0], {name:'S'});<br />
board1.createElement('curve', [<br />
't', <br />
function(t) {<br />
var val = 0;<br />
for(var i = 0; i < Math.floor(s.X()) + 1; i++) {<br />
var f = 1;<br />
var n = 1;<br />
while (n <= 2 * i + 1) { f = f * n++; }<br />
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / f;<br />
}<br />
return val;<br />
}, "t", -10, 10], {strokeColor: "#bb0000", curveType:'plot'});<br />
board1.unsuspendUpdate();<br />
</source><br />
<br />
== Power Series for Cosine ==<br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:600px; height:300px;"></div><br />
<script language="JavaScript"><br />
// Board<br />
board2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 300, originY: 150, unitX: 50, unitY: 50});<br />
board2.suspendUpdate();<br />
// Axes and Properties<br />
board2.createElement('axis', [[1,0], [0,0]], {});<br />
board2.createElement('axis', [[0,1], [0,0]], {});<br />
//<br />
board2.createElement('curve', [function(t){ return t; }, function(t){ return Math.cos(t); }, "t", -10, 10],{strokeColor: "#cccccc"});<br />
//<br />
var s2 = board2.createElement('slider', [0.75,-2.5,5,0,10,0], {name:'T'});<br />
//<br />
board2.createElement('curve', [<br />
't', <br />
function(t) {<br />
var val = 0;<br />
for(var i = 0; i < Math.floor(s2.X()) + 1; i++) {<br />
var f = 1;<br />
var n = 1;<br />
while (n <= 2 * i) { f = f * n++; }<br />
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i) / f;<br />
}<br />
return val;<br />
},<br />
"t", -10, 10],{strokeColor: "#009900", curveType:'plot'}); <br />
board2.unsuspendUpdate();<br />
</script><br />
</html><br />
<source lang="javascript"><br />
board2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 300, originY: 150, unitX: 50, unitY: 50});<br />
board2.suspendUpdate();<br />
board2.createElement('axis', [[1,0], [0,0]], {});<br />
board2.createElement('axis', [[0,1], [0,0]], {});<br />
board2.createElement('curve', [function(t){ return t; }, function(t){ return Math.cos(t); }, "t", -10, 10],{strokeColor: "#cccccc"});<br />
var s2 = board2.createElement('slider', [0.75,-2.5,5,0,10,0], {name:'T'});<br />
board2.createElement('curve', [<br />
't', <br />
function(t) {<br />
var val = 0;<br />
for(var i = 0; i < Math.floor(s2.X()) + 1; i++) {<br />
var f = 1;<br />
var n = 1;<br />
while (n <= 2 * i) { f = f * n++; }<br />
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i) / f;<br />
}<br />
return val;<br />
}, "t", -10, 10],{strokeColor: "#009900", curveType:'plot'}); <br />
board2.unsuspendUpdate();<br />
</source><br />
<br />
[[Category:Examples]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Hauptseite&diff=213Hauptseite2008-09-17T12:52:09Z<p>132.180.198.9: </p>
<hr />
<div>== JSXGraph Wiki ==<br />
Welcome to the [http://jsxgraph.org JSXGraph] Wiki</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Creating_geometric_elements&diff=212Creating geometric elements2008-09-17T12:38:21Z<p>132.180.198.9: </p>
<hr />
<div>Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():<br />
<source lang="javascript"><br />
board.createElement('point', [1,3], {name:'A', strokecolor:'red'}); <br />
</source><br />
Another example:<br />
<source lang="javascript"><br />
board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true}); <br />
</source><br />
The parameters of createElement() are:<br />
<source lang="javascript"><br />
board.createElement(elementType, parentElements, attributes);<br />
</source><br />
where <br />
*elementType is a string containing the type of the element which is constructed. At the moment, possible types are:<br />
**[[primitive elements]] like points and lines<br />
**[[composite elements]] like bisectors, midpoints<br />
*parentElements is an array containing the parameters which define the element. This can be parent elements like two points which define a line. It can also consist of JavaScript functions, numbers, and strings containing GEONExT syntax. The possible array elements depend on the element type.<br />
*attributes is a JavaScript object. Usually it is given in the "literal object" form<br />
<source lang="javascript"><br />
{key1:value1, key2:value2, ...}<br />
</source><br />
[[Point]] is an easy example.<br />
*Properties of a point:<br />
**style<br />
**strokeColor<br />
**strokeWidth<br />
**fillColor<br />
**highlightStrokeColor<br />
**highlightFillColor<br />
**labelColor<br />
**visible<br />
**fixed<br />
**draft<br />
**trace<br />
*Additional properties of a line:<br />
**straightFirst<br />
**straightLast<br />
There are no additional properties of a circle<br />
*Additional properties for an element:<br />
**needsRegularUpdate = [true]/false (eg axis are set to needsRegularUpdate=false) These elements are updated only, if the origin of the board is moved or after zooming<br />
*Possible parameters:<br />
<source lang="javascript"><br />
el.setProperty('key1:value1','key2:value2',...);<br />
el.setProperty([key1:value1],[key2:value2],...);<br />
el.setProperty({key1:value1, key2:value2},...);<br />
</source></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Composite_elements&diff=211Composite elements2008-09-17T12:37:10Z<p>132.180.198.9: </p>
<hr />
<div>*[[arrowparallel]]<br />
*[[bisector]]<br />
*[[circumcircle]]<br />
*[[circumcirclemidpoint]]<br />
*[[integral]]<br />
*[[midpoint]]<br />
*[[mirrorpoint]]<br />
*[[normal]]<br />
*[[parallel]]<br />
*[[parallelpoint]]<br />
*[[perpendicular]]<br />
*[[perpendicularpoint]]<br />
*[[reflection]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Composite_elements&diff=210Composite elements2008-09-17T12:36:24Z<p>132.180.198.9: New page: *arrowparallel *bisector *circumcircle *circumcirclemidpoint *integral *midpoint *mirrorpoint *normal *parallel *parallelpoint *perpendicular *perpendicularpoint *reflection</p>
<hr />
<div>*arrowparallel<br />
*bisector<br />
*circumcircle<br />
*circumcirclemidpoint<br />
*integral<br />
*midpoint<br />
*mirrorpoint<br />
*normal<br />
*parallel<br />
*parallelpoint<br />
*perpendicular<br />
*perpendicularpoint<br />
*reflection</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Creating_geometric_elements&diff=209Creating geometric elements2008-09-17T12:36:07Z<p>132.180.198.9: </p>
<hr />
<div>Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():<br />
<source lang="javascript"><br />
board.createElement('point', [1,3], {name:'A', strokecolor:'red'}); <br />
</source><br />
Another example:<br />
<source lang="javascript"><br />
board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true}); <br />
</source><br />
The parameters of createElement() are:<br />
<source lang="javascript"><br />
board.createElement(elementType, parentElements, attributes);<br />
</source><br />
where <br />
*elementType is a string containing the type of the element which is constructed. At the moment, possible types are:<br />
**[[primitive elements]] like points and lines<br />
**[[composite elements]] like bisectors, midpoints<br />
*parentElements is an array containing the parameters which define the element. This can be parent elements like two points which define a line. It can also consist of JavaScript functions, numbers, and strings containing GEONExT syntax. The possible array elements depend on the element type.<br />
*attributes is a JavaScript object. Usually it is given in the "literal object" form<br />
<source lang="javascript"><br />
{key1:value1, key2:value2, ...}<br />
</source><br />
*Properties of a point:<br />
**style<br />
**strokeColor<br />
**strokeWidth<br />
**fillColor<br />
**highlightStrokeColor<br />
**highlightFillColor<br />
**labelColor<br />
**visible<br />
**fixed<br />
**draft<br />
**trace<br />
*Additional properties of a line:<br />
**straightFirst<br />
**straightLast<br />
There are no additional properties of a circle<br />
*Additional properties for an element:<br />
**needsRegularUpdate = [true]/false (eg axis are set to needsRegularUpdate=false) These elements are updated only, if the origin of the board is moved or after zooming<br />
*Possible parameters:<br />
<source lang="javascript"><br />
el.setProperty('key1:value1','key2:value2',...);<br />
el.setProperty([key1:value1],[key2:value2],...);<br />
el.setProperty({key1:value1, key2:value2},...);<br />
</source></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Primitive_elements&diff=208Primitive elements2008-09-17T12:35:02Z<p>132.180.198.9: </p>
<hr />
<div>*[[angle]]<br />
*[[arc]]<br />
*[[arrow]]<br />
*[[circle]]<br />
*[[curve]]<br />
*[[group]]<br />
*[[line]]<br />
*[[point]]<br />
*[[polygon]]<br />
*[[sector]]<br />
*[[text]]<br />
*[[transform]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Primitive_elements&diff=207Primitive elements2008-09-17T12:34:44Z<p>132.180.198.9: New page: ***angle ***arc ***arrow ***circle ***curve ***group ***line ***point ***polygon ***sector ***text ***transform</p>
<hr />
<div>***[[angle]]<br />
***[[arc]]<br />
***[[arrow]]<br />
***[[circle]]<br />
***[[curve]]<br />
***[[group]]<br />
***[[line]]<br />
***[[point]]<br />
***[[polygon]]<br />
***[[sector]]<br />
***[[text]]<br />
***[[transform]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Creating_geometric_elements&diff=206Creating geometric elements2008-09-17T12:34:37Z<p>132.180.198.9: </p>
<hr />
<div>Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():<br />
<source lang="javascript"><br />
board.createElement('point', [1,3], {name:'A', strokecolor:'red'}); <br />
</source><br />
Another example:<br />
<source lang="javascript"><br />
board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true}); <br />
</source><br />
The parameters of createElement() are:<br />
<source lang="javascript"><br />
board.createElement(elementType, parentElements, attributes);<br />
</source><br />
where <br />
*elementType is a string containing the type of the element which is constructed. At the moment, possible types are:<br />
**[[primitive elements]]<br />
**composite elements:<br />
***arrowparallel<br />
***bisector<br />
***circumcircle<br />
***circumcirclemidpoint<br />
***integral<br />
***midpoint<br />
***mirrorpoint<br />
***normal<br />
***parallel<br />
***parallelpoint<br />
***perpendicular<br />
***perpendicularpoint<br />
***reflection<br />
*parentElements is an array containing the parameters which define the element. This can be parent elements like two points which define a line. It can also consist of JavaScript functions, numbers, and strings containing GEONExT syntax. The possible array elements depend on the element type.<br />
*attributes is a JavaScript object. Usually it is given in the "literal object" form<br />
<source lang="javascript"><br />
{key1:value1, key2:value2, ...}<br />
</source><br />
*Properties of a point:<br />
**style<br />
**strokeColor<br />
**strokeWidth<br />
**fillColor<br />
**highlightStrokeColor<br />
**highlightFillColor<br />
**labelColor<br />
**visible<br />
**fixed<br />
**draft<br />
**trace<br />
*Additional properties of a line:<br />
**straightFirst<br />
**straightLast<br />
There are no additional properties of a circle<br />
*Additional properties for an element:<br />
**needsRegularUpdate = [true]/false (eg axis are set to needsRegularUpdate=false) These elements are updated only, if the origin of the board is moved or after zooming<br />
*Possible parameters:<br />
<source lang="javascript"><br />
el.setProperty('key1:value1','key2:value2',...);<br />
el.setProperty([key1:value1],[key2:value2],...);<br />
el.setProperty({key1:value1, key2:value2},...);<br />
</source></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=JSXGraph_Wiki:About&diff=205JSXGraph Wiki:About2008-09-17T12:32:20Z<p>132.180.198.9: New page: This Wiki contains the documentation for the project [http://jsxgraph.org JSXGraph].</p>
<hr />
<div>This Wiki contains the documentation for the project [http://jsxgraph.org JSXGraph].</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Another_example_for_displaying_GEONExT&diff=204Another example for displaying GEONExT2008-09-17T12:22:33Z<p>132.180.198.9: </p>
<hr />
<div><source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
[[Category:Examples]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=203Displaying GEONExT constructions2008-09-17T12:22:14Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
JXG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
=== [[Another example for displaying GEONExT]] ===<br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. <br />
This has the advantage that the HTML file is complete.<br />
Here is an example:<br />
<source lang="xml"><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', "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", 'Geonext');<br />
</script><br />
</html><br />
<br />
[[Category:Examples]]</div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Another_example_for_displaying_GEONExT&diff=202Another example for displaying GEONExT2008-09-17T12:21:28Z<p>132.180.198.9: New page: <source lang="xml"> <div id="box" class="jxgbox" style="width:500px; height:500px;"></div> <script type="text/javascript"> var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bay...</p>
<hr />
<div><source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=201Displaying GEONExT constructions2008-09-17T12:21:09Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
JXG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
=== [[Another example for displaying GEONExT]] ===<br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. <br />
This has the advantage that the HTML file is complete.<br />
Here is an example:<br />
<source lang="xml"><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', "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", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=200Displaying GEONExT constructions2008-09-17T12:20:34Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
JXG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. <br />
This has the advantage that the HTML file is complete.<br />
Here is an example:<br />
<source lang="xml"><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', "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", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=199Displaying GEONExT constructions2008-09-17T12:19:20Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', '/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
Another example:<br />
<source lang="xml"><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. <br />
This has the advantage that the HTML file is complete.<br />
Here is an example:<br />
<source lang="xml"><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', "eNrtXPlv2zYU/jn+KwgEGFYgtSVZTmRUFdCk9TDsxJptLTBskG3a1iJLho7E7rD/fY83ZVM+kq65FAOt3uMpvu99JMXD/+bdTz+++3AZtPzf3v3y/tuffgzsds/2O0Jq+cM0zMZB68hPwjkOfoiKAsc5Tq4yPJoV2O9QNQRHySTN5mERpUngd3QJAsOymKUZ6PkDqEbpfI6TAnTiCZSTNCny6BMO7J7fkQLJfRy4kCutCNcd+fNwGc1BGAeTEOrkd5SCBC+Dbt9qW35nScVV0LeJtKLSTTQuZoFruUTFBKKe4Wg6KwLXPSV6LkGZHVYoQlBqOi7zwDuF4ugTfZc0G0dJWGAQ0RFXiFoxgeqnWSTV9Jlq8yRcCC19JjVJs2gakcajb+JY6k3IqzhWX71LR8QlmX1K07lIZVfSaG/fYbFI/DKJChG/Vy2EiTwFi0dSFDiTJWixZUwWTmLG4RDHIupSi7uSkXkUEntexkVUnzG00yy9WcqGooLUr3Q9z5tnyAySFFFSptRetAAeXZbCZZ5Uj494EXpLbU+tYpO0AEpZapGVejIm8lQsHkmxTNOVSDH98D3WjTL9SGWehsUkaa4jfLNIM17DIl0Ebtv2wBrpgqliPCmClxTv9JEqh2lRABJesrhcoiEZhX633Qd9xt0AClTFoCMObQV8X2EaIEsrjRhcaYWpIbI0z6VnUIEbKAZeOL6wyG8wIFkTBQ0bh/mMNxV9pMpFGgE9aJ6jFMRfRU38YTi6mmZpmTBS4OUM+J8sB4ImUYw5oLIRoI78y41Q9QvlFoJHrAqLSBqxKiQCtRJF+NE8nOKg3W4DqdFHoBaEwAJabRFVARLHEeHRnGuodhwWYfC71b6O8mgY49ffTr5+i6dfn5+8Obl44duedXIJ7XUyIE3zgjQbRG+tpe6up76A1Of7prY3U0Pp+6Z211NDyfvX3NlMfbF/zXubrXaxo+aUEIQZiIIgC8eY9Fu5YMUl9ykAXhqPf8NZDtFZd0o7LopkkuPREWck0uv9+c+f/1zOohyBIgeQj0gh6CYERYbBscboJipmiHbUy0tE8mv/+y9jKNZrktzmCwDsfCGlJRWXXF4GL7ttTyCYQBjknsAw+FKYsa6YP9C6dmRl/RAqdY25C3KBBUAVA8iI/s/fEBzUEo5KNVkIbMOdlAmsmWCIwEcKTMGtwosREqOzLBxhkQcTmKMWWXqFmeMBx+hi60h6uxY1OLbgbzCwLBGbkyPx0SiZknDCCyRc6mgMcN04OD7vvz0/e3vqUlfmXRvrwo5JIotSl9btsfc9vvDIjyTTGqCj1w56DNoSWi+mWkZlSGxJWUOZkoqcjfSiJWLVOEQoWHgeJGUcg573Tn/nE7AH+Ze/sOiuyBN7GxhmAN6hpfkTA0FZpFzmJWkaPiJgvnEnJ/mYlghwhrIyScAqKEwQ5IAzdM0yQelEeMnncRCvcZDGQb6og5Cehg5jaJfCp1xvxBwLcb+ZuviMeQtS7oIUjh1XjLwYksG7XDH+kqhFu2Hbfxiw7W6FrcKtgpeG23XgcvzpwBXIZcFdR0OuhK5lbUL3XrFLsqhMMpVCYpOHSHCygaYccLK2W4EpeqTJVnxk2pEANKLx3IBGrxaNdtv1qmB02p7XgLEB42cB44UBjP16arTaPaeCRqfdP23A2IDxdmCMV9M00eH481+hAZC2VYNIGLdCv8+7cy5sBHn1Qf36oLUMD4D2oxir6oNVj38vqoH2YPAGflugTdJ3B/XQpgPdhwHtIYAYixagOBvJ7+863n625GSq3twGexsMXmvxTZNvs3mt0XcSWsXsu+y+OU3ZNPw2Uttu+q22rxh/h/Ur5l+3/xoAjqrog7cNxedE9i5ZXig+I4J8ExVAn3lu1Rx8DDOeUBlNipw3NMgZ4Bea4Wc38Gvg9wXgNzTDz2ng18DvM8OPDP7keI8ty8wXac6/FqkhoGn859aM/4rVAgeObdlkhEgFHhAli7LQunIqPvmBnMBc7RxFgtI8kBPBj2Agl5YFNamisvd/GYdy7uiAoVz/cZKZZ5HfLjIzTU8fOZltn6gaZ6qmqapprkr2hEiM0R02OlkdyF+nd+Evu+Gv58FfxrnAacNfDX/dN395d+Evp+Gv58Ffxsmk1/BXw1//C3+FyVTOMynufrcM3OXUrR2wyS5bH+ATXxYwj8ZjyJitAXCBB9F5MFs3YFNips7CcVTmbHcwfz6U67pPbNGg7uvJ3osGD2g9jG4t+SqMF7Pwldhoguh2Y4FAMxxtExztXXDs18LRq4PjWQPHZwfHIS4OQ6NjQqOzC41ntWjs16HRa9D47NA4Defzw+DYNcGxe3tyPHu8cORRGzzeZ2ftmvDo3p4evcc7dmzweP+9dc8Ex97tpzL9xzt2bOD4xbtrqedwvDROZepWNcSxEc7C6DXyr8O4JEefE+2M3Yk6MPcCzEtj/FFa1tDSTp4gcfTkDpmRMytIHlrZyOist5lgqfa8OuSYl7bjVRz7QuZjLU/7GyeD7JZvnKcu+dX6Cgve9o3zAfnKttMtaON4C1o734IMB1yQdsLFUidc0O4jLkidcalxUeP87myXi9KOadOp2FnSE3UodR8PvXVeaw66lk/vUP+0Gv9s/PPB+adxwuvt8k/WU5ucihzXPlFnr/dx0Ntntuah6xn1rINc1Gm60MZF799F918Ad/q7FsC7tQvgbAOHWgBvNvc8w8XxuXFzj9MfPdZzJs7ei+Ns4bvZac0+zAgmW99ozfT77LPm1VzfaP3ZNvt07dtznbuV65qN2M+E60wbsbt2w3UN1z00ruvenuu8rVzXbHp8Jlxn2vTY7TZc13DdF+G6KClwluPRPmS3c/mQzUcqK4himZB132ql8Okymnkz7xO96oN2bZUujm/qVRcpVvf2avqWwo7GiD+Y+LAXPf1N4Pvx4R03ga9B54ltAj8EeWLP+Gl1z7jEI4FBlRqBW9V1o+RkMr2Vm14PCwaD16H3+xZpGg9Dcm0uYt7x6/t3v0gHQfwKL5yUxSecjfEkSiJyTQz6jlXwil5wGuMoVzd7k2tTcT7KogWtSnhVlDiOMRrumYueuMWuHpa19HN4qVGBx7qWjMYM6lbLH5YgJfQmbrK5SRNbPjupbb0il2HTM9v+TSo6MPLUYmsKrKk64trz/wCKsKLA", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=198Displaying GEONExT constructions2008-09-17T12:18:53Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
Another example:<br />
<source lang="xml"><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. <br />
This has the advantage that the HTML file is complete.<br />
Here is an example:<br />
<source lang="xml"><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', "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", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=197Displaying GEONExT constructions2008-09-17T12:17:51Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html><br />
<!--<br />
Another example:<br />
<source lang="xml"><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
--><br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. <br />
This has the advantage that the HTML file is complete.<br />
Here is an example:<br />
<source lang="xml"><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', "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", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=196Displaying GEONExT constructions2008-09-17T12:17:19Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
Another example:<br />
<source lang="xml"><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var b2 = JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. <br />
This has the advantage that the HTML file is complete.<br />
Here is an example:<br />
<source lang="xml"><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('box3', "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", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=195Displaying GEONExT constructions2008-09-17T12:15:44Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
Another example:<br />
<source lang="xml"><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. <br />
This has the advantage that the HTML file is complete.<br />
Here is an example:<br />
<source lang="xml"><br />
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', "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", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=194Displaying GEONExT constructions2008-09-17T12:14:12Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
Another example:<br />
<source lang="xml"><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. Here is an example:<br />
<source lang="xml"><br />
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', "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", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=193Displaying GEONExT constructions2008-09-17T12:13:38Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
Another example:<br />
<source lang="xml"><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
JXG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. Here is an example:<br />
<source lang="xml"><br />
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', "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", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=192Displaying GEONExT constructions2008-09-17T12:12:53Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html><br />
Another example:<br />
<source lang="xml"><br />
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
XG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. Here is an example:<br />
<source lang="xml"><br />
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', "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", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9https://jsxgraph.org/wiki/index.php?title=Displaying_GEONExT_constructions&diff=191Displaying GEONExT constructions2008-09-17T12:11:12Z<p>132.180.198.9: </p>
<hr />
<div>=== Loading a GEONExT construction from a file ===<br />
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.<br />
into the division with the id "box".<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', '/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</source><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');<br />
</script><br />
</html><br />
<br />
=== Loading a GEONExT construction from a string ===<br />
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.<br />
This string can be written directly into the HTML file. Here is an example:<br />
<source lang="xml"><br />
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');<br />
</script><br />
</source><br />
<br />
<html><br />
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', "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", 'Geonext');<br />
</script><br />
</html></div>132.180.198.9