<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/function-plotter" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Function plotter" 
    allowfullscreen
></iframe>

<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()">


<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 3 / 2; width: 100%;" data-ar="3 / 2"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    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 + 
                      "<br>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});
        }
    };
    
 </script>