Adding data from all datasources to display only the sum value in barchart of thingsboard widget

Following is the JS script that I'm trying to modify (time series):

self.onInit = function() {
    self.ctx.flot = new TbFlot(self.ctx, 'bar');   
    
    console.log("console",self.ctx.data)
}

self.onDataUpdated = function() {
    
   
    //console.log("console",self.ctx.$scope.data[0]) //
    self.ctx.flot.update();
}

self.onLatestDataUpdated = function() {
    self.ctx.flot.latestDataUpdate();
}

self.onResize = function() {
    self.ctx.flot.resize();
}

self.onEditModeChanged = function() {
    self.ctx.flot.checkMouseEvents();
}

self.onDestroy = function() {
    self.ctx.flot.destroy();
}

self.typeParameters = function() {
    return {
        hasAdditionalLatestDataKeys: true
    };
}

I plan to add one more data source by duplicating the first element:

self.ctx.data.push(self.ctx.data[0]);

And later sum data from all the sources to update the data at the duplicated element and finally plot this value only in the barchart.

However, I get the following error just after duplicating the element and running:

I can see that data being updated in the chart but I get an error before I can do the mathematics. Following is the console log before and after duplicating the data.

Is my approach correct? Shall I update the HTML template and use $scope ?

Thank you.

from Adding data from all datasources to display only the sum value in barchart of thingsboard widget