JSFiddle - React, Tailwind, and code Playground

by RavilG

HTML

<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<canvas id="test" style="background:#c3c3c3; width:600px; height:400px"></canvas>

JavaScript

function plotDataAndFit(frequency, data) {
  // Fit sinus to data
  const fitsinRef = fitSinus(frequency, data);
  const fitsin = lmsFit3(frequency, data);

  const timeStep = 1 / (data.length - 1);

  // Generate sinus data
  let x = 0;
  let sinusData = [];
  let sinusDataRef = [];
  for (let i = 0; i < data.length; i++) {
    x = x + timeStep;
    let y = fitsinRef.amplitude * Math.sin(2 * Math.PI * frequency * x + fitsinRef.phase) + fitsinRef.offset;
    

    sinusDataRef.push({
      x,
      y
    });
    y = fitsin.amplitude * Math.sin(2 * Math.PI * frequency * x + fitsin.phase) + fitsin.offset;
    sinusData.push({
      x,
      y
    });
  }
  // Create chart
  const chart = new Chart(document.getElementById("test"), {
    type: "scatter",
    data: {
      datasets: [{
          label: "Data",
          data: data,
          showLine: true,
          fill: false,
          pointRadius: 3,
          pointHoverRadius: 5,
        },
        {
          label: "Sinus fit reference",
          data: sinusDataRef,
          showLine: true,
          fill: false,
          borderColor: "green",
          pointRadius: 0,
        },
        {
          label: "Sinus fit",
          data: sinusData,
          showLine: true,
          fill: false,
          borderColor: "red",
          pointRadius: 0,
        }
      ],
    },
    options: {
      scales: {
        xAxes: [{
          type: "linear",
          position: "bottom",
          ticks: {
            stepSize: 0.25,
            callback: (value, index, values) => `${value.toFixed(2)} s`,
          },
        }, ],
        yAxes: [{
          ticks: {
            callback: (value, index, values) => `${value.toFixed(1)}`,
          },
        }, ],
      },
    },
  });
}

function fitSinus(frequency, data) {
  let sumAdA = 0,
    sumBdA = 0,
    sumCdA = 0,
    sumYdA = 0,
    sumAdB = 0,
    sumBdB = 0,
    sumCdB = 0,
    sumYdB = 0,
    sumAdC = 0,
    sumBdC = 0,
    sumCdC = 0,
    sumYdC = 0

 ...