Calculating the sum of y values for a corresponding x value in stackedArea chart- CanvasJS JavaScript Charts
Calculating the sum of y values for a corresponding x value in stackedArea chart- 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 chart = new CanvasJS.Chart("chartContainer", {
data: [{
type: "stackedArea",
dataPoints: [
{ x: new Date(2017, 0, 3), y: 650 },
{ x: new Date(2017, 0, 4), y: 700 },
{ x: new Date(2017, 0, 5), y: 710 },
{ x: new Date(2017, 0, 6), y: 658 },
{ x: new Date(2017, 0, 7), y: 734 },
{ x: new Date(2017, 0, 8), y: 963 },
{ x: new Date(2017, 0, 9), y: 847 },
{ x: new Date(2017, 0, 10), y: 853 },
{ x: new Date(2017, 0, 11), y: 869 },
{ x: new Date(2017, 0, 12), y: 943 },
{ x: new Date(2017, 0, 13), y: 970 },
{ x: new Date(2017, 0, 14), y: 869 },
{ x: new Date(2017, 0, 15), y: 890 },
{ x: new Date(2017, 0, 16), y: 930 }
]
},
{
type: "stackedArea",
dataPoints: [
{ x: new Date(2017, 0, 3), y: 510 },
{ x: new Date(2017, 0, 4), y: 560 },
{ x: new Date(2017, 0, 5), y: 540 },
{ x: new Date(2017, 0, 6), y: 558 },
{ x: new Date(2017, 0, 7), y: 544 },
{ x: new Date(2017, 0, 8), y: 693 },
{ x: new Date(2017, 0, 9), y: 657 },
{ x: new Date(2017, 0, 10), y: 663 },
{ x: new Date(2017, 0, 11), y: 639 },
{ x: new Date(2017, 0, 12), y: 673 },
{ x: new Date(2017, 0, 13), y: 660 },
{ x: new Date(2017, 0, 14), y: 562 },
{ x: new Date(2017, 0, 15), y: 643 },
{ x: new Date(2017, 0, 16), y: 570 }
]
}]
});
chart.render();
// Calculate the Sum of y values for a corresponding x value
var totalArr = [], sum;
for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
sum = 0;
for(var j = 0; j < chart.options.data.length; j++) {
sum += chart.options.data[j].dataPoints[i].y;
}
totalArr.push(sum);
}
console.log(totalArr);