Simple function plotter: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(24 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 "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=10 cols=35 wrap="off" >
function f(x) {
function f(x) {
   return Math.cos(x)*p.Y();
   return Math.cos(x)*p.Y();
Line 10: 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:'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('jxgbox', {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;
            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">
<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>
</source>


<source lang="javascript">
<source lang="javascript">
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;
}
</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;
}