JSXGraph Wiki - User contributions [en]

Polygon

2015-03-14T09:44:39Z

Matthias: /* Polygon defined by existing points */

== Polygon defined by existing points ==
To construct a polygon an array of already constructed points is required. So we first have to construct at least three points:
<source lang="javascript">
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 2, 6, -4]});
var p1 = b1.create('point',[0,0], {name:'X',size:4});
var p2 = b1.create('point',[2,-1], {name:'B',size:4});
var p3 = b1.create('point',[-2,-3], {name:'C',size:4});
var p4 = b1.create('point',[-1,-1], {name:'D',size:4});
var p5 = b1.create('point',[3,1], {name:'E',size:4});
</source>
Note that the "style" option is optional as is the parameter "name".
Next we create a polygon through these five points "A" to "E".
<source lang="javascript">
var poly = b1.create('polygon',["X","B","C","D","E"]);
</source>
Of course we can also use the JavaScript objects p1 to p5:
<source lang="javascript">
var poly = b1.createElement('polygon',[p1,p2,p3,p4,p5]);
</source>
The result is the same:
<jsxgraph box="jxgbox" width="500" height="300">
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 2, 6, -4]});
var p1 = b1.create('point',[0,0], {name:'X',size:4});
var p2 = b1.create('point',[2,-1], {name:'B',size:4});
var p3 = b1.create('point',[-2,-3], {name:'C',size:4});
var p4 = b1.create('point',[-1,-1], {name:'D',size:4});
var p5 = b1.create('point',[3,1], {name:'E',size:4});

var poly = b1.create('polygon',[p1,p2,p3,p4,p5], {lines:{strockeColor:'black'}});
</jsxgraph>

[[Category:Examples]]

Conic sections

2015-03-13T09:12:01Z

Matthias: /* Hyperbola */

