Difference between revisions of "Simple function plotter"

From JSXGraph Wiki
Jump to: navigation, search
Line 4: Line 4:
 
<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/prototype.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<form><textarea id="input" rows=10 cols=35 wrap="off" >
+
<form><textarea id="input" rows=7 cols=35 wrap="off" >
 
function f(x) {
 
function f(x) {
 
   return Math.cos(x)*p.Y();
 
   return Math.cos(x)*p.Y();
Line 55: Line 55:
 
</script>
 
</script>
 
</html>
 
</html>
 +
 +
<source lang="html">
 +
<form><textarea id="input" rows=7 cols=35 wrap="off" >
 +
function f(x) {
 +
  return Math.cos(x)*p.Y();
 +
}
 +
c = plot(f);
 +
// Derivative:
 +
g = board.algebra.D(f);
 +
plot(g,{strokecolor:'black', dash:1});
 +
</textarea> <br>
 +
<input type="button" value="run" onClick="doIt()" style='margin:1em'>
 +
<input type="button" value="clear all" onClick="board=clearAll(board)">
 +
</source>
  
 
<source lang="javascript">
 
<source lang="javascript">
 +
        board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 40, unitY: 40});
 +
        // Axes
 +
        b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
 +
        b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
 +
 +
        // Macro function plotter
 +
        function addCurve(board, func, atts) {
 +
            var f = board.createElement('curve', ['x', func, 'x'], atts);
 +
            return f;
 +
        }
 +
       
 +
        // Simplified plotting of function
 +
        function plot(func, atts) {
 +
            if (atts==null) {
 +
                return addCurve(board, func, {strokewidth:2, curveType:'graph'});
 +
            } else {
 +
                return addCurve(board, func, atts);
 +
            }   
 +
        }
 +
 +
        // Free point
 +
        var p = board.createElement('point', [3,-4], {style:6, name:'drag me'});
 +
 +
        // Usage of the macro
 +
        function doIt() {
 +
            eval($('input').value);
 +
        }
 +
 +
        function clearAll(board) {
 +
            JXG.JSXGraph.freeBoard(board);
 +
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
 +
            b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
 +
            b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
 +
            return board;
 +
        }
 
</source>
 
</source>
  
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 18:03, 3 December 2008

Plots a function together with its derivative.


<form><textarea id="input" rows=7 cols=35 wrap="off" >
function f(x) {
   return Math.cos(x)*p.Y();
}
c = plot(f);
// Derivative:
g = board.algebra.D(f);
plot(g,{strokecolor:'black', dash:1});
</textarea> <br>
<input type="button" value="run" onClick="doIt()" style='margin:1em'> 
<input type="button" value="clear all" onClick="board=clearAll(board)">
        board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 40, unitY: 40});
        // Axes
        b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
        b1axisy = board.createElement('axis', [[0,0], [0,1]], {});

        // Macro function plotter
        function addCurve(board, func, atts) {
            var f = board.createElement('curve', ['x', func, 'x'], atts);
            return f;
        }
        
        // Simplified plotting of function
        function plot(func, atts) {
            if (atts==null) {
                return addCurve(board, func, {strokewidth:2, curveType:'graph'});
            } else {
                return addCurve(board, func, atts);
            }    
        }

        // Free point
        var p = board.createElement('point', [3,-4], {style:6, name:'drag me'}); 

        // Usage of the macro
        function doIt() {
            eval($('input').value); 
        }

        function clearAll(board) {
            JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
            b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
            b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
            return board;
        }