Simple function plotter: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(17 intermediate revisions by 2 users not shown)
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="//jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="//jsxgraph.org/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" >
function f(x) {
function f(x) {
Line 11: Line 10:
c = plot(f);
c = plot(f);
// Derivative:
// Derivative:
g = board.algebra.D(f);
g = JXG.Math.Numerics.D(f);
plot(g,{strokecolor:'black', dash:1});
plot(g,{strokecolor:'black', dash:1});
</textarea> <br>
</textarea> <br>
<input type="button" value="run" 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)">  
</form>
</form>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
<script language="JavaScript">
<script language="JavaScript">
        board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 40, unitY: 40});
var board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});
        // Axes
        b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
        b1axisy = board.createElement('axis', [[0,0], [0,1]], {});


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


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


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


        function clearAll(board) {
function clearAll(board) {
            JXG.JSXGraph.freeBoard(board);
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 40, unitY: 20});
    board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});
            b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
    p = board.create('point', [3,-4], {style:6, name:'p'});  
            b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
    return board;
            p = board.createElement('point', [3,-4], {style:6, name:'p'});  
}
            return board;
        }
</script>
</script>
</html>
</html>
<source lang="html4strict">
<link rel="stylesheet" type="text/css" href="//jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="//jsxgraph.org/distrib/jsxgraphcore.js"></script>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
</source>


<source lang="html4strict">
<source lang="html4strict">
Line 65: Line 65:
c = plot(f);
c = plot(f);
// Derivative:
// Derivative:
g = board.algebra.D(f);
g = JXG.Math.Numerics.D(f);
plot(g,{strokecolor:'black', dash:1});
plot(g,{strokecolor:'black', dash:1});
</textarea> <br>
</textarea> <br>
<input type="button" value="run" 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)">  
</form>
</form>
Line 74: Line 74:


<source lang="javascript">
<source lang="javascript">
        board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 40, unitY: 40});
var board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});
        // Axes
        b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
        b1axisy = board.createElement('axis', [[0,0], [0,1]], {});


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


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


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


        function clearAll(board) {
function clearAll(board) {
            JXG.JSXGraph.freeBoard(board);
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 40, unitY: 20});
    board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});
            b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
    p = board.create('point', [3,-4], {style:6, name:'p'});  
            b1axisy = board.createElement('axis', [[0,0], [0,1]], {});          
    return board;
            p = board.createElement('point', [3,-4], {style:6, name:'p'});  
}
            return board;
        }
</source>
</source>




[[Category:Examples]]
[[Category:Examples]]
[[Category:Calculus]]

Latest revision as of 09:42, 30 January 2019

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="//jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="//jsxgraph.org/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 = JXG.Math.Numerics.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)"> 
</form>
var board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});

// Macro function plotter
function addCurve(board, func, atts) {
    var f = board.create('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.create('point', [1,1], {style:6, name:'p'}); 

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

function clearAll(board) {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});
    p = board.create('point', [3,-4], {style:6, name:'p'}); 
    return board;
}