Share JSXGraph: example "Function plotter"

JSXGraph
Share JSXGraph: example "Function plotter"
This website is a beta version. The official release will be in **2023**.

Function plotter



<input type="text" id="input" value="sin(x)*x"><br />
<input type="button" value="plot" onClick="plotter()">
<input type="button" value="clear all" onClick="clearAll()">
<p><br>
<input type="button" value="add slope info" onClick="addSlopeInfo()">
<input type="button" value="add tangent" onClick="addTangent()">
<input type="button" value="add Derivative" onClick="addDerivative()">
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true});
var f, curve; // global objects

var plotter = function() {
  var txtraw = document.getElementById('input').value;
  f = board.jc.snippet(txtraw, true, 'x', true);
  curve = board.create('functiongraph',[f], {name:txtraw, withLabel:true});
};

var clearAll = function() {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true});
    f = null;
    curve = null;
};

var addSlopeInfo = function() {
    if (JXG.isFunction(f)) {
        var txtraw = document.getElementById('input').value;
        var q = board.create('glider', [2, 1, curve], {withLabel:false});
        var t = board.create('text', [
          () => q.X()+0.1,
          () => q.Y()+0.1,
          () => "The slope of the function f(x)=" + 
                  txtraw + 
                  "
at x=" + q.X().toFixed(2) + " is equal to " + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2) ], {fontSize:15}); } }; var addTangent = function() { if (JXG.isFunction(f)) { var p = board.create('glider',[1, 0, curve], {name:'drag me'}); board.create('tangent',[p]); } }; var addDerivative = function() { if (JXG.isFunction(f)) { board.create('functiongraph',[JXG.Math.Numerics.D(f)], {dash:2}); } };