Self-contained function plotting: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 22: Line 22:


var btn_start = board.create('button', [-4.5, 3.2, 'plot', plot]);
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]);
var btn_clear = board.create('button', [-3.0, 3.2, 'clear all', clear]);
</jsxgraph>
</jsxgraph>



Revision as of 10:30, 5 October 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]);