Add linear and exponential trend lines to SAPUI5 Line chart

[francesco_alborghetti]

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[0] + linearRegression.equation[1]]; //linear function

              forecast[j]['exponentialForecast'] = [lastMillisec, exponentialRegression.equation[0] * Math.pow(Math.E, exponentialRegression.equation[1] * lastMillisec)];

            lastMillisec += averageMillisec; //exponential function

        }

Here a fiddle that shows it working:

linear and exponential regression - JSFiddle

[Former Member]

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;

    });

[former_member747369]

is it possible to add a regression line to a bubble chart? There seems to be properties available in the VizFrame documentation, namely plotArea.trendLines, but it is highly unintuitive.

[francesco_alborghetti]

Hi,

here a couple of examples using standard and time bubble chart:

Bubble chart 

Time bubble chart

You need to add the context property as dimension and the plot property:

    var aDimensionDefinitions = [{

      name: "Date",

      value: "{Date}",

      dataType: "date"

    }, {

      name: "Country",

      value: {

        path: 'Country'

      }

    }];

    oVizFrame.setVizProperties({

      plotArea: {

        dataLabel: {

          visible: true,

          hideWhenOverlap: true

        },

        trendLine: {

          lines: [{

            seriesContext: {Country: "China"},

            color: "#5899DA",

            type: "solid",

            size: 2,

            forecast: 3,

            displayName: "China"

          },

          {

            seriesContext: {Country: "France"},

            color: "#E8743B",

            type: "solid",

            size: 2,

            forecast: 3,

            displayName: "France"

          }]

        }

      },

      title: {

        visible: true,

        text: 'Revenue by Date'

      }

    });