Difference between revisions of "Curve"

From JSXGraph Wiki
Jump to: navigation, search
Line 9: Line 9:
 
<source lang="javascript">
 
<source lang="javascript">
 
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});         
 
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});         
axisx = b.createElement('axis', [[0,0], [1,0]], {});
+
axisx = b.create('axis', [[0,0], [1,0]], {});
axisy = b.createElement('axis', [[0,0], [0,1]], {});
+
axisy = b.create('axis', [[0,0], [0,1]], {});
 
</source>
 
</source>
<html>
+
<jsxgraph width="600" height="400">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<div 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});         
 
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});         
 
axisx = b.createElement('axis', [[0,0], [1,0]], {});
 
axisx = b.createElement('axis', [[0,0], [1,0]], {});
 
axisy = b.createElement('axis', [[0,0], [0,1]], {});
 
axisy = b.createElement('axis', [[0,0], [0,1]], {});
</script>
+
</jsxgraph>
</html>
 
  
 
As input data a curve needs 5 parameters:
 
As input data a curve needs 5 parameters:
Line 38: Line 33:
 
b.createElement('functiongraph', [function(x){return Math.sin(x);},-Math.PI,2*Math.PI]);
 
b.createElement('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>
 
<script type="text/javascript">
 
 
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20});         
 
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 200, unitX: 20, unitY: 20});         
 
axisx = b2.createElement('axis', [[0,0], [1,0]], {});
 
axisx = b2.createElement('axis', [[0,0], [1,0]], {});
Line 55: Line 48:
 
b.createElement('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});
 
b.createElement('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>
 
<script type="text/javascript">
 
 
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20});         
 
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20});         
 
axisx = b4.createElement('axis', [[0,0], [1,0]], {});
 
axisx = b4.createElement('axis', [[0,0], [1,0]], {});
Line 63: Line 54:
 
p = b4.createElement('point',[1,4],{style:6,name:'A'});
 
p = b4.createElement('point',[1,4],{style:6,name:'A'});
 
b4.createElement('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});
 
b4.createElement('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1});
</script>
+
</jsxgraph>
</html>
 
  
 
= Plotting data - curveType:'plot' =
 
= Plotting data - curveType:'plot' =
Line 75: Line 65:
 
b.createElement('curve', [dataX,function(x){ return p.X()*Math.sin(x)*x;}],{strokeColor:'blue',strokeWidth:3,dash:1});
 
b.createElement('curve', [dataX,function(x){ return p.X()*Math.sin(x)*x;}],{strokeColor:'blue',strokeWidth:3,dash:1});
 
</source>
 
</source>
<html>
+
<jsxgraph width="600" height="400" box="jxgbox3">
<div id="jxgbox3" class="jxgbox" style="width:600px; height:400px;"></div>
 
<script type="text/javascript">
 
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 200, unitX: 20, unitY: 20});       
 
 
axisx = b3.createElement('axis', [[0,0], [1,0]], {});
 
axisx = b3.createElement('axis', [[0,0], [1,0]], {});
 
axisy = b3.createElement('axis', [[0,0], [0,1]], {});
 
axisy = b3.createElement('axis', [[0,0], [0,1]], {});
Line 86: Line 73:
 
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});
 
b3.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});
 
b3.createElement('curve', [dataX,function(x){ return p3.X()*Math.sin(x)*x;}],{strokeColor:'blue',strokeWidth:3,dash:1});
 
b3.createElement('curve', [dataX,function(x){ return p3.X()*Math.sin(x)*x;}],{strokeColor:'blue',strokeWidth:3,dash:1});
</script>
+
</jsxgraph>
</html>
 
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 11:12, 12 September 2010

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 and set axes:

var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 20, unitY: 20});        
axisx = b.create('axis', [[0,0], [1,0]], {});
axisy = b.create('axis', [[0,0], [0,1]], {});

As input data a curve needs 5 parameters:

  • the term for the y-component: it can be a JavaScript function having one input parameter, or an expression in GEONExT syntax.
createElement('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.

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

Together, the code looks like this:

b.createElement('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.createLement('point',[1,1],{style:6,name:'A'}); b.createElement('functiongraph', [function(x){return p.X()*Math.sin(x);}],{dash:1}); var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 200, originY: 200, unitX: 20, unitY: 20}); axisx = b4.createElement('axis', [[0,0], [1,0]], {}); axisy = b4.createElement('axis', [[0,0], [0,1]], {}); p = b4.createElement('point',[1,4],{style:6,name:'A'}); b4.createElement('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.createElement('point',[1,4],{style:6,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.createElement('curve', [dataX,dataY],{strokeColor:'red',strokeWidth:3});
b.createElement('curve', [dataX,function(x){ return p.X()*Math.sin(x)*x;}],{strokeColor:'blue',strokeWidth:3,dash:1});