Difference between revisions of "Simple function plotter"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
(10 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=" | + | <link rel="stylesheet" type="text/css" href="//jsxgraph.org/distrib/jsxgraph.css" /> |
− | <script type="text/javascript" src=" | + | <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 11: | Line 10: | ||
c = plot(f); | c = plot(f); | ||
// Derivative: | // Derivative: | ||
− | g = | + | 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()" style='margin-right: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"> | ||
− | + | 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; | |
− | + | } | |
− | |||
− | |||
</script> | </script> | ||
</html> | </html> | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
− | <link rel="stylesheet" type="text/css" href=" | + | <link rel="stylesheet" type="text/css" href="//jsxgraph.org/distrib/jsxgraph.css" /> |
− | <script type="text/javascript" src=" | + | <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 75: | Line 65: | ||
c = plot(f); | c = plot(f); | ||
// Derivative: | // Derivative: | ||
− | g = | + | 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)"> | ||
− | |||
− | |||
− | |||
</form> | </form> | ||
</source> | </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 11: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;
}