Curve: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(14 intermediate revisions by 2 users not shown)
Line 3: Line 3:
* 'plot': function plotter
* 'plot': function plotter
* 'parameter': parameter curves.  
* 'parameter': parameter curves.  
* 'graph': data plot
* 'polar': polar curves
* 'polar': polar curves


= Function plotter - curveType:'graph' =
= Function graph=
First, we initialize the board and set axes:
First, we initialize the board with axes:
<source lang="javascript">
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});       
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 20, -10], axis: true});
axisx = b.createElement('axis', [[1,0], [0,0]], {});
axisy = b.createElement('axis', [[0,1], [0,0]], {});
</source>
</source>
<html>
<jsxgraph width="600" height="400">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 20, -10], axis: true});
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
</jsxgraph>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});       
axisx = b.createElement('axis', [[1,0], [0,0]], {});
axisy = b.createElement('axis', [[0,1], [0,0]], {});
</script>
</html>


As input data a curve needs 5 parameters:
As input data a function graph needs between 1 and 3 parameters:
* the term for the x-component: It can be the expression for a variable like a simple "x", or a function returning the identity:
<source lang="javascript">
createElement('curve', ['x', ...
createElement('curve', [function(x) {return x;}, ...
</source>
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.
* the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.
<source lang="javascript">
<source lang="javascript">
createElement('curve', ['x', 'Sin(x)', ...
create('functiongraph', [function(x){return Math.sin(x);}, ...
createElement('curve', ['x', function(x){return Math.sin(x);}, ...
</source>
* the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.
<source lang="javascript">
createElement('curve', ['x', 'Sin(x)', 'x', ...
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', ...
</source>
</source>
* The last two parameters are optional and can contain constants or functions which determine the interval of the x-component in which the graph is shown.
* The last two parameters are optional and can contain constants or functions which determine the interval of the x-component in which the graph is shown.
If these parameters are not given, the graph is plotted from the left border to the right border.
If these parameters are not given, the graph is plotted from the left border to the right border.
<source lang="javascript">
<source lang="javascript">
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]
create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x',-Math.PI,4*Math.PI]
</source>
</source>


Together, the code looks like this:
Together, the code looks like this:
<source lang="javascript">
<source lang="javascript">
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'graph'});
b.create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,2*Math.PI]);
</source>
</source>
<html>
<jsxgraph width="600" height="400" box="jxgbox2">
<div id="jxgbox2" class="jxgbox" style="width:600px; height:400px;"></div>
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-10, 10, 20, -10], axis: true});
<script type="text/javascript">
b2.create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]);
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20});       
</jsxgraph>
axisx = b2.createElement('axis', [[1,0], [0,0]], {});
axisy = b2.createElement('axis', [[0,1], [0,0]], {});
b2.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,4*Math.PI],{curveType:'graph'});
</script>
</html>
 


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


= Plotting data - curveType:'plot' =
= Plotting data - curveType:'plot' =
If the first component of the input data consists of an data array, the curveType is set to "plot". The second parameter (the y-component) can be a data array, but it also can be a function term.
If the first component of the input data consists of an data array, the curveType is set to "plot". The second parameter (the y-component) can be a data array, but it also can be a function term.
<source lang="javascript">
<source lang="javascript">
p = b.createElement('point',[1,4],{style:6,name:'A'});
p = b.create('point',[1,4],{size:4,name:'A'});
var dataX = [1,2,3,4,5,6,7,8];
var dataX = [1,2,3,4,5,6,7,8];
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];
b.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});
b.create('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});
b.createElement('curve', [dataX,'X(A)*Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});
b.create('curve', [dataX,function(x){ return p.X()*Math.sin(x)*x;}],{strokeColor:'blue',strokeWidth:3,dash:1});
</source>
</source>
<html>
 
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div>
<jsxgraph width="600" height="400" box="jxgbox3">
<script type="text/javascript">
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-10, 10, 20, -10], axis: true});
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20});       
var p3 = b3.create('point',[1,4],{size:4,name:'A'});
axisx = b3.createElement('axis', [[1,0], [0,0]], {});
axisy = b3.createElement('axis', [[0,1], [0,0]], {});
b3.createElement('point',[1,4],{style:6,name:'A'});
var dataX = [-3,1,2,3,4,5,6,7,10,12];
var dataX = [-3,1,2,3,4,5,6,7,10,12];
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];
var dataY = [4,0.3,4.0,-1,2.3,7,1.1,-2.0,4];
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});
b3.create('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});
b3.createElement('curve', [dataX,'X(A)*Sin(x)*x','x'],{strokeColor:'blue',strokeWidth:3,dash:1});
b3.create('curve', [dataX,function(x){ return p3.X()*Math.sin(x)*x;}],{strokeColor:'blue',strokeWidth:3,dash:1});
</script>
</jsxgraph>
</html>


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

Latest revision as of 08:11, 7 December 2022

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 guess the curveType from the input parameters, but sometimes the curveType has to be set explicitly.

  • 'plot': function plotter
  • 'parameter': parameter curves.
  • 'polar': polar curves

Function graph

First, we initialize the board with axes: 

var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 20, -10], axis: true});

As input data a function graph needs between 1 and 3 parameters:

  • the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.
create('functiongraph', [function(x){return Math.sin(x);}, ...
  • The last two parameters are optional and can contain constants or functions which determine the interval of the x-component in which the graph is shown.

If these parameters are not given, the graph is plotted from the left border to the right border. 

create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,4*Math.PI]

Together, the code looks like this: 

b.create('functiongraph', [function(x){return Math.sin(x);},-Math.PI,2*Math.PI]);

Dynamic function graphs

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". 

p = b.create('point',[1,1],{size:4,name:'A'});
b.create('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});

Plotting data - curveType:'plot'

If the first component of the input data consists of an data array, the curveType is set to "plot". The second parameter (the y-component) can be a data array, but it also can be a function term. 

p = b.create('point',[1,4],{size:4,name:'A'});
var dataX = [1,2,3,4,5,6,7,8];
var dataY = [0.3,4.0,-1,2.3,7,9,8,9];
b.create('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});
b.create('curve', [dataX,function(x){ return p.X()*Math.sin(x)*x;}],{strokeColor:'blue',strokeWidth:3,dash:1});

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Curve&oldid=7607"