Change Equation of a Graph

From JSXGraph Wiki
Revision as of 09:29, 15 September 2008 by Matthias (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

This example shows how you can change the equation of a graph without creating the whole construction again.

<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="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>