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

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

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

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-10, 10, 10, -10],
        axis: true,
        pan: {
            enabled: true,
            needTwoFingers: true,
            needShift: true
        },
        sketches: {
            enabled: true,
            0: { visible: true, strokeWidth: 2, deleteOnUp: true }
        }
    });
    
    // Slider to set the degree of the polynomial
    var degree = board.create('slider', [
        [1, 8],
        [7, 8],
        [1, 3, 10]
    ], {
        name: 'degree',
        snapWidth: 1,
        digits: 0
    });
    
    // Global variables
    var curve,
        points = [];
    
    board.on('down', function(evt) {
        // Do not sketch during dragging
        if (board.mode !== board.BOARD_MODE_NONE) {
            if (this.isSketching[0]) {
                this.isSketching[0] = false;
            }
        }
    });
    
    // Finalize the sketch curve:
    // Take sketch and create spline curve
    board.on('up', function(evt) {
        var coords = [],
            i, p;
    
        if (!this.isSketching[0]) {
            return;
        }
    
        // Remove previous curve and points if they exist
        if (JXG.exists(curve)) {
            board.removeObject(curve);
            board.removeObject(points);
        }
    
        // Get list of coordinates from sketch curve
        for (i = 0; i < this.sketch.dataX.length; i++) {
            coords.push(new JXG.Coords(JXG.COORDS_BY_USER, [this.sketch.dataX[i], this.sketch.dataY[i]], board));
        }
    
        // Reduce the number of coordinate points to `degree + 1 - 2` inner coordinate points plus start point and end point.
        coords = JXG.Math.Numerics.Visvalingam(coords, degree.Value() - 1);
    
        // Convert the output of Visvalingam to JSXGraph points
        points = [];
        for (i = 0; i < coords.length; i++) {
            points.push(
                board.create('point', [coords[i].usrCoords[1], coords[i].usrCoords[2]], {
                    size: 5,
                    withLabel: false
                })
            );
        }
    
        // Create Lagrange polynomial from JSXGraph points
        curve = board.create('functiongraph', [JXG.Math.Numerics.lagrangePolynomial(points)], {
            strokeColor: '#000000',
            strokeWidth: 3,
            lineCap: 'round',
            fixed: false
        });
    });
    
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Sketch polynomial " description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-10, 10, 10, -10],
       axis: true,
       pan: {
           enabled: true,
           needTwoFingers: true,
           needShift: true
       },
       sketches: {
           enabled: true,
           0: { visible: true, strokeWidth: 2, deleteOnUp: true }
       }
   });
   
   // Slider to set the degree of the polynomial
   var degree = board.create('slider', [
       [1, 8],
       [7, 8],
       [1, 3, 10]
   ], {
       name: 'degree',
       snapWidth: 1,
       digits: 0
   });
   
   // Global variables
   var curve,
       points = [];
   
   board.on('down', function(evt) {
       // Do not sketch during dragging
       if (board.mode !== board.BOARD_MODE_NONE) {
           if (this.isSketching[0]) {
               this.isSketching[0] = false;
           }
       }
   });
   
   // Finalize the sketch curve:
   // Take sketch and create spline curve
   board.on('up', function(evt) {
       var coords = [],
           i, p;
   
       if (!this.isSketching[0]) {
           return;
       }
   
       // Remove previous curve and points if they exist
       if (JXG.exists(curve)) {
           board.removeObject(curve);
           board.removeObject(points);
       }
   
       // Get list of coordinates from sketch curve
       for (i = 0; i < this.sketch.dataX.length; i++) {
           coords.push(new JXG.Coords(JXG.COORDS_BY_USER, [this.sketch.dataX[i], this.sketch.dataY[i]], board));
       }
   
       // Reduce the number of coordinate points to `degree + 1 - 2` inner coordinate points plus start point and end point.
       coords = JXG.Math.Numerics.Visvalingam(coords, degree.Value() - 1);
   
       // Convert the output of Visvalingam to JSXGraph points
       points = [];
       for (i = 0; i < coords.length; i++) {
           points.push(
               board.create('point', [coords[i].usrCoords[1], coords[i].usrCoords[2]], {
                   size: 5,
                   withLabel: false
               })
           );
       }
   
       // Create Lagrange polynomial from JSXGraph points
       curve = board.create('functiongraph', [JXG.Math.Numerics.lagrangePolynomial(points)], {
           strokeColor: '#000000',
           strokeWidth: 3,
           lineCap: 'round',
           fixed: false
       });
   });
   
</jsxgraph>