JSXGraph
JSXGraph share

Share

Lagrange interpolation
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/lagrange-interpolation" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Lagrange interpolation" 
    allowfullscreen
></iframe>
This code has to 
<button onClick="addPoint()">Add point</button>

<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';

    var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-5, 10, 7, -6], axis: true, keepaspectratio: true});
    
    var p = [];
    p[0] = board.create('point', [-1,2], {size:4});
    p[1] = board.create('point', [3,-1], {size:4});
    var f = JXG.Math.Numerics.lagrangePolynomial(p);
    var graph = board.create('functiongraph', [f,-10, 10], {strokeWidth:3});
    var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], {dash:1});
    var d2 = board.create('functiongraph', [JXG.Math.Numerics.D(JXG.Math.Numerics.D(f)), -10, 10], {dash:2});
    
    function addPoint() {
        p.push(board.create('point',[(Math.random()-0.5)*10,(Math.random()-0.5)*3],{size:4}));
        board.update();
    }
 </script> 
/*
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 = 'your_div_id'; // Insert your id here!

var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-5, 10, 7, -6], axis: true, keepaspectratio: true});

var p = [];
p[0] = board.create('point', [-1,2], {size:4});
p[1] = board.create('point', [3,-1], {size:4});
var f = JXG.Math.Numerics.lagrangePolynomial(p);
var graph = board.create('functiongraph', [f,-10, 10], {strokeWidth:3});
var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], {dash:1});
var d2 = board.create('functiongraph', [JXG.Math.Numerics.D(JXG.Math.Numerics.D(f)), -10, 10], {dash:2});

function addPoint() {
    p.push(board.create('point',[(Math.random()-0.5)*10,(Math.random()-0.5)*3],{size:4}));
    board.update();
}
Constructs a polynomial of degree $n$ through $n+1$ given points. Points can be added by clicking on "Add point". The dotted line is the graph of the first derivative, the dashed line is the graph of the second derivative.
Have also a look at the examples
Web references 
<button onClick="addPoint()">Add point</button>
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-5, 10, 7, -6], axis: true, keepaspectratio: true});

var p = [];
p[0] = board.create('point', [-1,2], {size:4});
p[1] = board.create('point', [3,-1], {size:4});
var f = JXG.Math.Numerics.lagrangePolynomial(p);
var graph = board.create('functiongraph', [f,-10, 10], {strokeWidth:3});
var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], {dash:1});
var d2 = board.create('functiongraph', [JXG.Math.Numerics.D(JXG.Math.Numerics.D(f)), -10, 10], {dash:2});

function addPoint() {
    p.push(board.create('point',[(Math.random()-0.5)*10,(Math.random()-0.5)*3],{size:4}));
    board.update();
}

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.