Change Equation of a Graph

From JSXGraph Wiki
Revision as of 10:14, 15 September 2008 by WikiSysop (talk | contribs)
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.



HowTo 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
  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
  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));}]);

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); };  // usually: e.g. "x^2"
    graph.Y = graph.yterm;
    //update the graph
    graph.updateCurve();
    //update the whole board
    board.update();
  }

Remarks

The