# Trend lines (Regression) on Skuid charts

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:

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/highcharts-regression/master/highcharts-regression.js

- 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//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)

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

#### Categories

- 7.9K Questions
- 918 Ideas
- 215 Discussion Categories
- 177 General
- 9 Community Feedback
- 3 Community Info
- 14 Knowledge Base

## Comments