Simple function plotter - Revision history

A WASSERMANN at 09:42, 30 January 2019

2019-01-30T09:42:37Z

← Older revision		Revision as of 09:42, 30 January 2019
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="//jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="//jsxgraph.org/distrib/jsxgraph.css" />
	<script type="text/javascript" src="//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 53:		Line 53:

	<source lang="html4strict">		<source lang="html4strict">
	<link rel="stylesheet" type="text/css" href="//jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="//jsxgraph.org/distrib/jsxgraph.css" />
	<script type="text/javascript" src="//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>

A WASSERMANN at 09:41, 30 January 2019

2019-01-30T09:41:46Z

← Older revision		Revision as of 09:41, 30 January 2019
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.uni-bayreuth.de/distrib/jsxgraph.css" />
	<script type="text/javascript" src="~~http:~~//jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="//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 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.uni-bayreuth.de/distrib/jsxgraph.css" />
	<script type="text/javascript" src="~~http:~~//jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="//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>
	</source>		</source>

Michael at 15:17, 20 February 2013

2013-02-20T15:17:25Z

← Older revision		Revision as of 15:17, 20 February 2013
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 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>

A WASSERMANN at 16:43, 22 March 2010

2010-03-22T16:43:25Z

← Older revision		Revision as of 16:43, 22 March 2010
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 70:		Line 70:
	<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;

A WASSERMANN at 16:34, 22 March 2010

2010-03-22T16:34:32Z

← Older revision		Revision as of 16:34, 22 March 2010
Line 18:		Line 18:
	<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', {boundingbox:[-5,8,8,-5], axis:true~~});~~		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~~('functiongraph', [func], 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});		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', [1,1], {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(document.getElementById('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: 40});		board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], unitY: 40});
	~~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>
Line 82:		Line 77:

	<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~~('functiongraph', [func], 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});		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', [1,1], {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(document.getElementById('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: 40});		board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], unitY: 40});
	~~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>

A WASSERMANN at 16:31, 22 March 2010

2010-03-22T16:31:17Z

← Older revision		Revision as of 16:31, 22 March 2010
Line 15:		Line 15:
	<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)">
	~~<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>
	<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});		board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});
	// Axes		// Axes
	b1axisx = board.createElement('axis', [[0,0], [1,0]], {});		b1axisx = board.createElement('axis', [[0,0], [1,0]], {});

A WASSERMANN at 17:28, 29 October 2009

2009-10-29T17:28:38Z

← Older revision		Revision as of 17:28, 29 October 2009
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);
	}		}

A WASSERMANN at 12:13, 10 March 2009

2009-03-10T12:13:55Z

← Older revision		Revision as of 12:13, 10 March 2009
Line 36:		Line 36:
	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);
Line 101:		Line 101:
	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);

A WASSERMANN at 12:13, 10 March 2009

2009-03-10T12:13:14Z

← Older revision		Revision as of 12:13, 10 March 2009
Line 29:		Line 29:
	// 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.createElement('functiongraph', [func], atts);
	return f;		return f;
	}		}
Line 94:		Line 94:
	// 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.createElement('functiongraph', [func], atts);
	return f;		return f;
	}		}

A WASSERMANN at 18:22, 25 January 2009

2009-01-25T18:22:04Z

← Older revision		Revision as of 18:22, 25 January 2009
Line 11:		Line 11:
	c = plot(f);		c = plot(f);
	// Derivative:		// Derivative:
	g = board~~.algebra~~.D(f);		g = board.D(f);
	plot(g,{strokecolor:'black', dash:1});		plot(g,{strokecolor:'black', dash:1});
	</textarea> <br>		</textarea> <br>
Line 75:		Line 75:
	c = plot(f);		c = plot(f);
	// Derivative:		// Derivative:
	g = board~~.algebra~~.D(f);		g = board.D(f);
	plot(g,{strokecolor:'black', dash:1});		plot(g,{strokecolor:'black', dash:1});
	</textarea> <br>		</textarea> <br>