# Add linear and exponential trend lines to SAPUI5 Line chart

I had a requirement to add linear and exponential trend lines to a line chart.

I found a library that provides the most important regression functions out of the box and I used it in my chart. Here the steps I followed as reference in case you have the same requirement.

The library is called regression-js and can be found here:

https://github.com/Tom-Alexander/regression-js

Thanks a lot to Tom Alexander for sharing his valuable work!

First thing I did was to add the library to my index.html:

<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/regression/1.3.0/regression.min.js“>

This add a global regression object with the regression functions. To use them, it is enough to build a dataset array with this structure:

[knownX, dependentY]

and call the regression function you need (in my case it was just simple linear and exponential):

``````
//Calculate regression functions
var linearRegression = regression('linear', regressionData);

``````

regression.js will return an object containing an equation array that can be used for forecasting and an array with the calculated regression points:

``````
//Calculate forecast
var forecast = [];
for (var j = 0; j < 100; j++) {
forecast[j] = {};
forecast[j]['linearForecast'] = [lastMillisec, lastMillisec * linearRegression.equation + linearRegression.equation]; //linear function
forecast[j]['exponentialForecast'] = [lastMillisec, exponentialRegression.equation * Math.pow(Math.E, exponentialRegression.equation * lastMillisec)];
lastMillisec += averageMillisec; //exponential function
}

``````

Here a fiddle that shows it working:

linear and exponential regression – JSFiddle / 1 Comment
You must be Logged on to comment or reply to a post.
• Thanks for sharing this Francesco! I get the overall execution, but the jsfiddle is a little hard to follow.

Can you share maybe a clearer step by step instruction? I’m trying to introduce a regression line for a scatter plot chart. But I don’t see a regression line in the chart.

I’ve included my attempt below. As you’re the only one who has documented a solution for this topic, I look forward to seeing what I’m missing here from you!

(The chart opens in a dialog box after clicking the ‘open’ button);

``````sap.ui.define([
'jquery.sap.global',
'vizConcept/controller/BaseController',
'sap/ui/model/json/JSONModel',
'vizConcept/model/viewControls',
'sap/m/Button',
'sap/m/Dialog',
'vizConcept/model/regression'
],

function (jQuery, BaseController, JSONModel, viewControls, Button, Dialog) {

"use strict";

var controls;

var mainController = BaseController.extend("vizConcept.controller.Main", {

onInit: function(oEvent) {

// Access/expose the defined model(s) configured in the Component.js or Manifest.json within the controller.
this.getView().setModel(this.getOwnerComponent().getModel("products"), "products");
var oModel = this.getView().getModel("products");
this.getView().setModel(oModel);

var sUrl = "#" + this.getOwnerComponent().getRouter().getURL("page2");

\$(function() {
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{
axis : 1,
name : 'Historical PPI',
value : "{AwdDate}"
}
],
measures : [
{
group: 1,
name : 'Award Date',
value : '{Hist}'
},
{
group: 2,
name : 'Current PPI',
value : '{Current}'
}
],
data : {
path : "/ProductCollection"
}
});

var oData = {
"ProductCollection": [
{
"Item": "1",
"AwdDate": "20160715",
"Hist": 171.9,
"Current": 183

},
{
"Item": "2",
"AwdDate": "20160701",
"Hist" : 144.3,
"Current": 158.6
},
{
"Item": "3",
"AwdDate": "20150701",
"Hist": 160,
"Current": 165
},
{
"Item": "1",
"AwdDate": "20160715",
"Hist": 201,
"Current": 167
},
{
"Item": "2",
"AwdDate": "20160801",
"Hist" : 175.3,
"Current": 178.2
},
{
"Item": "3",
"AwdDate": "20150721",
"Hist": 160,
"Current": 147
},
{
"Item": "1",
"AwdDate": "20160715",
"Hist": 175.9,
"Current": 185.2
},
{
"Item": "2",
"AwdDate": "20161101",
"Hist" : 165.3,
"Current": 158.2
},
{
"Item": "3",
"AwdDate": "201700101",
"Hist": 160,
"Current": 165
},
{
"Item": "4",
"AwdDate": "201600401",
"Hist": 173,
"Current": 177
}

]
};

var scatterViz = new sap.viz.ui5.Scatter({
id : "idscatter",
width : "1000px",
height : "400px",
title : {
text : 'Pricing Tool Scatter Plot Example'
},
xAxis : {
title : {
visible : true
}
},
yAxis : {
title : {
visible : true
}
},
dataset : dataset
});

scatterViz.setModel(sap.ui.getCore().getModel());
scatterViz.setModel(oModel);

/////////////////////////////REGRESSION LINE ATTEMPT///////////////////////////////////////////

var regressionData = [];
for (var i = 0; i < 10; i++) {
regressionData[i] = [oData.ProductCollection[i].Current, oData.ProductCollection[i].Hist];
};

var linearRegression = regression('linear', regressionData);
////////////////////////////////////////////////////////////////////////////////////////////////

var dlg = new sap.m.Dialog({
id: 'vizModal',
title: 'Scatter Plot Example Viz',
width : "1800px",
height : "600px",
content : [scatterViz],
beginButton: new Button({
text: 'Close',
press: function () {
dlg.close();
}
})
});

(new sap.m.Button({
text: 'open',
type: 'Accept',
press: function() {
dlg.open();
scatterViz.invalidate();
}
})).placeAt('content');
});
},

onAfterRendering: function() {

var myJson = this.getOwnerComponent().getModel("products").getProperty("/ProductCollection");
console.log(myJson);

},

onToPage2 : function () {
this.getOwnerComponent().getRouter().navTo("page2");
},

});

return mainController;
});
``````