Difference between revisions of "Change Equation of a Graph"

From JSXGraph Wiki
Jump to: navigation, search
(How to Create this Construction)
 
(20 intermediate revisions by 5 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. Dependend elements are updated automatically.
+
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 />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<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/jsxgraphcore.js"></script>
 
<div style="width:960px">
 
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
 
<p>
 
 
<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">
<div id="debug" style="display:none;"></div>
+
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-6, 12, 8, -6], axis: true});
<script type="text/javascript">
 
    /* <![CDATA[ */
 
 
 
        board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
 
        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', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'});
+
var graph = board.create('functiongraph', [function(x){ return f(x); }, -10, 10]),
//graph = eval("board.createElement('curve', ['x', function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])",{curveType:'plot'});
+
    p1 = board.create('glider', [0,0,graph], {style:6, name:'P'}),
        p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});
+
    p2 = board.create('point', [function() { return p1.X()+1;}, function() {return p1.Y()+JXG.Math.Numerics.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.create('line', [p1,p2],{}),
        l1 = board.createElement('line', [p1,p2],{});
+
    p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''}),
        p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
+
    pol = board.create('polygon', [p1,p2,p3], {}),
        pol = board.createElement('polygon', [p1,p2,p3], {});
+
    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));}]);
        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.Y = function(x){ return f(x); };
    graph.updateCurve();
+
        graph.updateCurve();
    board.update();
+
        board.update();
        }  
+
    }  
       
+
</jsxgraph>
  /* ]]> */
+
 
  </script>
+
 
</html>
+
== How to Create this Construction ==
 +
 
 +
=== HTML Part ===
 +
'''Adding a text input field somewhere on the page together with a button'''
 +
 
 +
<source lang="xml">
 +
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
 +
<input type="button" value="set" onClick="doIt()">
 +
</source>
 +
 
 +
=== JavaScript Part ===
 +
Setting up the board
 +
<source lang="javascript">
 +
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-6, 12, 8, -6], axis: true});
 +
</source>
 +
 
 +
Create a JavaScript Function f(x) From the Text Field
 +
<source lang="javascript">
 +
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
 +
</source>
 +
 
 +
Use f(x) for defining the Graph
 +
<source lang="javascript">
 +
graph = board.create('functiongraph', [function(x){ return f(x); },-10, 10]);
 +
</source>
  
 +
The slope triangle
 +
<source lang="javascript">
 +
//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});
 +
</source>
  
kHsO5c  <a href="http://vxlxfmddnrtf.com/">vxlxfmddnrtf</a>, [url=http://cllybjtczvxu.com/]cllybjtczvxu[/url], [link=http://ewivmgtmljiz.com/]ewivmgtmljiz[/link], http://yjnulzdzdwcz.com/
+
Change the plotted function
 +
<source lang="javascript">
 +
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();
 +
}
 +
</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:Examples]]
 +
[[Category:Calculus]]

Latest revision as of 09: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.