<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/regression/2.0.1/regression.min.js"></script>

    <div id="container"></div>
let dataRaw = [
  34,
  36,
  36,
  38,
  45,
  43,
  35,
  34,
  38,
  37,
  39,
  32,
  50,
  37,
  39,
  41,
  42,
  38,
  37,
  31,
  34,
  32,
  36,
  39,
  32,
  34,
  36,
  37,
  40,
  35,
  39,
  36,
  37,
  39,
  61,
  80,
  54,
  51,
  50,
  47,
  38,
  52,
  52,
  46,
  44,
  59,
  95,
  97,
  91,
  100,
  85,
  95
];
let data = [
  [1, 34],
  [2, 36],
  [3, 36],
  [4, 38],
  [5, 45],
  [6, 43],
  [7, 35],
  [8, 34],
  [9, 38],
  [10, 37],
  [11, 39],
  [12, 32],
  [13, 50],
  [14, 37],
  [15, 39],
  [16, 41],
  [17, 42],
  [18, 38],
  [19, 37],
  [20, 31],
  [21, 34],
  [22, 32],
  [23, 36],
  [24, 39],
  [25, 32],
  [26, 34],
  [27, 36],
  [28, 37],
  [29, 40],
  [30, 35],
  [31, 39],
  [32, 36],
  [33, 37],
  [34, 39],
  [35, 61],
  [36, 80],
  [37, 54],
  [38, 51],
  [39, 50],
  [40, 47],
  [41, 38],
  [42, 52],
  [43, 52],
  [44, 46],
  [45, 44],
  [46, 59],
  [47, 95],
  [48, 97],
  [49, 91],
  [50, 100],
  [51, 85],
  [52, 95]
];

let resultLinear = regression.polynomial(data, {
  order: 1,
  precision: 20
});
let resultPolynomial = regression.polynomial(data, {
  order: 5,
  precision: 20
});
let dataLinear = [],
  dataPolynomial = [];

for (let i = 0; i < resultPolynomial.points.length; i++) {
  dataLinear.push(resultLinear.points[i][1]);
  dataPolynomial.push(resultPolynomial.points[i][1]);
}

// Generate the chart
Highcharts.chart("container", {
  chart: {
    type: "spline"
  },
  title: {
    text: "Google search:<br/>What to watch on Netflix"
  },

  subtitle: {
    text: "Source: Google trends"
  },

  yAxis: {
    title: {
      text: null
    },
    max: 100
  },

  xAxis: {
    type: "datetime"
  },
  tooltip: {
    xDateFormat: "%Y-%m-%d",
    shared: true,
    valueDecimals: 2
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      marker: {
        enabled: false
      },
      pointStart: Date.UTC(2019, 3, 28),
      pointInterval: 7 * 24 * 3600 * 1000 // one day
    }
  },

  series: [
    {
      name: "Linear regression",
      color: "#0000FF",
      data: dataLinear
    },
    {
      name: "Polynomial regression",
      color: "#FF0000",
      data: dataPolynomial
    },
    {
      name: "Row data",
      color: "#808080",
      data: dataRaw
    }
  ]
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.