Sum of two DataSeries in Dynamic Charts - CanvasJS JavaScript Charts

Sum of two DataSeries in Dynamic Charts - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dps1 = [], dps2 = [], dps3 = [];

var chart = new CanvasJS.Chart("chartContainer",{
  title :{
    text: "Sum of DataSeries in Dynamic Chart"
  },
  axisX: {						
    title: "Axis X Title"
  },
  axisY: {						
    title: "Units"
  },
  data: [{
    type: "line",
    name: "DataSeries1",
    showInLegend: true,
    dataPoints : dps1
  },{
    type: "line",
    name: "DataSeries2",
     showInLegend: true,
    dataPoints : dps2
  },
  {
    type: "line",
    name: "Sum of DataSeries 1 & 2",
    showInLegend: true,
    dataPoints : dps3
  }]
});

var xVal = 0;
var yVal1 = 15;	
var yVal2 = 12;
var updateInterval = 1000;

var updateChart = function () {
  yVal1 = yVal1 +  Math.abs(Math.round(2 + Math.random() *(-2-2)));
  yVal2 = yVal2 +  Math.abs(Math.round(5 + Math.random() *(-5-5)));
  dps1.push({x: xVal,y: yVal1});
  dps2.push({x: xVal,y: yVal2});  
  dps3.push({x: xVal,y: (yVal1 + yVal2)});	
  
  xVal++;

  chart.render();
};

setInterval(function(){updateChart()}, updateInterval);