Difference between revisions of "Simple function plotter"

From JSXGraph Wiki
Jump to: navigation, search
 
(3 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
First, change the function term int this text box. Second, click on "plot".
 
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/jsxgraphcore.js"></script>
+
<script type="text/javascript" src="//jsxgraph.org/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 10: Line 10:
 
c = plot(f);
 
c = plot(f);
 
// Derivative:
 
// Derivative:
g = board.D(f);
+
g = JXG.Math.Numerics.D(f);
 
plot(g,{strokecolor:'black', dash:1});
 
plot(g,{strokecolor:'black', dash:1});
 
</textarea> <br>
 
</textarea> <br>
Line 45: Line 45:
 
function clearAll(board) {
 
function clearAll(board) {
 
     JXG.JSXGraph.freeBoard(board);
 
     JXG.JSXGraph.freeBoard(board);
     board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], unitY: 40});
+
     board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});
 
     p = board.create('point', [3,-4], {style:6, name:'p'});  
 
     p = board.create('point', [3,-4], {style:6, name:'p'});  
 
     return board;
 
     return board;
Line 53: Line 53:
  
 
<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="//jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
+
<script type="text/javascript" src="//jsxgraph.org/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>
 
</source>
 
</source>
Line 65: Line 65:
 
c = plot(f);
 
c = plot(f);
 
// Derivative:
 
// Derivative:
g = board.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="plot" onClick="doIt()">  
 
<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 Out' onclick='board.zoomOut()'>
 
<input type='button' value='Zoom 100%' onclick='board.zoom100()'>
 
 
</form>
 
</form>
 
</source>
 
</source>
Line 104: Line 101:
 
function clearAll(board) {
 
function clearAll(board) {
 
     JXG.JSXGraph.freeBoard(board);
 
     JXG.JSXGraph.freeBoard(board);
     board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], unitY: 40});
+
     board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});
 
     p = board.create('point', [3,-4], {style:6, name:'p'});  
 
     p = board.create('point', [3,-4], {style:6, name:'p'});  
 
     return board;
 
     return board;

Latest revision as of 10: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;
}