Simple function plotter: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 3: Line 3:
<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" />
<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=7 cols=35 wrap="off" >
<form><textarea id="input" rows=7 cols=35 wrap="off" >
Line 47: Line 46:
         // Usage of the macro
         // Usage of the macro
         function doIt() {
         function doIt() {
             eval($('input').value);  
             eval(document.getElementById('input').value);  
         }
         }


Line 63: Line 62:
<source lang="html4strict">
<source lang="html4strict">
<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" />
<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>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
Line 112: Line 110:
         // Usage of the macro
         // Usage of the macro
         function doIt() {
         function doIt() {
             eval($('input').value);  
             eval(document.getElementById('input').value);  
         }
         }



Revision as of 17:28, 29 October 2009

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


<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
<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.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('functiongraph', [func], atts);
            return f;
        }
        
        // Simplified plotting of function
        function plot(func, atts) {
            if (atts==null) {
                return addCurve(board, func, {strokewidth:2});
            } 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(document.getElementById('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;
        }