===Ellipse===
The input elements for an ellipse are either
* three points: the two foci and a point on the ellipse
* two point and a number: the two foci and the length of the major axis (maybe a function, too).
<jsxgraph width="600" height="400" box="jxgbox1">
(function(){
var brd1=JXG.JSXGraph.initBoard('jxgbox1',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd1.create('point',[-1,1]);
var B = brd1.create('point',[1,1]);
var C = brd1.create('point',[0,-1]);
var ell = brd1.create('ellipse',[A,B,C]);
})();
</jsxgraph>
<source lang="javascript">
var brd1=JXG.JSXGraph.initBoard('jxgbox1',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd1.create('point',[-1,1]);
var B = brd1.create('point',[1,1]);
var C = brd1.create('point',[0,-1]);
var ell = brd1.create('ellipse',[A,B,C]);
</source>

<jsxgraph width="600" height="400" box="jxgbox2">
(function(){
var brd2=JXG.JSXGraph.initBoard('jxgbox2',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd2.create('point',[-1,0]);
var B = brd2.create('point',[1,0]);
var s = brd2.create('slider',[[-1,-2],[1,-2],[0,4,10]]);
var ell = brd2.create('ellipse',[A,B,function(){return s.Value();}]);
})();
</jsxgraph>
<source lang="javascript">
var brd2=JXG.JSXGraph.initBoard('jxgbox2',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd2.create('point',[-1,0]);
var B = brd2.create('point',[1,0]);
var s = brd2.create('slider',[[-1,-2],[1,-2],[0,4,10]]);
var ell = brd2.create('ellipse',[A,B,function(){return s.Value();}]);
</source>

===Hyperbola===
The input elements for a hyperbola are either
* three points: the two foci and a point on the hyperbola
* two point and a number: the two foci and the length of the major axis (maybe a function, too).
<jsxgraph width="600" height="400" box="jxgbox3">
(function(){
var brd3=JXG.JSXGraph.initBoard('jxgbox3',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd3.create('point',[0,1]);
var B = brd3.create('point',[1,1]);
var C = brd3.create('point',[0,-1]);
var hyp = brd3.create('hyperbola',[A,B,C]);
})();
</jsxgraph>
<source lang="javascript">
var brd3=JXG.JSXGraph.initBoard('jxgbox3',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd3.create('point',[0,1]);
var B = brd3.create('point',[1,1]);
var C = brd3.create('point',[0,-1]);
var hyp = brd3.create('hyperbola',[A,B,C]);
</source>

<jsxgraph width="600" height="400" box="jxgbox4">
(function(){
var brd4=JXG.JSXGraph.initBoard('jxgbox4',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd4.create('point',[-1,0]);
var B = brd4.create('point',[1,0]);
var s = brd4.create('slider',[[-1,-2],[1,-2],[0,0.5,3]]);
var hyp = brd4.create('hyperbola',[A,B,function(){return s.Value();}]);
})();
</jsxgraph>
<source lang="javascript">
var brd4=JXG.JSXGraph.initBoard('jxgbox4',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd4.create('point',[-1,0]);
var B = brd4.create('point',[1,0]);
var s = brd4.create('slider',[[-1,-2],[1,-2],[0,0.5,3]]);
var hyp = brd4.create('hyperbola',[A,B,function(){return s.Value();}]);
</source>

===Parabola===
The input elements for a parabola are
* a point and a line: focus and the directrix
<jsxgraph width="600" height="400" box="jxgbox5">
(function(){
var brd5=JXG.JSXGraph.initBoard('jxgbox5',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd5.create('point',[-1,1]);
var B = brd5.create('point',[1,1]);
var line = brd5.create('line',[A,B]);
var C = brd5.create('point',[0,-1]);
var par = brd5.create('parabola',[C,line]);
})();
</jsxgraph>
<source lang="javascript">
var brd5=JXG.JSXGraph.initBoard('jxgbox5',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd5.create('point',[-1,1]);
var B = brd5.create('point',[1,1]);
var line = brd5.create('line',[A,B]);
var C = brd5.create('point',[0,-1]);
var par = brd5.create('parabola',[C,line]);
</source>

===Conic section through five points===
<jsxgraph width="600" height="400" box="jxgbox6">
(function(){
var brd6=JXG.JSXGraph.initBoard('jxgbox6',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd6.create('point',[0.55,0]);
var B = brd6.create('point',[1,1]);
var C = brd6.create('point',[2,-1]);
var D = brd6.create('point',[2,2]);
var E = brd6.create('point',[0.3,-2]);
var con = brd6.create('conic',[A,B,C,D,E]);
})();
</jsxgraph>
<source lang="javascript">
var brd6=JXG.JSXGraph.initBoard('jxgbox6',{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = brd6.create('point',[0.55,0]);
var B = brd6.create('point',[1,1]);
var C = brd6.create('point',[2,-1]);
var D = brd6.create('point',[2,2]);
var E = brd6.create('point',[0.3,-2]);
var con = brd6.create('conic',[A,B,C,D,E]);
</source>

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

Change Equation of a Graph

2009-12-03T06:39:24Z

Matthias:

This example shows how you can change the equation of a graph without creating the whole construction again. Dependend elements are updated automatically.
<html>
<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 style="width:960px">
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
<p>
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
<input type="button" value="set" onClick="doIt()" style='margin:1em'>
</p>
</div>
<div id="debug" style="display:none;"></div>
<script type="text/javascript">
/* <![CDATA[ */

board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});

eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.createElement('functiongraph', [function(x){ return f(x); }, -10, 10]);
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.D(graph.Y)(p1.X());}], {style:1, name:''});
l1 = board.createElement('line', [p1,p2],{});
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
pol = board.createElement('polygon', [p1,p2,p3], {});
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]);

function doIt(){
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph.Y = function(x){ return f(x); };
graph.updateCurve();
board.update();
}

/* ]]> */
</script>
</html>

== How to Create this Construction ==

=== HTML Part ===
'''Adding a text input field somewhere on the page together with a button'''

<source lang="xml">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
<input type="button" value="set" onClick="doIt()">
</source>

=== JavaScript Part ===
'''Setting up the board'''
<source lang="javascript">
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
// Axes
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
</source>

'''Create a JavaScript Function f(x) From the Text Field'''
<source lang="javascript">
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
</source>

'''Use f(x) for defining the Graph'''
<source lang="javascript">
graph = board.createElement('functiongraph', [function(x){ return f(x); },-10, 10]);
</source>

'''Define Further Elements'''
<source lang="javascript">
//glider on the curve
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});
//define the derivative of f
g = board.D(f);
//a point on the tangent
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.D(graph.Y)(p1.X());}], {style:1, name:''});
//the tangent
l1 = board.createElement('line', [p1,p2],{});
//a third point fpr the slope triangle
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
//the slope triangle
pol = board.createElement('polygon', [p1,p2,p3], {});
//a text for displaying slope's value
// variable x coordinate variable y coordinate variable value
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000});
</source>

