cumulative Percentage line with column chart - CanvasJS

cumulative Percentage line with column chart - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>

JavaScript

var y = [5,6,15,23,19,8,7];
var yPoints = [];
var dataPoints = [];
var j = 0, k = 0, l = 0, y1, y2, y3;
for (var i = 0; i <= y.length - 1; i++) {
	if(y[i] == 1 || y[i] <= 10){
		y[j++] = y[i];
		y1 = (j/y.length) * 100;
	}
	else if(y[i] <= 20) {
		y[k++] = y[i];
		y2 = (k/y.length) * 100;
	}
	else if(y[i] <= 30) {
		y[l++] = y[i];
		y3 = (l/y.length) * 100;
	}
};
yPoints.push(y1,y2,y3);
for (var i = 0; i <= yPoints.length - 1; i++) {
	dataPoints.push({y:parseInt(yPoints[i])});
};

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Cumulative percentage line with column chart",
	},
	axisY: {
		suffix: " %",
		title: "Line with cumulative percentage",
	},
	axisX: {
		interval: 1,
	},
	data: [
	{
		type: "line",
		dataPoints: dataPoints,
	},
	{
		type: "column",
		fillOpacity: .4,
		axisYType: "secondary",
		dataPoints: [
			{x: 0, y: 5},
			{x: 1, y: 13},
			{x: 2, y: 23},
		],
	}
	]
});
chart.render();