Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add trendlines in Plotly.js #4921

Open
juliangommers opened this issue Jun 15, 2020 · 4 comments
Open

add trendlines in Plotly.js #4921

juliangommers opened this issue Jun 15, 2020 · 4 comments
Labels
feature something new P3 backlog

Comments

@juliangommers
Copy link

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

@juliangommers juliangommers changed the title Trendlines in Plotly.js [feature request] Trendlines in Plotly.js Jun 15, 2020
@itsmegopi
Copy link

itsmegopi commented Dec 15, 2020

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 🥰
@archmoj

@cgfoed
Copy link

cgfoed commented Jan 6, 2021

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

@cgfoed
Copy link

cgfoed commented Jan 6, 2021

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
Copy link

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

@gvwilson gvwilson self-assigned this Jul 3, 2024
@gvwilson gvwilson removed their assignment Aug 2, 2024
@gvwilson gvwilson changed the title [feature request] Trendlines in Plotly.js add trendlines in Plotly.js Aug 9, 2024
@gvwilson gvwilson added feature something new P3 backlog labels Aug 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature something new P3 backlog
Projects
None yet
Development

No branches or pull requests

5 participants