Revision and new visualization system.

2021-08-30 19:16:50 +02:00
parent fbfd670f66
commit a52d6b8325
6 changed files with 200 additions and 17 deletions
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="cs">
+  <head>
+    <meta charset="utf-8">
+    <title>Graf rychlosti kuličky v urychlovači</title>
+	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
+  </head>
+  <body>
+	<div id="currentSpeed" style="font-size: 4em;">
+		Current speed: 
+		<span>
+			
+		</span>
+		m·s⁻¹
+	</div>
+	<canvas id="myChart" style="height: 59vh; width: 100vw;"></canvas>
+	<script>
+		let myChart;
+
+		function fetchData() {
+			return new Promise((resolve,reject) => {
+				fetch("./data.csv").then(r => r.text()).then(text => {
+					data = text.split("\n").map(e => [parseInt(e.split(", ")[0]),parseFloat(e.split(", ")[1])])
+					dataAvg3 = []
+					for (let i = 0; i < data.length-3; i++) {
+						dataAvg3[i] = [data[i][0],(data[i][1]+data[i+1][1]+data[i+2][1])/3]
+					}
+					document.querySelector("#currentSpeed span").innerText = dataAvg3[dataAvg3.length-1][1]
+					resolve([data, dataAvg3])
+				});
+
+			})
+		}
+
+
+		let ctx = document.getElementById('myChart').getContext('2d');
+		hueRed = 0;
+		hueBlue = 240;
+		myChart = new Chart(ctx, {
+			type: 'line',
+			data: {
+				labels: [],
+				datasets: [{
+					label: "Raw speed data",
+					data: [],
+					pointRadius: 0,
+					pointHoverRadius: 0,
+					color: "rgba(255,0,0,1)",
+					backgroundColor: "rgba(0,0,0,0)",
+					hoverBackgroundColor: "rgba(0,0,0,0)",
+					borderColor: "hsla(" + hueRed + ",100%,50%,.3)",
+					hoverBorderColor: "hsla(" + hueRed + ",100%,50%,1)",
+				},{
+					label: "Average speed for 3 measurements",
+					data: [],
+					pointRadius: 0,
+					pointHoverRadius: 0,
+					color: "rgba(255,0,0,1)",
+					backgroundColor: "rgba(0,0,0,0)",
+					hoverBackgroundColor: "rgba(0,0,0,0)",
+					borderColor: "hsla(" + hueBlue + ",100%,50%,.7)",
+					hoverBorderColor: "hsla(" + hueBlue + ",100%,50%,1)",
+				}]
+			},
+			options: {
+				maintainAspectRatio: false,
+				legend: {
+					display: window.innerWidth > window.innerHeight
+				},
+				hover: {
+					mode: "dataset"
+				},
+				animation: false
+			}
+		});
+	
+		function update() {
+			fetchData().then(datasets => {
+				myChart.data.labels = datasets[0].map(e => e[0])
+				for (let i = 0; i < datasets.length; i++) {
+					myChart.data.datasets[i].data = datasets[i].map(e => e[1])
+				}
+				myChart.update()
+			})
+		}
+
+		setInterval(fetchData, 1000)
+		setInterval(update, 5000)
+		update()
+
+	</script>
+  </body>
+</html>