94 lines
2.4 KiB
HTML
94 lines
2.4 KiB
HTML
<!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>
|