JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/regression/1.4.0/regression.min.js"></script>
<div id="container"></div>

CSS

html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

JavaScript

//experiment data just for example
const rawData = [
    [0, 2.1],
    [1, 2.4],
    [2, 2.6],
    [4, 2.8],
    [5, 3]
];

//get regression object
//type of regression is choosen every time manually according to
//experimental data
const result = regression('linear', rawData);

//get coefficients from calculated formula
var coeff = result.equation;

anychart.onDocumentReady(function () {

    var data_1 = rawData;
    var data_2 = setTheoryData(rawData);

    chart = anychart.scatter();

    chart.title("The calculated formula is " + result.string + "\nThe coefficient of determination (R2) is " + result.r2.toPrecision(2));

       
		chart.legend(true);

// create the first series (marker) and set the experimental data
    var series1 = chart.marker(data_1);
    series1.name("Experiment data");

// create the second series (line) and set the theoretical data
    var series2 = chart.line(data_2);
    series2.name("Theoretically calculated data");
    series2.markers(true);

    chart.container("container");
    chart.draw();
});

//helper to input X and calculate Y using founded formula
//suites to any type of regression
function formula(coeff, x) {
    var result = null;
    for (var i = 0, j = coeff.length - 1; i < coeff.length; i++, j--) {
        result += coeff[i] * Math.pow(x, j);
    }
    return result;
}

//helper to set theoretical data array of [X][Y]
//using experimental X coordinates
//suites to any type of regression
function setTheoryData(rawData) {
    var theoryData = [];
    for (var i = 0; i < rawData.length; i++) {
        console.log(rawData[i][0] + "    " + formula(coeff, rawData[i][0]));
        theoryData[i] = [rawData[i][0], formula(coeff, rawData[i][0])];
    }
    return theoryData;
}