Change Equation of a Graph: Difference between revisions

From JSXGraph Wiki
No edit summary
 
(51 intermediate revisions by 7 users not shown)
Line 1: Line 1:
This example shows how you can change the equation of a graph without creating the whole construction again.
This example shows how you can change the equation of a graph without creating the whole construction again. Dependent elements are updated automatically.
<html>
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div style="width:960px">
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div>
<p style="float:right">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
<input type="button" value="set" onClick="doIt()" style='margin:1em'>  
<input type="button" value="set" onClick="doIt()" style='margin:1em'>  
</p>
</html>
</div>
<jsxgraph width="600" height="400" box="jxgbox">
<br clear=all>
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-6, 12, 8, -6], axis: true});
<div id="debug" style="display:none;"></div>
  <script type="text/javascript">
    /* <![CDATA[ */
 
        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]], {});
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
var graph = board.create('functiongraph', [function(x){ return f(x); }, -10, 10]),
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");
    p1 = board.create('glider', [0,0,graph], {style:6, name:'P'}),
//graph.curveType = "graph";
    p2 = board.create('point', [function() { return p1.X()+1;}, function() {return p1.Y()+JXG.Math.Numerics.D(graph.Y)(p1.X());}], {style:1, name:''}),
        p1 = board.createElement('glider', [graph], {style:6, name:'P'});
    l1 = board.create('line', [p1,p2],{}),
        p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});
    p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''}),
        l1 = board.createElement('line', [p1,p2],{});
    pol = board.create('polygon', [p1,p2,p3], {}),
        p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
    t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+((p2.Y()-p3.Y()).toFixed(2));}]);
        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));}]);  
 
              
              
       
    function doIt(){
        function doIt(){
        eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
        eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
        graph.Y = function(x){ return f(x); };
        graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"
        graph.updateCurve();
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");
        board.update();
    graph.Y = graph.yterm;
    }  
    graph.updateCurve();
</jsxgraph>
    board.update();
        }  
       
  /* ]]> */
  </script>
</html>




== HowTo Create this Construction ==
== How to Create this Construction ==


=== HTML Part ===
=== HTML Part ===
'''Adding a text input field somewhere on the page together with a button'''
'''Adding a text input field somewhere on the page together with a button'''


<source>
<source lang="xml">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
<input type="button" value="set" onClick="doIt()">  
<input type="button" value="set" onClick="doIt()">  
Line 60: Line 36:


=== JavaScript Part ===
=== JavaScript Part ===
'''Setting up the board'''
Setting up the board
<source>
<source lang="javascript">
  board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-6, 12, 8, -6], axis: true});
  // Axes
  b1axisx = board.createElement('axis', [[1,0], [0,0]], {});
  b1axisy = board.createElement('axis', [[0,1], [0,0]], {});
</source>
</source>


'''Create a JavaScript Function f(x) From the Text Field'''
Create a JavaScript Function f(x) From the Text Field
<source>
<source lang="javascript">
  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 lang="javascript">
  graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);
graph = board.create('functiongraph', [function(x){ return f(x); },-10, 10]);
</source>
</source>


'''Define Further Elements'''
The slope triangle
<source>
<source lang="javascript">
  //glider on the curve
//glider on the curve
  p1 = board.createElement('glider', [graph], {style:6, name:'P'});
p1 = board.create('glider', [0,0,graph], {style:6, name:'P'});
  //define the derivative of f
//define the derivative of f
  g = board.algebra.D(f);
g = JXG.Math.Numerics.D(f);
  //a point on the tangent
//a point on the tangent
  //                                variable x coordinate          variable y coordinate depending on the derivative of f at point p1.X()
//                                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:''});
p2 = board.create('point', [function() { return p1.X()+1;}, function() {return p1.Y()+JXG.Math.Numerics.D(graph.Y)(p1.X());}], {style:1, name:''});
  //the tangent  
//the tangent  
  l1 = board.createElement('line', [p1,p2],{});  
l1 = board.create('line', [p1,p2],{});  
  //a third point fpr the slope triangle
//a third point fpr the slope triangle
  p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
  //the slope triangle
//the slope triangle
  pol = board.createElement('polygon', [p1,p2,p3], {});
pol = board.create('polygon', [p1,p2,p3], {});
  //a text for displaying slope's value
//a text for displaying slope's value
  //                              variable x coordinate          variable y coordinate                        variable 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));}]);  
t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(p2.Y()-p3.Y()).toFixed(2);}],{color:ff0000});  
</source>
</source>


'''Define JavaScript Function doIt() for Reacting on User Input'''
Change the plotted function
<source>
<source lang="javascript">
  function doIt(){
function doIt(){
    //redefine function f according to the current text field value
  //redefine function f according to the current text field value
    eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
  eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
    //change the yterm attribute of the graph to the new function  
  //change the Y attribute of the graph to the new function  
    graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"
  graph.Y = function(x){ return f(x); };
    graph.Y = graph.yterm;
  //update the graph
    //update the graph
  graph.updateCurve();
    graph.updateCurve();
  //update the whole board
    //update the whole board
  board.update();
    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 anonymous functions of JavaScript.
 
[[Category:Examples]]
[[Category:Calculus]]

Latest revision as of 08:30, 3 April 2019

This example shows how you can change the equation of a graph without creating the whole construction again. Dependent 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', {boundingbox: [-6, 12, 8, -6], axis: true});

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.create('functiongraph', [function(x){ return f(x); },-10, 10]);

The slope triangle

//glider on the curve
p1 = board.create('glider', [0,0,graph], {style:6, name:'P'});
//define the derivative of f
g = JXG.Math.Numerics.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.create('point', [function() { return p1.X()+1;}, function() {return p1.Y()+JXG.Math.Numerics.D(graph.Y)(p1.X());}], {style:1, name:''});
//the tangent 
l1 = board.create('line', [p1,p2],{}); 
//a third point fpr the slope triangle
p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
//the slope triangle
pol = board.create('polygon', [p1,p2,p3], {});
//a text for displaying slope's value
//                               variable x coordinate          variable y coordinate                        variable value
t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(p2.Y()-p3.Y()).toFixed(2);}],{color:ff0000});

Change the plotted function

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.