javascript - How to draw a linear regression line in Chart.js - Stack Overflow

admin管理员组

文章数量:1289845

I saw other libraries support this but there is very little data for Chart.js. Can anybody indicate me the way to start with a regression line for my graph? This is my code so far:

var datiedu3 = {"labels": ['ok'],
          "datasets": [{label: 'EEE',
                        data: datoa ,

                        backgroundColor: 'rgb(255, 99, 132)',
                        borderWidth: 1,
                        showLine: false}] 
           };

function grafo2(dati, opzioni) {
  var grafoline = document.getElementById('Chartline').getContext('2d');
  new Chart(grafoline, {type: 'scatter',data: dati, options: opzioni});
};
// display the data used in dataset[0]:
console.log(datiedu3.datasets[0].data)
grafo2(datiedu3)

I figured I had to create another dataset with a line graph, and put my equation there, but I don't know how to do it and I'm a bit lost.

My whole code is here codepen

I saw other libraries support this but there is very little data for Chart.js. Can anybody indicate me the way to start with a regression line for my graph? This is my code so far:

var datiedu3 = {"labels": ['ok'],
          "datasets": [{label: 'EEE',
                        data: datoa ,

                        backgroundColor: 'rgb(255, 99, 132)',
                        borderWidth: 1,
                        showLine: false}] 
           };

function grafo2(dati, opzioni) {
  var grafoline = document.getElementById('Chartline').getContext('2d');
  new Chart(grafoline, {type: 'scatter',data: dati, options: opzioni});
};
// display the data used in dataset[0]:
console.log(datiedu3.datasets[0].data)
grafo2(datiedu3)

I figured I had to create another dataset with a line graph, and put my equation there, but I don't know how to do it and I'm a bit lost.

My whole code is here codepen

• javascript
• chart.js

Share Improve this question Follow edited Mar 10, 2020 at 23:12 Joe - Check out my books 16.9k44 gold badges2828 silver badges7373 bronze badges asked Mar 10, 2020 at 16:42 AnnaAnna 40944 silver badges1212 bronze badges 7

• I guess one way is to plot the points of your regression line and store them all in the dataset ? – Greggz Commented Mar 10, 2020 at 17:09
• that's true, I tried, but the code I used to plot these points doesn't output any line! you can check it here – Anna Commented Mar 10, 2020 at 17:13
• your lr object doesn't return any points. – Greggz Commented Mar 10, 2020 at 17:18
• your yData object has empty strings in the positions you should have numbers – Greggz Commented Mar 10, 2020 at 17:21
• same for xData that contains Infinity and NaN. And in the linearRegression function, you are summing and multiplying without a care in the world – Greggz Commented Mar 10, 2020 at 17:23

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 9

I typically use the regression package.

First, add the package as an external script. Second, clean your data. Just basic checks here:

const clean_data = datoa
    .filter(({ x, y }) => {
      return (
        typeof x === typeof y &&  // filter out one string & one number
        !isNaN(x) &&              // filter out `NaN`
        !isNaN(y) &&
        Math.abs(x) !== Infinity && 
        Math.abs(y) !== Infinity
      );
    })
    .map(({ x, y }) => {
      return [x, y];             // we need a list of [[x1, y1], [x2, y2], ...]
    });

Then run

const my_regression = regression.linear(
  clean_data
);

The result will be something like:

{
  'points': [[4,3.79],[4.75,3.83],[5.5,3.87],.....],
  'equation': [0.05,3.59],
  'r2': 0.26,
  'string': 'y = 0.05x + 3.59'
}

Done. We've got our [x,y] points. So transform the linear regression points into something that chartjs can render:

const useful_points = my_regression.points.map(([x, y]) => {
    return y;    
    // or {x, y}, depending on whether you just want y-coords for a 'linear' plot
    // or x&y for a 'scatterplot'
})

You can add these points either as

• another line chart dataset
• or with an annotation plugin.

本文标签： javascriptHow to draw a linear regression line in ChartjsStack Overflow