Skip to Content
Author's profile photo Francesco Alborghetti

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[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

Capture.JPG

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Kunal Ojha
      Kunal Ojha

      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;
          });
      

       

      Author's profile photo Michael Curry
      Michael Curry

      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.

      Author's profile photo Francesco Alborghetti
      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'
            }
          });