Change Equation of a Graph: Difference between revisions
From JSXGraph Wiki
No edit summary |
No edit summary |
||
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. | ||
<html> | |||
<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'> | |||
</p> | |||
</div> | |||
<br clear=all> | |||
<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+";}"); | |||
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); | |||
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])"); | |||
//graph.curveType = "graph"; | |||
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:''}); | |||
l1 = board.createElement('line', [p1,p2],{}); | |||
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));}]); | |||
function doIt(){ | |||
eval("function f(x){ return "+document.getElementById("eingabe").value+";}"); | |||
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2" | |||
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };"); | |||
graph.Y = graph.yterm; | |||
graph.updateCurve(); | |||
board.update(); | |||
} | |||
/* ]]> */ | |||
</script> | |||
</html> |
Revision as of 09:37, 15 September 2008
This example shows how you can change the equation of a graph without creating the whole construction again.