Trend lines (Regression) on Skuid charts
Here's a quick overview of how you can use linear and nonlinear 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:
$ = 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;
You can find more about Highcharts regression here. There are some other examples and regression types that Highcharts supports (polynomial, logarithmic, exponential and loess).
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 external JS snippet pointing to the Highcharts regression resource at https://rawgit.com/phpepe/highchartsregression/master/highchartsregression.js
 I created an inline JS snippet with the following script. You can change the series names and colours as appropriate. You will need to reference this inline snippet on the chart so give it a suitable name.
$ = 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 inline snippet as the Before Render Snippet on the chart (Advanced properties tab)
You can find more about Highcharts regression here. There are some other examples and regression types that Highcharts supports (polynomial, logarithmic, exponential and loess).
4
Comments

Solid0

This is great. Thanks for posting!0

Just as a footnote  standard disclaimer, this JS is unsupported and used at own risk.1

Thanks so much for sharing this, Matt! So cool and very useful.0
Howdy, Stranger!
Categories
 9.2K All Categories
 8K Questions
 928 Ideas
 243 Discussion Categories
 185 General
 9 Community Feedback
 6 Community Info
 26 Knowledge Base