'''Define JavaScript Function doIt() for Reacting on User Input'''
<source lang="javascript">
function doIt(){
//redefine function f according to the current text field value
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
//change the Y attribute of the graph to the new function
graph.Y = function(x){ return f(x); };
//update the graph
graph.updateCurve();
//update the whole board
board.update();
}
</source>

== Remarks ==
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by anonymous functions of JavaScript.

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

Change Equation of a Graph

2008-09-15T09:40:09Z

Matthias:

This example shows how you can change the equation of a graph without creating the whole construction again.
<html>
<script type="text/javascript" src="../distrib/prototype.js"></script>
<script type="text/javascript" src="../src/loadjsxgraph.js"></script>
<div style="width:960px">
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div>
<p style="float:right">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">

<input type="button" value="set" onClick="doIt()" style='margin:1em'>
</p>
</div>
<br clear=all>
<div id="debug" style="display:none;"></div>
<script type="text/javascript">
/* <![CDATA[ */

board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
// Axes
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});

eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");
//graph.curveType = "graph";
p1 = board.createElement('glider', [graph], {style:6, name:'P'});
g = board.algebra.D(f);
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});
l1 = board.createElement('line', [p1,p2],{});
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
pol = board.createElement('polygon', [p1,p2,p3], {});
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]);

function doIt(){
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");
graph.Y = graph.yterm;
graph.updateCurve();
board.update();
}

/* ]]> */
</script>
</html>

Change Equation of a Graph

2008-09-15T09:37:43Z

Matthias:

This example shows how you can change the equation of a graph without creating the whole construction again.
<html>
<div style="width:960px">
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div>
<p style="float:right">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">

<input type="button" value="set" onClick="doIt()" style='margin:1em'>
</p>
</div>
<br clear=all>
<div id="debug" style="display:none;"></div>
<script type="text/javascript">
/* <![CDATA[ */

board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
// Axes
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});

eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");
//graph.curveType = "graph";
p1 = board.createElement('glider', [graph], {style:6, name:'P'});
g = board.algebra.D(f);
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});
l1 = board.createElement('line', [p1,p2],{});
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
pol = board.createElement('polygon', [p1,p2,p3], {});
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]);

function doIt(){
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");
graph.Y = graph.yterm;
graph.updateCurve();
board.update();
}

/* ]]> */
</script>
</html>

Change Equation of a Graph

2008-09-15T09:36:05Z

Matthias:

This example shows how you can change the equation of a graph without creating the whole construction again.
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">

Change Equation of a Graph

2008-09-15T09:35:49Z

Matthias: Replacing page with 'This example shows how you can change the equation of a graph without creating the whole construction again. <nowiki><input type="text" id="eingabe" value="Math.sin(x)*Math.cos...'

This example shows how you can change the equation of a graph without creating the whole construction again.
<nowiki><input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
</nowiki>

Change Equation of a Graph

2008-09-15T09:34:32Z

Matthias:

This example shows how you can change the equation of a graph without creating the whole construction again.

<div style="width:960px">
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div>
<p style="float:right">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">

