added visualisation

2020-11-05 00:06:24 +01:00
parent 2c6ad9e7d1
commit ae4fad1627
4 changed files with 1 additions and 0 deletions
--- a/static/Chart.bundle.js
+++ b/static/Chart.bundle.js
--- a/static/Chart.bundle.min.js
+++ b/static/Chart.bundle.min.js
--- a/static/charts.html
+++ b/static/charts.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="Chart.bundle.min.js"></script>
+</head>
+<body>
+
+<div class="chart-container" style="position: relative; height:40vh; width:80vw; margin: auto">
+    <canvas id="myChart"></canvas>
+</div>
+<script type="application/javascript">
+    const humidityColor = 'rgb(45,141,45)';
+    const tempColor = 'rgb(0,134,222)';
+    const co2Color = 'rgb(194,30,30)';
+
+    async function initChart() {
+        const ctx = document.getElementById('myChart').getContext('2d');
+        const data = await fetch("data/");
+        console.log(data);
+        const {humidity, temp, co2} = transformData(await data.json());
+        const myChart = Chart.Line(ctx, {
+            data: {
+                datasets: [{
+                    label: 'Humidity',
+                    data: humidity,
+                    borderColor: humidityColor,
+                    fill: false,
+                    yAxisID: 'y-axis-3',
+                }, {
+                    label: 'Temperature',
+                    data: temp,
+                    borderColor: tempColor,
+                    fill: false,
+                    yAxisID: 'y-axis-2',
+                }, {
+                    label: 'Co2 Concentration',
+                    data: co2,
+                    borderColor: co2Color,
+                    fill: false,
+                    yAxisID: 'y-axis-1',
+                }]
+            },
+            options: {
+                stacked: false,
+                title: {
+                    display: true,
+                    text: 'Ledda\'s Room Climate',
+                },
+                scales: {
+                    xAxes: [{
+                        type: 'time',
+                        time: {
+                            unit: 'second'
+                        }
+                    }],
+                    yAxes: [{
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        id: 'y-axis-1',
+                        ticks: {
+                            fontColor: co2Color,
+                            min: 300,
+                            max: 1200,
+                        },
+                    }, {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        id: 'y-axis-2',
+                        ticks: {
+                            fontColor: tempColor,
+                            min: 5,
+                            max: 40,
+                        },
+                        gridLines: {
+                            drawOnChartArea: false,
+                        },
+                    }, {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        id: 'y-axis-3',
+                        ticks: {
+                            fontColor: humidityColor,
+                            min: 0,
+                            max: 100,
+                        },
+                        gridLines: {
+                            drawOnChartArea: false,
+                        },
+                    }],
+                }
+            },
+        });
+    }
+
+    function transformData(json) {
+        const humidity = [];
+        const co2 = [];
+        const temp = [];
+        for (const snapshot of json.snapshots) {
+            co2.push({x: snapshot.time, y: snapshot.co2});
+            temp.push({x: snapshot.time, y: snapshot.temp});
+            humidity.push({x: snapshot.time, y: snapshot.humidity});
+        }
+        return {humidity, co2, temp};
+    }
+
+    initChart();
+</script>
+
+</body>
+</html>