first commit

2023-01-30 08:01:11 +01:00
commit dd253ca7e9
1663 changed files with 846601 additions and 0 deletions
--- a/chart/zoom/samples/zoom-time.html
+++ b/chart/zoom/samples/zoom-time.html
@ -0,0 +1,142 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>Line Chart</title>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
+	<script src="../node_modules/chart.js/dist/Chart.js"></script>
+	<script src="../node_modules/hammerjs/hammer.min.js"></script>
+	<script src="../chartjs-plugin-zoom.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
+</head>
+
+<body>
+	<div style="width:75%;">
+		<button onclick="resetZoom()">Reset Zoom</button>
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var timeFormat = 'MM/DD/YYYY HH:mm';
+
+		function randomScalingFactor() {
+			return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+		}
+
+		function randomColorFactor() {
+			return Math.round(Math.random() * 255);
+		}
+
+		function randomColor(opacity) {
+			return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
+		}
+
+		function newDate(days) {
+			return moment().add(days, 'd').toDate();
+		}
+
+		function newDateString(days) {
+			return moment().add(days, 'd').format(timeFormat);
+		}
+
+		function newTimestamp(days) {
+			return moment().add(days, 'd').unix();
+		}
+
+		function resetZoom() {
+			window.myLine.resetZoom()
+		}
+
+		var config = {
+			type: 'line',
+			data: {
+				labels: [newDate(0), newDate(1), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)], // Date Objects
+				datasets: [{
+					label: "My First dataset",
+					data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+					fill: false,
+					borderDash: [5, 5],
+				}, {
+					label: "My Second dataset",
+					data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+				}, {
+					label: "Dataset with point data",
+					data: [{
+						x: newDateString(0),
+						y: randomScalingFactor()
+					}, {
+						x: newDateString(5),
+						y: randomScalingFactor()
+					}, {
+						x: newDateString(7),
+						y: randomScalingFactor()
+					}, {
+						x: newDateString(15),
+						y: randomScalingFactor()
+					}],
+					fill: false
+				}]
+			},
+			options: {
+				responsive: true,
+				title:{
+					display:true,
+					text:"Chart.js Time Scale"
+				},
+				scales: {
+					xAxes: [{
+						type: "time",
+						time: {
+							format: timeFormat,
+							// round: 'day'
+							tooltipFormat: 'll HH:mm'
+						},
+						scaleLabel: {
+							display: true,
+							labelString: 'Date'
+						},
+						ticks: {
+							maxRotation: 0
+						}
+					}, ],
+					yAxes: [{
+						scaleLabel: {
+							display: true,
+							labelString: 'value'
+						}
+					}]
+				},
+				zoom: {
+					enabled: true,
+					drag: true,
+					mode: 'x',
+					limits: {
+						max: 10,
+						min: 0.5
+					}
+				}
+			}
+		};
+
+		config.data.datasets.forEach(function(dataset) {
+			dataset.borderColor = randomColor(0.4);
+			dataset.backgroundColor = randomColor(0.5);
+			dataset.pointBorderColor = randomColor(0.7);
+			dataset.pointBackgroundColor = randomColor(0.5);
+			dataset.pointBorderWidth = 1;
+		});
+
+		window.onload = function() {
+			var ctx = document.getElementById("canvas").getContext("2d");
+			window.myLine = new Chart(ctx, config);
+
+		};
+	</script>
+</body>
+
+</html>