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

▷ 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

▷ 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

▷ 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...
Post a Comment
Read more

▷ SD3031 Precision #RTC Module for #Arduino

  ➡️  #RTC #Arduino #DFRobot About this item This real-time clock #RTC module uses the SD3031 chip, which has an integrated crystal oscillator and temperature compensator. This provides high-precision timing and stability. At a temperature of 25 °C, the accuracy is maintained at ±3.8ppm (±0.32832 seconds/day). The SD3031 can be powered by button-cell batteries. This allows for accurate timing even when the main power source is interrupted. The RTC keeps track of seconds, minutes, hours, days of the week, dates of the month, and months and years. It also automatically adjusts the date at the end of each month and includes leap year corrections. The SD3031 has a built-in 70-byte SRAM for low-power data storage. Please note that due to recent air cargo regulations, special items such as batteries, magnets, and liquids are strictly audited for air transport. As a result, the RTC module does not come with batteries. You will need to purchase them locally. The button cell model that...
Post a Comment
Read more

▷ What is the MQTT protocol?

➡️  #MQTT #IoT #SensorNetwork The  #MQTT  (Message Queuing Telemetry Transport) protocol is a lightweight communication protocol designed to facilitate communication between IoT (Internet of Things) devices. It was developed in 1999 by Andy Stanford-Clark and Arlen Nipper and has become one of the most widely used protocols in the IoT world. ➡️ How does MQTT work? MQTT works with a publish/subscribe model, in which devices connect to a centralized broker or server and send and receive messages. The protocol uses an asynchronous communication model, which means that devices can send messages at any time, without needing an immediate response. In addition, MQTT uses a "topics" model, which allows devices to publish and subscribe to messages related to a specific topic. For example, a device could publish messages related to the "temperature" topic, while another device could subscribe to that same topic to receive the messages. ➡️ What are the advantages of MQTT? MQTT...
Post a Comment
Read more

▷ The Importance of Soft Processors in #FPGAs for Customized Digital Circuits

➡️ #FPGA #VHDL  #SoC # System-on-Chip  #Processor #SoftProcessors #DigitalCircuits #DigitalSystems FPGAs (Field-Programmable Gate Arrays) are programmable electronic devices that allow for the creation of customized digital circuits. Unlike ASICs (Application-Specific Integrated Circuits), which are integrated circuits specifically designed for one application, FPGAs can be programmed and reprogrammed to perform different tasks. ➡️  One of the most important advantages of FPGAs is their ability to implement soft processors, which are processors that are implemented in the FPGA using a hardware description language (HDL). Soft processors allow designers of integrated systems to create more complex and flexible systems than would be possible with conventional integrated circuits. ➡️  The importance of using soft processors in FPGAs lies in the ability to create highly customized integrated systems, tailored to specific user needs. Soft processors can be optimized for a...
Post a Comment
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

▷ The Importance of Energy Consumption Prediction in Data Centers

➡️  #EnergyConsumption #EnergyPrediction #DataCenter In the digital age, data centers are a key piece of the technological infrastructure that drives the global economy. From managing large databases to cloud services, these centers consume large amounts of energy, making it crucial to have a good energy consumption prediction. Here we will explain why it is important to have a good energy consumption prediction in data centers. ➡️ Reducing Costs Energy consumption in data centers can be a significant cost for companies. Therefore, it is important to have a good energy consumption prediction to be able to plan and control costs efficiently. A good energy consumption prediction will allow companies to allocate budgets and plan appropriately, which will help reduce long-term costs. ➡️ Reducing Environmental Impact In addition to costs, data centers also have a significant impact on the environment. Generating energy for data centers often involves burning fossil fuels, contribut...
Post a Comment
Read more

▷ #SoCs in Digital System Designs

➡️  #SoC # System-on-Chip  #Processor #FPGA In the world of digital electronics, the use of #SoCs or System-on-Chip is becoming increasingly common in digital system designs. These integrated circuits contain everything needed to implement a complete system on a single chip, greatly simplifying the design process and reducing the size, cost, and power consumption of the final system. A typical SoC includes multiple functional blocks such as a processor, memory, peripheral controllers, communication interfaces, and other specialized circuits. Depending on the system's needs, the designer can choose from a wide range of SoCs available in the market, which vary in size, processing capability, and features. The advantages of using SoCs in digital system designs include: ➡️ Integration of multiple functions in a single chip: SoCs allow integration of everything needed to implement a complete system on a single chip, reducing the size and cost of the final system. ➡️ Simplified desi...
Post a Comment
Read more