# Difference between revisions of "Change Equation of a Graph"

From JSXGraph Wiki

(Undo revision 262 by 94.102.60.77 (Talk)) |
m (fixed typo) |
||

Line 105: | Line 105: | ||

== 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 | + | 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:Examples]] |

## Revision as of 12:00, 21 October 2008

This example shows how you can change the equation of a graph without creating the whole construction again. Dependend elements are updated automatically.

## 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', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'});
```

**Define Further Elements**

```
//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});
```

**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 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();
}
```

## 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.