[feature request] Trendlines in Plotly.js

[juliangommers]

Looking through the documentation of Plotly I came across the trend line possibilities in Plotly.py: https://plotly.com/python/linear-fits/ I'm searching for a feature within Plotly.js to draw a trend line/regression line/fitting within a scattered graph. Though it looks like this feature is not available in the JavaScript version of Plotly.

The requests for such a feature have already been there within the community for some time but the answer was to generate it elsewhere. I am using Plotly within Mendix and using other libraries to create something for Plotly is not really a well maintainable solution there. https://community.plotly.com/t/fitting-function-with-plotly-js/1851 https://community.plotly.com/t/linear-regression-in-scatterplot/8669

Would it be a possibility to add trend lines as a feature within Plotly.js? Something like this would be great as an example: https://developers.google.com/chart/interactive/docs/gallery/trendlines

[itsmegopi]

Looking through the documentation of Plotly I came across the trend line possibilities in Plotly.py: https://plotly.com/python/linear-fits/ I'm searching for a feature within Plotly.js to draw a trend line/regression line/fitting within a scattered graph. Though it looks like this feature is not available in the JavaScript version of Plotly.

The requests for such a feature have already been there within the community for some time but the answer was to generate it elsewhere. I am using Plotly within Mendix and using other libraries to create something for Plotly is not really a well maintainable solution there. https://community.plotly.com/t/fitting-function-with-plotly-js/1851 https://community.plotly.com/t/linear-regression-in-scatterplot/8669

Would it be a possibility to add trend lines as a feature within Plotly.js? Something like this would be great as an example: https://developers.google.com/chart/interactive/docs/gallery/trendlines

We are also searching for the same feature in Plotly.js. Hope soon will get this feature :smiling_face_with_three_hearts: @archmoj

[cgfoed]

+1 Would be so great to have a similar functionality as in python

[cgfoed]

I solved it myself, here is the code if somebody is interested. It's very basic but it works for me.

It's based on https://stackoverflow.com/questions/6195335/linear-regression-in-javascript

function linearRegression(x,y){
        var lr = {};
        var n = y.length;
        var sum_x = 0;
        var sum_y = 0;
        var sum_xy = 0;
        var sum_xx = 0;
        var sum_yy = 0;

        for (var i = 0; i < y.length; i++) {

            sum_x += x[i];
            sum_y += y[i];
            sum_xy += (x[i]*y[i]);
            sum_xx += (x[i]*x[i]);
            sum_yy += (y[i]*y[i]);
        } 

        lr['sl'] = (n * sum_xy - sum_x * sum_y) / (n*sum_xx - sum_x * sum_x);
        lr['off'] = (sum_y - lr.sl * sum_x)/n;
        lr['r2'] = Math.pow((n*sum_xy - sum_x*sum_y)/Math.sqrt((n*sum_xx-sum_x*sum_x)*(n*sum_yy-sum_y*sum_y)),2);

        return lr;
}

var x_data_64 = [your x-data array here];
var y_data_64 = [your y-data array here];
var lr = linearRegression(x_data_64, y_data_64);
//console.log(lr);

var trace = {x: x_data_64,
            y: y_data_64,
            name: "Scatter"
            };  
//console.log(trace);

var fit_from = Math.min(...x_data_64)
var fit_to = Math.max(...x_data_64)

var fit = {
  x: [fit_from, fit_to],
  y: [fit_from*lr.sl+lr.off, fit_to*lr.sl+lr.off],
  mode: 'lines',
  type: 'scatter',
  name: "R2=".concat((Math.round(lr.r2 * 10000) / 10000).toString())
};

//console.log(fit);
return {data:[trace,fit]};

[bonacci-johannes]

It would be nice to have this feature in javascript, is there any update on this issue?