Hello People. This article discusses how to visualize IOT sensor data. You might be already aware of how to collect data from IOT sensors and store it in AWS DynamoDB with Raspberry Pi. This post describes how to pull this data from the database and visualize it.
The data tools from Chart.JS provide option to format the data as chart, list, table, or a single aggregated value. The chart object is formatted in the format used by
Chart.js. The lists and tables are collections of either charts or aggregated values.
To deliver this data to the browser, we need a simple development server. The server is responsible for fetching the data-points from the database and processing them according to the instructions provided in the topic metadata. The web app responsible for the visualizing the data fetches the processed data from the development server on page load.
Now let us look at how to visualize the data. The transformed data can be visualized with web application implemented with React using Material UI components. The Material UI library is a React component library implementing Material design. It provides fast and easy way to create scalable mobile friendly applications. The Material UI library also provides easy to use theming with professionally designed look and feel.
The charts are handled by
re-chartjs-wrapper, a small wrapper library for creating and updating
Chart.js Chart objects and their canvas elements as React components. This is necessary as
Chart.js is generic JS library, instead of a React component library. The wrapper library passes through the data to the chart library, which handles the actual rendering.
To make the visuals colorful, the colors are defined with chartjs-plugin-colorschemes
Chart.js plugin. This plugin provides some default themes, but I decided to use custom color set from the Material palette.
The above output can also be achieved in a simpler way using Grafana. Hope this article on How to visualize IOT sensor data is useful to you. Please also read about IOT Timestream data with Grafana