Simple function plotter: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
Plots a function together with its derivative.
Plots a function together with its derivative.
First, change the function term int this text box. Second, click on "Run".
First, change the function term int this text box. Second, click on "plot".
<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
Line 14: Line 14:
plot(g,{strokecolor:'black', dash:1});
plot(g,{strokecolor:'black', dash:1});
</textarea> <br>
</textarea> <br>
<input type="button" value="plot" onClick="doIt()" style='margin:1em'>  
<input type="button" value="plot" onClick="doIt()" style='margin-right:1em'>  
<input type="button" value="clear all" onClick="board=clearAll(board)">  
<input type="button" value="clear all" onClick="board=clearAll(board)">  
<input type='button' value='Zoom In' onclick='board.zoomIn()'>
<input type='button' value='Zoom In' onclick='board.zoomIn()'>
Line 71: Line 71:
plot(g,{strokecolor:'black', dash:1});
plot(g,{strokecolor:'black', dash:1});
</textarea> <br>
</textarea> <br>
<input type="button" value="plot" onClick="doIt()" style='margin:1em'>  
<input type="button" value="plot" onClick="doIt()">  
<input type="button" value="clear all" onClick="board=clearAll(board)">  
<input type="button" value="clear all" onClick="board=clearAll(board)">  
<input type='button' value='Zoom In' onclick='board.zoomIn()'>
<input type='button' value='Zoom In' onclick='board.zoomIn()'>

Revision as of 16:18, 4 December 2008

Plots a function together with its derivative. First, change the function term int this text box. Second, click on "plot".


<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="plot" onClick="doIt()"> 
<input type="button" value="clear all" onClick="board=clearAll(board)"> 
<input type='button' value='Zoom In' onclick='board.zoomIn()'>
<input type='button' value='Zoom Out' onclick='board.zoomOut()'>
<input type='button' value='Zoom 100%' onclick='board.zoom100()'> 
</form>
        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', [1,1], {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('box', {originX: 250, originY: 250, unitX: 40, unitY: 40});
            b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
            b1axisy = board.createElement('axis', [[0,0], [0,1]], {});            
            p = board.createElement('point', [3,-4], {style:6, name:'p'}); 
            return board;
        }