Skip to main content

▷ Data visualization: of Temperature, Humidity, and CPU Temp.

 


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

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 this post, we'll explore how to visualize real-time data from Google Cloud using JavaScript and the powerful charting library, Chart.js. The goal is to create an interactive environment that visually and dynamically displays valuable information.

The code we're showcasing is an exciting introduction to real-time data visualization. The first thing you'll notice is that the web page has a striking title, 'Real-time Data Visualization,' which sets the main purpose of the page.

The body of the page contains a chart canvas <canvas> and a 'Download CSV' button. The magic begins in the JavaScript script embedded in the HTML code. This script has three key functions:

  • loadSheetData(): This function loads data from a Google Cloud spreadsheet. It uses the Google Cloud API to retrieve information about temperature, humidity, and CPU temperature from the second row of the spreadsheet. These data are then used to create a dynamic chart using the Chart.js library. The line chart displays the evolution of these variables over time.
  • convertToCSV(dataArray): This function converts the data obtained from Google Cloud into a CSV format (comma-separated values) commonly used for data exchange. This allows users to download the data in CSV format for external use.
  • downloadCSV(): Here, the CSV conversion functionality is used to download a CSV file containing all the available data in the Google Cloud spreadsheet. Clicking the 'Download CSV' button automatically generates and downloads the file with the data for later use.
Here is the list of programming languages used for data visualization:
  • HTML: Used to structure the web page.
  • JavaScript: Used for dynamic operations, interacting with the Google Sheets API, manipulating dates, filtering data, and creating charts.
  • Chart.js: JavaScript library used to render interactive charts on the HTML canvas.
In summary, HTML is used for structure, JavaScript for logic and data manipulation, and the Chart.js library for visualizing data in the form of charts.

This code is an exciting first step towards real-time data visualization from Google Cloud. It serves as an excellent starting point for those interested in understanding how to access and display data in an attractive and accessible graphical format..

Real-time data visualization

Real-time data visualization


Read related topics

Comments

Post a Comment

Popular posts from this blog

▷ Gesture Recognition Touch Sensor

  ➡️  #GestureRecognition #TouchSensor #DFRobot About this item This sensor module integrates gesture recognition and touch detects functions in one piece, and provides an adjustable detection range within 0~30cm. When connected to your microcontroller, it can detect 5-way touch signal and 7 kinds of gestures: move left, move right, move forward, move backward, pull up, pull down, pull and remove. The sensor is equipped with the function of auto-sleep and wake up. The module comes with the gesture recognition algorithm and provides simple and reliable data output. Use the sensor to directly communicate with upper computer or micro-controllers like Arduino and Raspberry Pi via serial port. The onboard 5-way touch pad on the sensor can be directly used to detect touch, or you can extend the touch pad with wires to make it perfectly fit in your application. The outer shield for the sensor retains the advantages of Gravity series as well as makes the sensor more durable. This sensor can be
Post a Comment
Read more

▷ Enhancing Energy Efficiency with Learning-based Consumption Prediction

  ✅  Keywords : ➡️ #EnergyConsumptionPrediction #Energy #ESP32 #PZMT004 #OpenSource #OpenHardware #RegressionLearner #SustainableEnergyInformation #DataCenter  #NodeRed #EmbeddedSystems #MIcrocontroller #Phyton #MQTT #MySQL #Telegram ✅ Introduction: In this edition, we explore a groundbreaking research study titled "Learning-based Energy Consumption Prediction" conducted by our team of experts. We delve into the challenges posed by the increasing influx of data into cloud-fog infrastructures and the pressing need for sustainable energy consumption management. Our researchers have developed an energy consumption prediction model, focusing on hardware design, data pre-processing, and machine learning techniques. Join us on this journey as we discuss the methodology, findings, and future prospects of this pioneering study. ✅ Content: In our study, titled "Learning-based Energy Consumption Prediction," we address the critical issue of managing energy consumption in serv
Post a Comment
Read more

▷ The Social Cognitive Theory #SCT applied to reduce sedentarism in citizens

➡️  #SCT #SocialCognitiveTheory #Sedentarism Sedentarism is a growing concern in today's society due to its negative effects on health and well-being. However, the Social Cognitive Theory offers a solution to reduce it through a series of strategies based on human behavior. ➡️ According to this theory, human behavior is influenced by social perception, that is, how we perceive others and how they perceive us. In the case of sedentarism, one way to reduce it is through the creation of a social culture that values and promotes physical activity. ➡️ One way to achieve this is through education and awareness about sedentarism, physical activity, nutrition, quality of life, among other health-related aspects. Creating awareness campaigns about the importance of maintaining an active lifestyle can help influence social perception and motivate people to change their sedentary behavior. ➡️ Another strategy is the creation of programs and physical activities that are accessible and attracti
Post a Comment
Read more

▷ Adafruit #HUZZAH32 - #ESP32 Feather

➡️  #ESP32 #HUZZAH32 #Feather #dafruit El #HUZZAH32 es módulo de desarrollo basado en #ESP32, hecha con el módulo oficial WROOM32. Este hardware contiene: convertidor USB a serie incorporado, reinicio automático del cargador de arranque, cargador de iones de litio / polímero, y casi todos los GPIO que sacaste para que puedas usarlo con cualquiera de nuestras alas de plumas. El  ESP32  es una actualización perfecta del ESP8266 que ha sido tan popular. En comparación, el ESP32 tiene mucho más GPIO, muchas entradas analógicas, dos salidas analógicas, múltiples periféricos adicionales (como un UART de repuesto), dos núcleos para que no tenga que ceder ante el administrador de WiFi, procesador de mayor velocidad, ¡etcétera etcétera! Creemos que a medida que el  ESP32  obtenga tracción, veremos a más personas moverse a este chip exclusivamente, ya que tiene todas las funciones.  ✅   Overview :  240 MHz dual core Tensilica LX6 microcontroller with 600 DMIPS Integrated 520 KB SRAM Integrated 8
Post a Comment
Read more