Trend lines (Regression) on Skuid charts

  • 2
  • Idea
  • Updated 1 year ago
Here's a quick overview of how you can use linear and non-linear regression on your Skuid charts.

In my example, I'm using linear regression to plot the trend of opportunity amounts over time. The output of my chart is below:


Here's how my example works:


  • My chart has CloseDate in the X axis and one series on the Y axis (sum of the Amount). I have rolled the close dates on the X axis up to Calendar Quarters. I choose Spline as the chart type. 
  • I created an in-line JS snippet with the following script. You can change the series names and colours as appropriate. You will need to reference this in-line snippet on the chart so give it a suitable name.

var chartObj = arguments[0],
$ = skuid.$;
//grab the values from the series in the chart
var datavals1 = chartObj.series[0].data;
//declare a new array for the new series to use
var datavals2 = [];

//for each value in the original series grab the position and data values
//push these into a new array 

for (var i = 0; i < datavals1.length; i++){
    datavals2.push([i, datavals1[i].y]);
}

//create a new series, with linear settings, use the datavals2 array as the data source
//in this case use linear regression
var newSeries = {

regression: true ,
regressionSettings: {
 type: 'linear',
color:  'rgba(40, 100, 255, .9)',
name: "Trend"
                },
                name: 'Amount',
                color: 'rgba(223, 83, 83, .5)',
                data: datavals2


}


//overwrite the first series in the chart
chartObj.series[0] = newSeries;

  • The last thing is to then apply the in-line snippet as the Before Render Snippet on the chart (Advanced properties tab)

Hopefully this is useful to people and provides a template to work with to build regression on your own charts.

You can find more about Highcharts regression here. There are some other examples and regression types that Highcharts supports (polynomial, logarithmic, exponential and loess).
Photo of Matt Potts

Matt Potts, Employee

  • 182 Points 100 badge 2x thumb

Posted 1 year ago

  • 2
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Solid
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
This is great. Thanks for posting!
Photo of Matt Potts

Matt Potts, Employee

  • 182 Points 100 badge 2x thumb
Just as a footnote - standard disclaimer, this JS is unsupported and used at own risk.