JSXGraph Wiki - User contributions [en]

Main Page

2008-09-17T11:51:53Z

132.180.198.123:

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

* [[Howto include JSXGraph into web pages]]
* [[Displaying GEONExT constructions]]
* [[Displaying Intergeo constructions]]
* [[Create your own constructions/visualizations using JavaScript]]
* [[Contributions]]

To learn more about creating constructions with JSXGraph from the scratch visit the the examples category: [[:Category:Examples]]

[http://jsxgraph.org Homepage of the JSXGraph project]

Main Page

2008-09-17T11:51:13Z

132.180.198.123:

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

* [[Howto include JSXGraph into web pages]]
* [[Displaying GEONExT constructions]]
* [[Displaying Intergeo constructions]]
* [[Create your own constructions/visualizations using JavaScript]]
* [[Contributions]]

Visit the the examples category: [[:Category:Examples]]

[http://jsxgraph.org Homepage of the JSXGraph project]

Main Page

2008-09-17T11:50:54Z

132.180.198.123:

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

* [[Howto include JSXGraph into web pages]]
* [[Displaying GEONExT constructions]]
* [[Displaying Intergeo constructions]]
* [[Create your own constructions/visualizations using JavaScript]]
* [[Contributions]]

Visit the the examples category: [[Category:Examples]]

[http://jsxgraph.org Homepage of the JSXGraph project]

Main Page

2008-09-17T11:50:28Z

132.180.198.123:

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

* [[Howto include JSXGraph into web pages]]
* [[Displaying GEONExT constructions]]
* [[Displaying Intergeo constructions]]
* [[Create your own constructions/visualizations using JavaScript]]
* [[Contributions]]

Visit the the examples category: [[Examples]]

[http://jsxgraph.org Homepage of the JSXGraph project]

Change Equation of a Graph

2008-09-17T11:07:22Z

132.180.198.123: /* JavaScript Part */

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/prototype.js"></script>
<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', [[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', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'});
//graph = eval("board.createElement('curve', ['x', function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])",{curveType:'plot'});
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.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.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', [[1,0], [0,0]], {});
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});
</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('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'});
</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.algebra.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.algebra.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 aononymous functions of JavaScript.
[[Category:Examples]]

Layer Model

2008-09-16T20:01:47Z

132.180.198.123:

This illustrationshows the layer model of JSXGraph and dependend applications.

[[Image:Layermodel.png|550px]]

Layer Model

2008-09-16T20:01:14Z

132.180.198.123:

This illustrationshows the layer model of JSXGraph and dependend applications.

[[Image:Layermodel.png|400px]]

Layer Model

2008-09-16T19:58:57Z

132.180.198.123:

This illustrationshows the layer model of JSXGraph and dependend applications.

[[Image:Layermodel.png]]

Layer Model

2008-09-16T19:58:43Z

132.180.198.123: New page: This illustrationshows the layer model of JSXGraph and dependend applications Image:Layermodel.png

This illustrationshows the layer model of JSXGraph and dependend applications
[[Image:Layermodel.png]]

Change Equation of a Graph

2008-09-16T11:57:11Z

132.180.198.123:

This example shows how you can change the equation of a graph without creating the whole construction again. Dependend elements are updated automatically.
<html>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script>
<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; 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'});
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.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', [[1,0], [0,0]], {});
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});
</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('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
</source>

'''Define Further Elements'''
<source lang="javascript">
//glider on the curve
p1 = board.createElement('glider', [graph], {style:6, name:'P'});
//define the derivative of f
g = board.algebra.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.algebra.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 aononymous functions of JavaScript.
[[Category:Examples]]