first commit

2023-04-26 13:17:21 +02:00
commit 535741001e
1612 changed files with 820287 additions and 0 deletions
--- a/chart/zoom/samples/pan-bar.html
+++ b/chart/zoom/samples/pan-bar.html
@ -0,0 +1,109 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>Bar Chart Pan</title>
+	<script src="../node_modules/chart.js/dist/Chart.bundle.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 id="container" style="width: 75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+
+	<script>
+		var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+		var randomScalingFactor = function() {
+			return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+		};
+		var randomColorFactor = function() {
+			return Math.round(Math.random() * 255);
+		};
+		var randomColor = function() {
+			return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+		};
+
+		var barChartData = {
+			labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+			datasets: [{
+				label: 'Dataset 1',
+				backgroundColor: "rgba(220,220,220,0.5)",
+				data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+			}, {
+				hidden: false,
+				label: 'Dataset 2',
+				backgroundColor: "rgba(255,187,205,1)",
+				data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+			}, {
+				label: 'Dataset 3',
+				backgroundColor: "rgba(151,187,205,0.5)",
+				data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+			}]
+
+		};
+
+
+
+		window.onload = function() {
+			var ctx = document.getElementById("canvas").getContext("2d");
+			window.myBar = new Chart(ctx, {
+				type: 'bar',
+				data: barChartData,
+				options: {
+					// Elements options apply to all of the options unless overridden in a dataset
+					// In this case, we are setting the border of each bar to be 2px wide and green
+					elements: {
+						rectangle: {
+							borderWidth: 2,
+							borderColor: 'rgb(0, 255, 0)',
+							borderSkipped: 'bottom'
+						}
+					},
+					responsive: true,
+					legend: {
+						position: 'top',
+					},
+					title: {
+						display: true,
+						text: 'Chart.js Bar Chart'
+					},
+					pan: {
+						enabled: true,
+						mode: 'xy',
+						speed: 10,
+						threshold: 10
+					},
+					zoom: {
+						enabled: true,
+						mode: 'y',
+						limits: {
+							max: 10,
+							min: 0.5
+						}
+					},
+					scales: {
+						xAxes: [{
+							ticks: {
+								min: 'March',
+								max: 'May'
+							}
+						}]
+					}
+				}
+			});
+		};
+	</script>
+</body>
+
+</html>