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

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

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

     

    (0) 

Leave a Reply