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

▷ Optimizing Shrimp Pool Management: A Breakthrough in IoT with LoRa Technology

✅ Keywords : ➡️ #ControlSystem #MonitoringSystem #ShrimpPools #IoT #LoRa #FuzzyLogic #FuzzyLogicControl #Matlab #ESP32 #ESP32lora ✅ Introduction: We are thrilled to bring you the latest advancements in the world of aquaculture, where technology meets tradition in the most innovative ways. In this edition, we explore a groundbreaking project that aims to revolutionize shrimp farming practices in Ecuador. Titled "IoT-Based Shrimp Pool Optimization with LoRa Technology," this initiative presents a significant leap forward in addressing challenges faced by the shrimp farming industry, specifically focusing on disease prevention and optimized resource management. ✅ Content: Shrimp Farming Challenges and the Need for Innovation: Ecuador's shrimp farming industry, renowned for its breeding and export prowess, has grappled with disease outbreaks due to fluctuating environmental factors during the crucial maturation stage. Conventional methods have proven insufficient in tackling ...
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 ...
Post a Comment
Read more

▷ 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 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 h...
2 comments
Read more

▷ Advancements in Device-Free Indoor Localization Using Machine Learning and 28 GHz Band Technology

  ✅  Keywords : ➡️ #MillimeterWave #MMwave #28GHz #IndoorLocation #WirelessInSite #Remcom #Matlab #ML #MachineLearning #AI #ArtificialIntelligence #RegressionLearner #Classification ✅ Introduction: In this edition of our newsletter, we delve into groundbreaking research exploring the realms of device-free indoor localization techniques. Utilizing the power fluctuations in a communication link due to the presence of a human body, our researchers have employed advanced machine learning methods in the 28 GHz band. This innovative approach aims to redefine indoor positioning, offering unprecedented accuracy and efficiency. ✅ Content: In our quest to enhance indoor localization technology, our research team conducted comprehensive studies. Through meticulous simulations and experiments, we evaluated the potential of machine learning algorithms in the 28 GHz band, focusing on the effects of human presence within an enclosed space. 1. Database Construction and Simulati...
Post a Comment
Read more

▷ Hydroponics Tower Set

➡️  #Hydroponics About this item Vertical Hydroponic System for Organic Farming: The aeroponic tower is a modular, stackable and mobile vertical growing ecosystem, specifically engineered to maximize yield and automation, producing a fresh harvest with minimal effort. Effortless Results Every Time: Specifically tailored to provide the optimum controlled environment for growing a wide range of agricultural products in all environments and climates. With our combination of science, research and lab-tested hydroponic gardening systems, you get a significantly higher yield that grows faster consistently. Highly Energy Efficient: With Nutraponics, you are in control of air humidity, amount of water supply, spray timings and energy used. This hydroponics system enables the recovery of a very large percentage of energy already used in typical farming methods, saving approximately 66% of the energy. Highly Efficient Water Savings: Only a fraction of irrigation water is used by the plants t...
Post a Comment
Read more