Curve: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 25: Line 25:
</html>
</html>


As an example we now plot a sine curve from -&pi; to 4&pi;.
As input data a curvve needs 5 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.
<source lang="javascript">
createElement('curve', ['x', '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>
* 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.
<source lang="javascript">
createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', Togehter the code lokks like this:
</source>
 
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:'plot'});
b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});

Revision as of 09:00, 19 September 2008

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.
  • 'graph': data plot
  • 'polar': polar curves

Function plotter - curveType:'plot'

First, we initialize the board and set axes:

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]], {});

As input data a curvve needs 5 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:
createElement('curve', ['x', ...
createElement('curve', [function(x) {return x;}, ...
  • the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.
createElement('curve', ['x', 'Sin(x)', ...
createElement('curve', ['x', function(x){return Math.sin(x);}, ...
  • the variable for the GEONExT-syntax. For function plotting it has to be the same as the first input parameter.
createElement('curve', ['x', 'Sin(x)', 'x', ...
createElement('curve', ['x', function(x){return Math.sin(x);}, '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.

createElement('curve', ['x', 'Sin(x)', 'x', -Math.PI,4*Math.PI]
createElement('curve', ['x', function(x){return Math.sin(x);}, 'x', Togehter the code lokks like this:

Together, the code looks like this:

b.createElement('curve', ['x',function(x){return Math.sin(x);},'x',-Math.PI,2*Math.PI],{curveType:'plot'});