Merge branch 'main' of gitlab.fdmci.hva.nl:propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59
This commit is contained in:
@@ -8,11 +8,16 @@ class Graph {
|
||||
this.tvocArray = [];
|
||||
}
|
||||
|
||||
createDiv() {
|
||||
let div = document.createElement("div");
|
||||
let graphDiv = document.createElement("div");
|
||||
div.setAttribute("class", "graphBody");
|
||||
graphDiv.setAttribute("id", this.id);
|
||||
div.appendChild(graphDiv);
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
// Function to create a graph
|
||||
makeGraph(line, lineColor, name) {
|
||||
let div = document.createElement("div");
|
||||
div.setAttribute("id", this.id);
|
||||
document.graphBody.appendChild(div);
|
||||
let lineArray;
|
||||
switch (line) {
|
||||
case "temp":
|
||||
@@ -132,6 +137,7 @@ class DataProcessor {
|
||||
|
||||
makeGraph() {
|
||||
this.graph = new Graph(1);
|
||||
this.graph.createDiv();
|
||||
this.graph.makeGraph("temp", "red", "Temperature");
|
||||
this.graph.makeGraph("humi", "blue", "Humidity");
|
||||
this.graph.makeGraph("eco2", "green", "eCO2");
|
||||
|
@@ -31,7 +31,5 @@
|
||||
<body>
|
||||
<script src="graph-classes.js"></script>
|
||||
<script src="graph-main.js"></script>
|
||||
|
||||
<div class="graphBody"></div>
|
||||
</body>
|
||||
</html>
|
@@ -46,11 +46,12 @@ body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border: 2px solid #ccc;
|
||||
align-self: center;
|
||||
border: 3px solid #ccc;
|
||||
border-radius: 10px;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
width: 90;
|
||||
width: 95%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -108,11 +109,20 @@ body {
|
||||
}
|
||||
|
||||
.js-plotly-plot {
|
||||
align-self: center;
|
||||
width: 95%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #000;
|
||||
margin: 10px;
|
||||
align-self: center center;
|
||||
}
|
||||
/* Additional styling as needed */
|
||||
|
||||
.graphBody {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
border: 3px solid #ccc;
|
||||
border-radius: 10px;
|
||||
justify-content: center;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
@@ -65,6 +65,7 @@
|
||||
border: 3px solid #000;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
canvas {
|
||||
margin-bottom: 20px;
|
||||
}
|
Reference in New Issue
Block a user