<input type="button" value="set" onClick="doIt()" style='margin:1em'>
</p>
</div>
<br clear=all>
<div id="debug" style="display:none;"></div>
<script type="text/javascript">
/* <![CDATA[ */

board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
// Axes
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});

eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");
//graph.curveType = "graph";
p1 = board.createElement('glider', [graph], {style:6, name:'P'});
g = board.algebra.D(f);
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});
l1 = board.createElement('line', [p1,p2],{});
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
pol = board.createElement('polygon', [p1,p2,p3], {});
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]);

function doIt(){
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");
graph.Y = graph.yterm;
graph.updateCurve();
board.update();
}

/* ]]> */
</script>

Change Equation of a Graph

2008-09-15T09:31:14Z

Matthias:

This example shows how you can change the equation of a graph without creating the whole construction again.
<source>
<div style="width:960px">
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div>
<p style="float:right">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">

<input type="button" value="set" onClick="doIt()" style='margin:1em'>
</p>
</div>
<br clear=all>
<div id="debug" style="display:none;"></div>
<script type="text/javascript">
/* <![CDATA[ */

board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
// Axes
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});

eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");
//graph.curveType = "graph";
p1 = board.createElement('glider', [graph], {style:6, name:'P'});
g = board.algebra.D(f);
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});
l1 = board.createElement('line', [p1,p2],{});
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
pol = board.createElement('polygon', [p1,p2,p3], {});
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]);

function doIt(){
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");
graph.Y = graph.yterm;
graph.updateCurve();
board.update();
}

/* ]]> */
</script>
</source>

Change Equation of a Graph

2008-09-15T09:29:59Z

Matthias:

This example shows how you can change the equation of a graph without creating the whole construction again.
<source><div style="width:960px">
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div>
<p style="float:right">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">

<input type="button" value="set" onClick="doIt()" style='margin:1em'>
</p>
</div>
<br clear=all>
<div id="debug" style="display:none;"></div>
<script type="text/javascript">
/* <![CDATA[ */

board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
// Axes
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});

eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");
//graph.curveType = "graph";
p1 = board.createElement('glider', [graph], {style:6, name:'P'});
g = board.algebra.D(f);
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});
l1 = board.createElement('line', [p1,p2],{});
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
pol = board.createElement('polygon', [p1,p2,p3], {});
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]);

function doIt(){
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");
graph.Y = graph.yterm;
graph.updateCurve();
board.update();
}

/* ]]> */
</script></source>

Change Equation of a Graph

2008-09-15T09:23:28Z

Matthias: New page: This example shows how you can change the equation of a graph without creating the whole construction again. <nowiki><div style="width:960px"> <div id="jxgbox" class="jxgbox" style="width:...

This example shows how you can change the equation of a graph without creating the whole construction again.
<nowiki><div style="width:960px">
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div>
<p style="float:right">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">

<input type="button" value="set" onClick="doIt()" style='margin:1em'>
</p>
</div>
<br clear=all>
<div id="debug" style="display:none;"></div>
<script type="text/javascript">
/* <![CDATA[ */

board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
// Axes
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});

eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");
//graph.curveType = "graph";
p1 = board.createElement('glider', [graph], {style:6, name:'P'});
g = board.algebra.D(f);
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});
l1 = board.createElement('line', [p1,p2],{});
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
pol = board.createElement('polygon', [p1,p2,p3], {});
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]);

function doIt(){
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");
graph.Y = graph.yterm;
graph.updateCurve();
board.update();
}

/* ]]> */
</script></nowiki>

Main Page

2008-09-15T09:08:52Z

Matthias: Initial main page

== JSXGrpah Wiki ==
Welcome to the JSXGraph Wiki. This Wiki provides information and examples about the use of JSXGraph.

Hauptseite

2008-09-15T09:03:21Z

Matthias:

== JSXGraph Wiki ==
Welcome to the JSXGraph Wiki

Hauptseite

2008-09-15T09:02:41Z

Matthias: Der Seiteninhalt wurde durch einen anderen Text ersetzt: 'JSXGraph Wiki'

JSXGraph Wiki