Difference between revisions of "Self-contained function plotting"

From JSXGraph Wiki
Jump to navigationJump to search
(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...")
 
 
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]]

Latest revision as of 16: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]);