Difference between revisions of "Change Equation of a Graph"
From JSXGraph Wiki
Jump to navigationJump to search| Line 68: | Line 68: | ||
'''Create a JavaScript Function f(x) From the Text Field''' | '''Create a JavaScript Function f(x) From the Text Field''' | ||
<source lang="javascript"> | <source lang="javascript"> | ||
| − | + | eval("function f(x){ return "+document.getElementById("eingabe").value+";}"); | |
</source> | </source> | ||
'''Use f(x) for defining the Graph''' | '''Use f(x) for defining the Graph''' | ||
<source lang="javascript"> | <source lang="javascript"> | ||
| − | + | graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); | |
</source> | </source> | ||
'''Define Further Elements''' | '''Define Further Elements''' | ||
<source lang="javascript"> | <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> | </source> | ||
'''Define JavaScript Function doIt() for Reacting on User Input''' | '''Define JavaScript Function doIt() for Reacting on User Input''' | ||
<source lang="javascript"> | <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 yterm attribute of the graph to the new function | |
| − | + | graph.yterm = function(x){ return f(x); }; | |
| − | + | graph.Y = graph.yterm; | |
| − | + | //update the graph | |
| − | + | graph.updateCurve(); | |
| − | + | //update the whole board | |
| − | + | board.update(); | |
| − | + | } | |
</source> | </source> | ||
== Remarks == | == 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. | 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. | ||
Revision as of 16:06, 15 September 2008
This example shows how you can change the equation of a graph without creating the whole construction again.
How to Create this Construction
HTML Part
Adding a text input field somewhere on the page together with a button
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
<input type="button" value="set" onClick="doIt()">
JavaScript Part
Setting up the board
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]], {});
Create a JavaScript Function f(x) From the Text Field
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
Use f(x) for defining the Graph
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
Define Further Elements
//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});
Define JavaScript Function doIt() for Reacting on User Input
function doIt(){
//redefine function f according to the current text field value
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
//change the yterm attribute of the graph to the new function
graph.yterm = function(x){ return f(x); };
graph.Y = graph.yterm;
//update the graph
graph.updateCurve();
//update the whole board
board.update();
}
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.
