<iframe 
    src="https://www.jsxgraph.uni-bayreuth.de/share/iframe/time-series" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Time series" 
    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';

    // Convert date string to JavaScript date object
    var toDate = function(datestr) {
        var a = datestr.split('.');
        return new Date(a[2] * 1, a[1] * 1 - 1, a[0] * 1);
    };
    
    // Input data
    var table = [
       ['9.1.2010', 3250],
       ['12.1.2010', 2950],
       ['15.1.2010', 3200],
       ['17.1.2010', 3200],
       ['18.1.2010', 3210],
       ['20.1.2010', 3250],
       ['23.1.2010', 3400],
       ['27.1.2010', 3590],
       ['31.1.2010', 3750],
       ['3.2.2010', 3810],
       ['7.2.2010', 4000],
       ['11.2.2010', 4020],
       ['13.2.2010', 4240],
       ['18.2.2010', 4430],
       ['21.2.2010', 4480],
       ['25.2.2010', 4610],
       ['28.2.2010', 4650],
       ['5.3.2010', 4890],
       ['13.3.2010', 5000],
       ['17.3.2010', 5110],
       ['21.3.2010', 5260],
       ['27.3.2010', 5470],
       ['1.4.2010', 5450],
       ['9.4.2010', 5550],
       ['19.4.2010', 5680],
       ['25.4.2010', 5890],
       ['28.4.2010', 5825],
       ['1.5.2010', 5890],
       ['9.5.2010', 6020],
       ['15.5.2010', 6170]
       ];
    
    // x: array of x-coordinates
    // y: array of y-coordinates
    // axisHeight is the vertical offset where the horizontal axis is
    var plotChartGoogleStyle = function(board, x, y, axisHeight) {
        var points = [],
            i, p;
    
        points.push(
            board.create('point', [0, axisHeight], {
                visible: false,
                name: '',
                fixed: true,
                withLabel: false
            })
        );
        for (i = 0; i < x.length; i++) {
            p = board.create('point', [x[i], y[i]],
            {
                strokeWidth: 2,
                strokeColor: '#ffffff',
                highlightStrokeColor: '#0077cc',
                fillColor: '#0077cc',
                highlightFillColor: '#0077cc',
                style: 6,
                name: '',
                fixed: true
            });
            points.push(p);
        }
        points.push(board.create('point', [x[x.length - 1], axisHeight], { visible: false, name: '', fixed: true }));
    
        // Filled area. 
        // For this we need two additional points [start,axisHeight] and [end,axisHeight]
        board.create('polygon', points, {
            withLines: false,
            fillColor: '#e6f2fa',
            withLabel: false
        });
    
        board.create('curve', [x, y],
        {
            strokeWidth: 3,
            strokeColor: '#0077cc',
            highlightStrokeColor: '#0077cc'
        });
    };
    
    var i, x = [],
        y = [],
        birthday = toDate(table[0][0]);
    
    var board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-1, 7000, 160, 2500],
        axis: false
    });
    // Create axes manually
    board.create('axis', [[0, 2700], [1, 2700]]);
    board.create('axis', [[0, 0], [0, 1]]);
    
    // Customize infobox
    board.highlightInfobox = function(x, y, el) {
        var date = new Date(x * 1000.0 * 60.0 * 60.0 * 24.0 + birthday.getTime());
        this.infobox.setText('<span style="color:black;font-weight:bold">' + date.getDate() + '.' + (date.getMonth() +
            1) + '.' + date.getFullYear() + ', ' + y + ' g</span>');
        this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokecolor'] + ' 2px';
        this.infobox.rendNode.style.padding = '5px';
        this.infobox.rendNode.style.backgroundColor = 'white';
    }
    
    // Transform the dates into days from birthday
    for (i = 0; i < table.length; i++) {
        x[i] = Math.round(((toDate(table[i][0])).getTime() - birthday.getTime()) / (1000.0 * 60.0 * 60.0 * 24.0));
        y[i] = table[i][1] * 1;
    }
    
    plotChartGoogleStyle(board, x, y, 2700);
    
    // Plot regression polynomial of degree 2
    var reg = board.create('functiongraph', [JXG.Math.Numerics.regressionPolynomial(2, x, y)], {
        strokeColor: 'black',
        dash: 3
    });
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Time series" 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.
   */
   
   // Convert date string to JavaScript date object
   var toDate = function(datestr) {
       var a = datestr.split('.');
       return new Date(a[2] * 1, a[1] * 1 - 1, a[0] * 1);
   };
   
   // Input data
   var table = [
      ['9.1.2010', 3250],
      ['12.1.2010', 2950],
      ['15.1.2010', 3200],
      ['17.1.2010', 3200],
      ['18.1.2010', 3210],
      ['20.1.2010', 3250],
      ['23.1.2010', 3400],
      ['27.1.2010', 3590],
      ['31.1.2010', 3750],
      ['3.2.2010', 3810],
      ['7.2.2010', 4000],
      ['11.2.2010', 4020],
      ['13.2.2010', 4240],
      ['18.2.2010', 4430],
      ['21.2.2010', 4480],
      ['25.2.2010', 4610],
      ['28.2.2010', 4650],
      ['5.3.2010', 4890],
      ['13.3.2010', 5000],
      ['17.3.2010', 5110],
      ['21.3.2010', 5260],
      ['27.3.2010', 5470],
      ['1.4.2010', 5450],
      ['9.4.2010', 5550],
      ['19.4.2010', 5680],
      ['25.4.2010', 5890],
      ['28.4.2010', 5825],
      ['1.5.2010', 5890],
      ['9.5.2010', 6020],
      ['15.5.2010', 6170]
      ];
   
   // x: array of x-coordinates
   // y: array of y-coordinates
   // axisHeight is the vertical offset where the horizontal axis is
   var plotChartGoogleStyle = function(board, x, y, axisHeight) {
       var points = [],
           i, p;
   
       points.push(
           board.create('point', [0, axisHeight], {
               visible: false,
               name: '',
               fixed: true,
               withLabel: false
           })
       );
       for (i = 0; i < x.length; i++) {
           p = board.create('point', [x[i], y[i]],
           {
               strokeWidth: 2,
               strokeColor: '#ffffff',
               highlightStrokeColor: '#0077cc',
               fillColor: '#0077cc',
               highlightFillColor: '#0077cc',
               style: 6,
               name: '',
               fixed: true
           });
           points.push(p);
       }
       points.push(board.create('point', [x[x.length - 1], axisHeight], { visible: false, name: '', fixed: true }));
   
       // Filled area. 
       // For this we need two additional points [start,axisHeight] and [end,axisHeight]
       board.create('polygon', points, {
           withLines: false,
           fillColor: '#e6f2fa',
           withLabel: false
       });
   
       board.create('curve', [x, y],
       {
           strokeWidth: 3,
           strokeColor: '#0077cc',
           highlightStrokeColor: '#0077cc'
       });
   };
   
   var i, x = [],
       y = [],
       birthday = toDate(table[0][0]);
   
   var board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-1, 7000, 160, 2500],
       axis: false
   });
   // Create axes manually
   board.create('axis', [[0, 2700], [1, 2700]]);
   board.create('axis', [[0, 0], [0, 1]]);
   
   // Customize infobox
   board.highlightInfobox = function(x, y, el) {
       var date = new Date(x * 1000.0 * 60.0 * 60.0 * 24.0 + birthday.getTime());
       this.infobox.setText('<span style="color:black;font-weight:bold">' + date.getDate() + '.' + (date.getMonth() +
           1) + '.' + date.getFullYear() + ', ' + y + ' g</span>');
       this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokecolor'] + ' 2px';
       this.infobox.rendNode.style.padding = '5px';
       this.infobox.rendNode.style.backgroundColor = 'white';
   }
   
   // Transform the dates into days from birthday
   for (i = 0; i < table.length; i++) {
       x[i] = Math.round(((toDate(table[i][0])).getTime() - birthday.getTime()) / (1000.0 * 60.0 * 60.0 * 24.0));
       y[i] = table[i][1] * 1;
   }
   
   plotChartGoogleStyle(board, x, y, 2700);
   
   // Plot regression polynomial of degree 2
   var reg = board.create('functiongraph', [JXG.Math.Numerics.regressionPolynomial(2, x, y)], {
       strokeColor: 'black',
       dash: 3
   });
</jsxgraph>