Make charts responsive
This commit is contained in:
huskee
parent
a6622975e3
commit
4ea73aa32c
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="UTF-8" />
|
||||
<head>
|
||||
<title>therminator</title>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||||
|
|
@ -25,21 +26,38 @@
|
|||
<p>
|
||||
update interval (ms):
|
||||
<select id="updateInterval" onchange="changeUpdateInterval()">
|
||||
<option>500</option>
|
||||
<option selected>500</option>
|
||||
<option>1000</option>
|
||||
<option>3000</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div id="chart-small">
|
||||
<h2>Channel A:</h2>
|
||||
<div id="error-tempA"></div>
|
||||
<canvas id="chartA"></canvas>
|
||||
<canvas id="chartA-mobile"></canvas>
|
||||
<h2>Channel B:</h2>
|
||||
<div id="error-tempB"></div>
|
||||
<canvas id="chartB"></canvas>
|
||||
<canvas id="chartB-mobile"></canvas>
|
||||
</div>
|
||||
<div id="chart-large">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chart-container">
|
||||
<h2>Channel A:</h2>
|
||||
<div id="error-tempA"></div>
|
||||
<canvas id="chartA"></canvas>
|
||||
</td>
|
||||
<td class="chart-container">
|
||||
<h2>Channel B:</h2>
|
||||
<div id="error-tempB"></div>
|
||||
<canvas id="chartB"></canvas>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,41 @@
|
|||
const canvasA = document.getElementById("chartA");
|
||||
const canvasB = document.getElementById("chartB");
|
||||
const mobCanvasA = document.getElementById("chartA-mobile");
|
||||
const mobCanvasB = document.getElementById("chartB-mobile");
|
||||
|
||||
const maxValsSelect = document.getElementById("maxVals");
|
||||
let maxVals = maxValsSelect.options[maxValsSelect.selectedIndex].text;
|
||||
|
||||
const chartAdata = {
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: "Channel A temperature",
|
||||
backgroundColor: "red",
|
||||
borderColor: "red",
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const chartBdata = {
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: "Channel B temperature",
|
||||
backgroundColor: "blue",
|
||||
borderColor: "blue",
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
|
|
@ -12,14 +45,26 @@ const options = {
|
|||
},
|
||||
scales: {
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: "Temperature (°C)",
|
||||
color: "rgb(250, 250, 250)",
|
||||
},
|
||||
grid: {
|
||||
color: "rgba(250, 250, 250, 0.5)",
|
||||
},
|
||||
ticks: {
|
||||
color: "rgba(250, 250, 250, 0.5)",
|
||||
},
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 50,
|
||||
},
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: "Time (s)",
|
||||
color: "rgb(250, 250, 250)",
|
||||
},
|
||||
grid: {
|
||||
color: "rgba(250, 250, 250, 0.5)",
|
||||
},
|
||||
|
|
@ -29,6 +74,7 @@ const options = {
|
|||
},
|
||||
},
|
||||
};
|
||||
|
||||
const chartA = new Chart(canvasA, {
|
||||
type: "line",
|
||||
data: {
|
||||
|
|
@ -44,6 +90,7 @@ const chartA = new Chart(canvasA, {
|
|||
},
|
||||
options: options,
|
||||
});
|
||||
|
||||
const chartB = new Chart(canvasB, {
|
||||
type: "line",
|
||||
data: {
|
||||
|
|
@ -59,9 +106,43 @@ const chartB = new Chart(canvasB, {
|
|||
},
|
||||
options: options,
|
||||
});
|
||||
|
||||
const mobChartA = new Chart(mobCanvasA, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: "Channel A temperature",
|
||||
backgroundColor: "red",
|
||||
borderColor: "red",
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
options: options,
|
||||
});
|
||||
|
||||
const mobChartB = new Chart(mobCanvasB, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: "Channel B temperature",
|
||||
backgroundColor: "blue",
|
||||
borderColor: "blue",
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
options: options,
|
||||
});
|
||||
|
||||
var gateway = `ws://${window.location.hostname}/ws`;
|
||||
var websocket;
|
||||
// Init web socket when the page loads
|
||||
|
||||
window.addEventListener("load", onload);
|
||||
|
||||
function onload(event) {
|
||||
|
|
@ -144,4 +225,6 @@ function onMessage(event) {
|
|||
}
|
||||
addData(chartA, data["time"] / 1000, data["tempA"]);
|
||||
addData(chartB, data["time"] / 1000, data["tempB"]);
|
||||
addData(mobChartA, data["time"] / 1000, data["tempA"]);
|
||||
addData(mobChartB, data["time"] / 1000, data["tempB"]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,37 @@ body {
|
|||
background-color: rgb(50, 50, 50);
|
||||
color: white;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
white-space: nowrap;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
#mv, #ui, #chartA, #chartB {
|
||||
display: inline-block;
|
||||
#mv,
|
||||
#ui {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#error-tempA, #error-tempB {
|
||||
color: red !important;
|
||||
#error-tempA,
|
||||
#error-tempB {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 40vh;
|
||||
width: 80vw;
|
||||
height: 20vh;
|
||||
width: 40vw;
|
||||
padding: 1em;
|
||||
}
|
||||
#chart-small {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
#chart-large {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1480px) {
|
||||
#chart-small {
|
||||
display: none;
|
||||
}
|
||||
#chart-large {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue