Change Equation of a Graph: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 27: Line 27:
//graph.curveType = "graph";
//graph.curveType = "graph";
         p1 = board.createElement('glider', [graph], {style:6, name:'P'});
         p1 = board.createElement('glider', [graph], {style:6, name:'P'});
        g = board.algebra.D(f);
         p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});
         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],{});
         l1 = board.createElement('line', [p1,p2],{});
Line 69: Line 68:


'''Create a JavaScript Function f(x) From the Text Field'''
'''Create a JavaScript Function f(x) From the Text Field'''
<source>
<source>
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
  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>
<source>
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
Line 81: Line 78:


'''Define Further Elements'''
'''Define Further Elements'''
<source>
  //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));}]);
</source>


'''Define JavaScript Function doIt() for Reacting on User Input'''
<source>
<source>
//glider on the curve
  function doIt(){
p1 = board.createElement('glider', [graph], {style:6, name:'P'});
    //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();
  }
</source>


//define the derivative of f
== Remarks ==
g = board.algebra.D(f);
The
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''}); // apoint on the tangent
l1 = board.createElement('line', [p1,p2],{}); // the tangent
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));}]);
</source>

Revision as of 10:10, 15 September 2008

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