Self-contained function plotting: Difference between revisions

From JSXGraph Wiki
(Created page with "In this example, input field and buttons are part of the JSXGraph construction. <jsxgraph width="600" height="600"> const board = JXG.JSXGraph.initBoard('jxgbox', { boun...")
 
No edit summary
Line 29: Line 29:


<source lang="javascript">
<source lang="javascript">
</source>
const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5, 5, 5, -5], axis:true
});
 
var input = board.create('input', [-4.5, 4, 'x^2', 'f: '], {
cssStyle: 'width: 8em'
    });
var plots = [];
 
var plot = function() {
    var f = board.jc.snippet(input.Value(), true, 'x', false);
    plots.push(board.create('functiongraph', [f]));
};
var clear = function() {
    for (f of plots) {
        board.removeObject(f);
    }
};
 
var btn_start = board.create('button', [-4.5, 3.2, 'plot', plot]);
var btn_clear = board.create('button', [-3.5, 3.2, 'clear all', clear]);</source>


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

Revision as of 14:02, 8 July 2020

In this example, input field and buttons are part of the JSXGraph construction.


The underlying JavaScript code

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

var input = board.create('input', [-4.5, 4, 'x^2', 'f: '], {
	cssStyle: 'width: 8em'
    });
var plots = [];

var plot = function() {
    var f = board.jc.snippet(input.Value(), true, 'x', false);
    plots.push(board.create('functiongraph', [f]));
};
var clear = function() {
    for (f of plots) {
        board.removeObject(f);
    }
};

var btn_start = board.create('button', [-4.5, 3.2, 'plot', plot]);
var btn_clear = board.create('button', [-3.5, 3.2, 'clear all', clear]);