JSXGraph
JSXGraph share

Share

Power series for the exponential function
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/power-series-for-the-exponential-function" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Power series for the exponential function" 
    allowfullscreen
></iframe>
This code has to 
<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: [-6, 25, 6, -15],
        axis: true,
        keepaspectratio: true
    });
    
    board.create('functiongraph',
        [function(t) { return Math.exp(t); }, -10, 10], { strokeColor: "#cccccc" });
    
    var s = board.create('slider', [[0.75, -2], [5, -2.0], [0, 0, 15]], { name: 'S', snapWidth: 1 });
    
    board.create('text', [4, 10, () => 'n=' + s.Value()]);
    board.create('text', [4, 8, function() {
        var val = 0,
            i,
            sv = s.Value() + 1;
    
        for (i = 0; i < sv; i++) {
            val += 1.0 / JXG.Math.factorial(i);
        }
        return 'e~' + (val).toFixed(10);
        }]);
    
    board.create('functiongraph', [
        function(t) {
            var val = 0,
                i,
                sv = s.Value() + 1;
    
            for (i = 0; i < sv; i++) {
                val += Math.pow(t, i) / JXG.Math.factorial(i);
            }
            return val;
        },
        -10, 10], { strokeColor: "#bb0000" });
 </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: [-6, 25, 6, -15],
    axis: true,
    keepaspectratio: true
});

board.create('functiongraph',
    [function(t) { return Math.exp(t); }, -10, 10], { strokeColor: "#cccccc" });

var s = board.create('slider', [[0.75, -2], [5, -2.0], [0, 0, 15]], { name: 'S', snapWidth: 1 });

board.create('text', [4, 10, () => 'n=' + s.Value()]);
board.create('text', [4, 8, function() {
    var val = 0,
        i,
        sv = s.Value() + 1;

    for (i = 0; i < sv; i++) {
        val += 1.0 / JXG.Math.factorial(i);
    }
    return 'e~' + (val).toFixed(10);
    }]);

board.create('functiongraph', [
    function(t) {
        var val = 0,
            i,
            sv = s.Value() + 1;

        for (i = 0; i < sv; i++) {
            val += Math.pow(t, i) / JXG.Math.factorial(i);
        }
        return val;
    },
    -10, 10], { strokeColor: "#bb0000" });
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Power series for the exponential function" 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.
   */
   
   var board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-6, 25, 6, -15],
       axis: true,
       keepaspectratio: true
   });
   
   board.create('functiongraph',
       [function(t) { return Math.exp(t); }, -10, 10], { strokeColor: "#cccccc" });
   
   var s = board.create('slider', [[0.75, -2], [5, -2.0], [0, 0, 15]], { name: 'S', snapWidth: 1 });
   
   board.create('text', [4, 10, () => 'n=' + s.Value()]);
   board.create('text', [4, 8, function() {
       var val = 0,
           i,
           sv = s.Value() + 1;
   
       for (i = 0; i < sv; i++) {
           val += 1.0 / JXG.Math.factorial(i);
       }
       return 'e~' + (val).toFixed(10);
       }]);
   
   board.create('functiongraph', [
       function(t) {
           var val = 0,
               i,
               sv = s.Value() + 1;
   
           for (i = 0; i < sv; i++) {
               val += Math.pow(t, i) / JXG.Math.factorial(i);
           }
           return val;
       },
       -10, 10], { strokeColor: "#bb0000" });
</jsxgraph>

Power series for the exponential function

Basic calculus
Calculus
This example illustrates the Taylor series expansion of the exponential function. The gray curve shows the exact function $e^x$. A slider controls the number of terms $n$ in the polynomial approximation. The red curve updates dynamically, and text elements display the current $n$ and the corresponding approximation of $e$.
Have also a look at the examples
Web references 
// Define the id of your board in BOARDID

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

board.create('functiongraph',
    [function(t) { return Math.exp(t); }, -10, 10], { strokeColor: "#cccccc" });

var s = board.create('slider', [[0.75, -2], [5, -2.0], [0, 0, 15]], { name: 'S', snapWidth: 1 });

board.create('text', [4, 10, () => 'n=' + s.Value()]);
board.create('text', [4, 8, function() {
    var val = 0,
        i,
        sv = s.Value() + 1;

    for (i = 0; i < sv; i++) {
        val += 1.0 / JXG.Math.factorial(i);
    }
    return 'e~' + (val).toFixed(10);
    }]);

board.create('functiongraph', [
    function(t) {
        var val = 0,
            i,
            sv = s.Value() + 1;

        for (i = 0; i < sv; i++) {
            val += Math.pow(t, i) / JXG.Math.factorial(i);
        }
        return val;
    },
    -10, 10], { strokeColor: "#bb0000" });

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.