Change Equation of a Graph

From JSXGraph Wiki
Revision as of 11:57, 16 September 2008 by (talk)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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


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 Y attribute of the graph to the new function 
  graph.Y = function(x){ return f(x); };
  //update the graph
  //update the whole board


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.