▷ Display of last 24 hours of Temperature, Humidity and Temp. CPU
For this post, two sensors have been deployed for real-time data collection, currently operational in the city of Guayaquil: one for humidity and another for temperature. Both sensors utilize LoRA technology to transmit collected information to a Gateway. This Gateway serves as a central connection point, receiving data from the sensors and forwarding it to the Google Cloud platform via LTE cellular connectivity.
Leaflet viewer with OpenStreetMap
Once the data is stored on the Google Cloud platform, a customized web interface has been developed. This interface facilitates the visualization and analysis of the sensor-collected data, offering users a clear and easily accessible representation.
In today's interconnected world, the ability to gather and visualize real-time data is essential for understanding and making informed decisions. On this occasion, we will explore how to visualize the data from the last 24 hours of various variables captured by IoT devices using Google and Chart.js.
| <!DOCTYPE html> | |
| //Read more: https://vasanza.blogspot.com | |
| <html> | |
| <head> | |
| <title>Visualización ultimas 24h de cada variable desde Google Sheets</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body> | |
| <h1>Visualización ultimas 24h de cada variable desde Google Sheets</h1> | |
| <!-- Gráfico de Temperatura --> | |
| <canvas id="temperatureChart" width="800" height="400"></canvas> | |
| <!-- Gráfico de Humedad --> | |
| <canvas id="humidityChart" width="800" height="400"></canvas> | |
| <!-- Gráfico de Temperatura de CPU --> | |
| <canvas id="cpuTempChart" width="800" height="400"></canvas> | |
| <script> | |
| // Código para acceder a los datos de Google Sheets y mostrarlos en gráficos | |
| function loadSheetData() { | |
| fetch('https://sheets.googleapis.com/v4/spreadsheets/1K1oKWZeTyB6V7keslEzBkzIy-FDNqqUNyTUn8ZXARfE/values/Sheet1?key=YOUR_API_KEY') | |
| .then(response => response.json()) | |
| .then(data => { | |
| let timestamps = data.values.slice(1).map(row => row[0]); // Timestamps desde la segunda fila | |
| let temperatures = data.values.slice(1).map(row => parseFloat(row[1])); // Datos de temperatura desde la segunda fila | |
| let humidity = data.values.slice(1).map(row => parseFloat(row[2])); // Datos de humedad desde la segunda fila | |
| let cpuTemp = data.values.slice(1).map(row => parseFloat(row[3])); // Datos de temperatura de CPU desde la segunda fila | |
| // Obtener la fecha y hora actual | |
| const currentTime = new Date().getTime(); | |
| // Filtrar los datos de las últimas 24 horas | |
| const last24Hours = timestamps.filter((timestamp, index) => { | |
| const timestampDate = new Date(timestamp).getTime(); | |
| return (currentTime - timestampDate) / (1000 * 60 * 60) <= 24; | |
| }); | |
| // Obtener índices de los datos de las últimas 24 horas | |
| const lastIndex = timestamps.indexOf(last24Hours[last24Hours.length - 1]); | |
| const firstIndex = timestamps.indexOf(last24Hours[0]); | |
| // Filtrar los datos de temperatura, humedad y temperatura de CPU para las últimas 24 horas | |
| const filteredTemperatures = temperatures.slice(firstIndex, lastIndex + 1); | |
| const filteredHumidity = humidity.slice(firstIndex, lastIndex + 1); | |
| const filteredCpuTemp = cpuTemp.slice(firstIndex, lastIndex + 1); | |
| // Crear el gráfico de Temperatura | |
| var tempCtx = document.getElementById('temperatureChart').getContext('2d'); | |
| var tempChart = new Chart(tempCtx, { | |
| type: 'line', | |
| data: { | |
| labels: last24Hours, | |
| datasets: [{ | |
| label: 'Temperatura', | |
| data: filteredTemperatures, | |
| fill: false, | |
| borderColor: 'rgba(255, 99, 132, 1)', | |
| tension: 0.1 | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| x: { | |
| display: true, | |
| title: { | |
| display: true, | |
| text: 'Timestamps' | |
| } | |
| }, | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Crear el gráfico de Humedad | |
| var humidityCtx = document.getElementById('humidityChart').getContext('2d'); | |
| var humidityChart = new Chart(humidityCtx, { | |
| type: 'line', | |
| data: { | |
| labels: last24Hours, | |
| datasets: [{ | |
| label: 'Humedad', | |
| data: filteredHumidity, | |
| fill: false, | |
| borderColor: 'rgba(54, 162, 235, 1)', | |
| tension: 0.1 | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| x: { | |
| display: true, | |
| title: { | |
| display: true, | |
| text: 'Timestamps' | |
| } | |
| }, | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Crear el gráfico de Temperatura de CPU | |
| var cpuTempCtx = document.getElementById('cpuTempChart').getContext('2d'); | |
| var cpuTempChart = new Chart(cpuTempCtx, { | |
| type: 'line', | |
| data: { | |
| labels: last24Hours, | |
| datasets: [{ | |
| label: 'Temperatura CPU', | |
| data: filteredCpuTemp, | |
| fill: false, | |
| borderColor: 'rgba(75, 192, 192, 1)', | |
| tension: 0.1 | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| x: { | |
| display: true, | |
| title: { | |
| display: true, | |
| text: 'Timestamps' | |
| } | |
| }, | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| }) | |
| .catch(error => console.error('Error:', error)); | |
| } | |
| loadSheetData(); // Llama a la función para cargar los datos al cargar la página | |
| </script> | |
| </body> | |
| </html> |
The provided code is a key component for this purpose. It integrates with the Google API to access and process data stored in a specific spreadsheet.
This code allows for the creation of dynamic charts for three distinct variables collected by IoT sensors: temperature, humidity, and CPU temperature. Through the Chart.js library, clear and concise visualizations are generated that display the evolution of these variables over time.
The magic happens when filtering the data to display only the information from the last 24 hours. This is achieved using JavaScript to select and present only the most relevant data, thus providing a specific and updated view of the behavior of the monitored variables.
Some important aspects of the code include:
- Use of the Google API to retrieve data.
- Filtering of data based on a specific time period (in this case, the last 24 hours).
- Creation of dynamic and clear charts with Chart.js.
- Visualization of temperature, humidity, and CPU temperature data in three separate charts for better understanding.
This integration between Google, JavaScript, and Chart.js provides a powerful and flexible way to efficiently monitor and visualize IoT data in a user-friendly manner.
Feel free to try this out and adapt it to your own IoT datasets! The customization and expansion capabilities are vast, allowing for the inclusion of more variables, design adjustments, and much more..
Last 24h visualization of each variable from Google Cloud
Read related topics
- ⭐ Dashboard
- ⭐ For Agriculture: Irrigation System
- ✅2023 Journal: Design and Implementation of an IoT Control and Monitoring System for the Optimization of Shrimp Pools using LoRa Technology
- ✅2023 Journal: Device Free Indoor Localization in the 28 GHz band based on machine learning
- ✅2023 Paper: Evaluation of ML-based Positioning Systems with RSSI Measured on the User's Device or APs
- ✅2023 Paper: Comparison of Traditional ML Algorithms for Energy Consumption Prediction Models
- ✅ 2022 Paper: Learning-based Energy Consumption Prediction
- ✅2022 Paper: #Trilateration-based Indoor Location using Supervised Learning Algorithms
- ✅ 2021 Paper: #RaspberryPi-based #IoT for #shrimp farms Real-time remote monitoring with automated system
- ✅ 2021 Paper: Monitoring a turkey hatchery based on a #cyber_physical_system
- NEWS
- TALKS
- ✅ Learning-based Energy Consumption Prediction
- ✅ Localización en ambiente de interiores basado en #ML con radio enlaces de 28 GHz
- EMBEDDED SYSTEM
- ✅2021 Paper: Performance Comparison of Database Server based on #SoC #FPGA and #ARM Processor
- ✅2021 Paper: #FPGA Based Meteorological Monitoring Station
- ✅2020 Paper: Monitoring of system memory usage embedded in #FPGA
- ➡️ #FPGA projects for Engineering Students
- Sensor networks for #Agriculture (Paper)
- #PID control for DC motor
- #PID control for angular position
- Writing letters through eye movement using Machine Learning #ML
- EyeTracker #Classification of subjects with Parkinson's using Machine Learning #ML
- #EEG + #FlexSensor Medical Equipments - #HTMC
- Digital synthesizer
- Microcontroller Architecture #PIC #16F877A
- Behavioral signal processing with Machine Learning #ML (Paper)
- Phrases recognition with Machine Learning #ML (InnovateFPGA)
- Alphabet letters recognition with #MachineLearning using #EMG signals (Paper)
- #EMG signal #Classification with #MachineLearning (Paper)
- #Epileptic seizure prediction with #MachineLearning #ML
- #EEG signal processing with #MachineLearning #ML (Paper)
- #EEG + #EMG signal processing with #MachineLearning #ML
- ⭐ Dashboard
- ⭐ For Agriculture: Irrigation System
- ✅2023 Journal: Design and Implementation of an IoT Control and Monitoring System for the Optimization of Shrimp Pools using LoRa Technology
- ✅2023 Journal: Device Free Indoor Localization in the 28 GHz band based on machine learning
- ✅2023 Paper: Evaluation of ML-based Positioning Systems with RSSI Measured on the User's Device or APs
- ✅2023 Paper: Comparison of Traditional ML Algorithms for Energy Consumption Prediction Models
- ✅ 2022 Paper: Learning-based Energy Consumption Prediction
- ✅2022 Paper: #Trilateration-based Indoor Location using Supervised Learning Algorithms
- ✅ 2021 Paper: #RaspberryPi-based #IoT for #shrimp farms Real-time remote monitoring with automated system
- ✅ 2021 Paper: Monitoring a turkey hatchery based on a #cyber_physical_system
- NEWS
- TALKS
- ✅ Learning-based Energy Consumption Prediction
- ✅ Localización en ambiente de interiores basado en #ML con radio enlaces de 28 GHz
- EMBEDDED SYSTEM
- ✅2021 Paper: Performance Comparison of Database Server based on #SoC #FPGA and #ARM Processor
- ✅2021 Paper: #FPGA Based Meteorological Monitoring Station
- ✅2020 Paper: Monitoring of system memory usage embedded in #FPGA
- ➡️ #FPGA projects for Engineering Students
- Sensor networks for #Agriculture (Paper)
- #PID control for DC motor
- #PID control for angular position
- Writing letters through eye movement using Machine Learning #ML
- EyeTracker #Classification of subjects with Parkinson's using Machine Learning #ML
- #EEG + #FlexSensor Medical Equipments - #HTMC
- Digital synthesizer
- Microcontroller Architecture #PIC #16F877A
- Behavioral signal processing with Machine Learning #ML (Paper)
- Phrases recognition with Machine Learning #ML (InnovateFPGA)
- Alphabet letters recognition with #MachineLearning using #EMG signals (Paper)
- #EMG signal #Classification with #MachineLearning (Paper)
- #Epileptic seizure prediction with #MachineLearning #ML
- #EEG signal processing with #MachineLearning #ML (Paper)
- #EEG + #EMG signal processing with #MachineLearning #ML
https://operationalsmoke.blogspot.com/2016/12/wireless-temperature-sensor-nrf24l01.html?sc=1726576081547#c6407259836660593390
ResponderBorrar