Change Equation of a Graph: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(4 intermediate revisions by 2 users not shown)
Line 8: Line 8:
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
var graph = board.createElement('functiongraph', [function(x){ return f(x); }, -10, 10]),
var graph = board.create('functiongraph', [function(x){ return f(x); }, -10, 10]),
     p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'}),
     p1 = board.create('glider', [0,0,graph], {style:6, name:'P'}),
     p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.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:''}),
     l1 = board.createElement('line', [p1,p2],{}),
     l1 = board.create('line', [p1,p2],{}),
     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:''}),
     pol = board.createElement('polygon', [p1,p2,p3], {}),
     pol = board.create('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));}]);
     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));}]);
              
              
     function doIt(){
     function doIt(){
Line 36: Line 36:


=== JavaScript Part ===
=== JavaScript Part ===
'''Setting up the board'''
Setting up the board
<source lang="javascript">
<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', [[0,0], [1,0]], {});
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
</source>
</source>


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


'''Define Further Elements'''
The slope triangle
<source lang="javascript">
<source lang="javascript">
//glider on the curve
//glider on the curve
p1 = board.createElement('glider', [0,0,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.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.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));}],{color:ff0000});  
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 lang="javascript">
<source lang="javascript">
function doIt(){
function doIt(){

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.