usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!doctype html>
<html>

<head>
	<title>Stepped Line Chart</title>
	<script src="../../../dist/Chart.bundle.js"></script>
	<script src="../../utils.js"></script>
	<style>
	canvas {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	.chart-container {
		width: 500px;
		margin-left: 40px;
		margin-right: 40px;
		margin-bottom: 40px;
	}
	.container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	</style>
</head>

<body>
	<div class="container">
	</div>
	<script>
		function createConfig(details, data) {
			return {
				type: 'line',
				data: {
					labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
					datasets: [{
						label: 'steppedLine: ' + details.steppedLine,
						steppedLine: details.steppedLine,
						data: data,
						borderColor: details.color,
						fill: false,
					}]
				},
				options: {
					responsive: true,
					title: {
						display: true,
						text: details.label,
					}
				}
			};
		}


		window.onload = function() {
			var container = document.querySelector('.container');

			var data = [
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor()
			];

			var steppedLineSettings = [{
				steppedLine: false,
				label: 'No Step Interpolation',
				color: window.chartColors.red
			}, {
				steppedLine: true,
				label: 'Step Before Interpolation',
				color: window.chartColors.green
			}, {
				steppedLine: 'before',
				label: 'Step Before Interpolation',
				color: window.chartColors.green
			}, {
				steppedLine: 'after',
				label: 'Step After Interpolation',
				color: window.chartColors.purple
			}];

			steppedLineSettings.forEach(function(details) {
				var div = document.createElement('div');
				div.classList.add('chart-container');

				var canvas = document.createElement('canvas');
				div.appendChild(canvas);
				container.appendChild(div);

				var ctx = canvas.getContext('2d');
				var config = createConfig(details, data);
				new Chart(ctx, config);
			});
		};
	</script>
</body>

</html>