How To Build An IoT Dashboard
Tags: iot, admindashboard, javascript, webdev
Published: 2019-05-20 07:35:13

---
title: How To Build An IoT Dashboard
published: true
description: In this article,​ we will review the IoT data processing platforms and consider the various protocols. Also, we’ll consider some nuances of connecting devices to platforms and dashboards.
tags: IoT, admindashboard, JavaScript, webdev
canonical_url: https://flatlogic.com/blog/how-to-build-an-iot-dashboard/

---

The Internet, as it turns out, cannot be contained. From personal computers, mobile phones and ancient routers we are moving into a new era – the Internet of Things era. Cars, watches, even dog collars, fridges, and many other household items are created able to connect to the Internet. All of it is done to use their data and analyze various customer needs.

In this article, we will look at how to actually use the data Internet of Things generates, why analyze it, and finally, what tools to use to build an information system.

###Why build IOT dashboards?

There are several reasons for building dashboards that will show info from the Internet of Things:

- Automatically enhance incoming data from your equipment with the location, time, weather, temperature and other external factors unique to your customers.
- With the help of IoT Dashboards, users and operators can (remotely) monitor and control specific assets and processes and, depending on safety requirements, access and control an environment from anywhere in the world.
- Monitor hardware and software performance to reduce operating costs, as well as lower maintenance costs by pre-empting product failures and minimizing downtime.
- Learn how customers use IoT devices at a granular level and let it guide your product development.
- Quickly bring your own IoT analytics product to market to offer customers premium dashboards and reporting functionality.

###Before building IoT dashboard

Before building your IOT dashboard you should ask yourself some important questions:
- What components should be presented on the dashboard?
- Where will my data be received and processed?
- What protocols will I use?
- Will I build custom dashboards or use ready-made solutions?
- What gateways will you use?
- Why do I even do IOT dashboards?

We will review the IoT data processing platforms and consider the various protocols. Also, we’ll consider some nuances of connecting devices to platforms and dashboards.

This will help you deal with all the variety of solutions that exists in this market.

It is also worth mentioning that articles on this topic across the Internet are split into two types. The first type is how to build dashboards in terms of UI, and the others tell you how to build dashboards in terms of infrastructure. At first, I will review dashboards contents, platforms, and software.

If you have tried to build your own IoT application architecture, you know how complex this simple diagram is. All of these things are time and money drains which require hundreds of man-hours to correct, test, and deploy.

To build an IoT application you need to create a structure encompassing: devices, variables, dashboards, and alerts.

![IoT application](https://lh4.googleusercontent.com/VKZXWL4SzdnByKu-C3UDIYJGCkkiiZ5-1iXbWTZyURzWtAhW4ShjUBgKONJSkY_fJLcfotvU7jLo4B8HjhUHUAkxsX9UC_UHvhoC4m8x2Wt6W-GchOfAZ0t5haBouhITtNSvs-1k)

###Types of IOT connections, architecture, and networks

An IoT system has a three-level architecture: devices, gateways and data systems. The data moves between those levels via four types of transmission channels.

![IoT system](https://lh3.googleusercontent.com/UHre7aV9j0z-MFu3PNvsj5BbX-L5Yi9LbEHUp8SOvLi01wVaqByC53Z622REr26DSJMd1o6T319T_vI-Uriz3_9Q7KJAbRz8PxVwHnhMqaWIxYR9RRY9qwjwq_jII5RxentGEhTy)

###Connection types:

1. Device to Device – direct contact between 2 smart devices;
2. Device to Gateway – data transfer between sensors and gateways;
3. Gateway to Data systems – data transfer from the gateway to the data cloud;
4. Between Data systems.

###Network types:

A nanonetwork — a set of small devices (sized a few micrometers at most) that perform very simple tasks such as sensing, computing, storing and actuation. Such systems are applied in the biometrical, military and other nanotechnology areas.

NFC (Near-Field Communication) — a low-speed network to connect electronic devices at a distance within 4 cm from each other. Possible applications are contactless payment systems, identity documents, and keycards.

BAN (Body Area Network) — a network to connect wearable computing devices that can be worn either fixed on the body or near the body in different positions, or embedded inside the body (implants).

PAN (Personal Area Network) — a net to link up devices within a radius of roughly one or a couple of rooms.

LAN (Local Area Network) — a network covering the area of one building.

CAN (Campus/Corporate Area Network) — a network that unites smaller local area networks within a limited geographical area (enterprise, university).

MAN (Metropolitan Area Network) — a big network for a certain metropolitan area powered by the microwave transmission technology.

WAN (Wide Area Network) — a network that exists over a large-scale geographical area and unites different smaller networks, including LANs and MANs.

###Protocols

In this section, I have presented the main protocols that work with IoT dashboards.

MQTT (Message Queue Telemetry Transport) is a lightweight protocol which is the most popular for sending simple data flows from sensors to applications and middleware. This protocol functions on top of TCP/IP and includes three components: subscriber, publisher, and broker. The publisher collects data and sends it to subscribers. MQTT suits small, cheap, low-memory and low-power devices.

DDS (Data Distribution Service) is an IoT standard for real-time, scalable and high-performance machine-to-machine communication. You can deploy DDS both in low-footprint devices and in the cloud.

AMQP (Advanced Message Queuing Protocol) is an application layer protocol for message-oriented middleware environments. It is approved as an international standard. Its processing chain includes three components that follow certain rules.

Bluetooth is a short-range communication technology integrated into most smartphones and mobile devices, which is a major advantage for personal products, particularly wearables. Bluetooth is well-known to mobile users.

###Choosing the right platform. Difference between platforms and dashboards.

An IOT platform is a hardware and software system for managing IoT devices and collecting, storing, visualizing and analyzing data from those devices. There are many IOT platforms on the market, and their functionality varies enormously. Although all IOT platforms will have a dashboard to display data, some platforms are, in fact, only dashboards, which are only really capable of displaying data from devices.

You will often find the terms Dashboard and Platform used interchangeably. An IOT Dashboard can be considered a basic IOT platform.

A Dashboard can usually display data and control devices.

However, an IOT platform can usually

- Collect data from various sources
- Store data
- Control Devices
- Display Data
- Run Tests
- Deploy device updates
- Manage device Inventory

###Current Platforms:

[Thingsboard](https://thingsboard.io/)ThingsBoard is an open-source IoT platform for device management, data collection, processing and visualization for your IoT projects.

[Thingstream](https://thingstream.io/)-Thingstream’s intelligent Global Connectivity Platform provides low power, low cost, ubiquitous IoT connectivity via MQTT over GSM.

[ThingWorx](https://www.ptc.com/en/resources/iot/product-brief/thingworx-platform)– ThingWorx delivers tools and technologies that empower businesses to rapidly develop and deploy powerful industrial IoT applications and augmented reality (AR) experiences.

[Thingspeak](https://thingspeak.com/) -ThingSpeak is the open IoT platform with MATLAB analytics.

[Wolkabout](https://wolkabout.com/)– IoT Application Enablement Platform that integrates any device, transforms real-time readings into meaningful data and combines different devices and services into a complete IoT solution.

[IOTgo](http://iotgo.iteadstudio.com/)-IoTgo is an open source IoT platform, like WordPress, ZenCart and all other open-source software. You can deploy your own IoTgo cloud platform.

[Kaa](https://www.kaaproject.org/) is an open-source IoT platform for device management, data collection, analytics and visualization, remote control, software updates and more.

###Difference between an IoT platform and a DIY solution

An IoT platform, in simple words, is an ecosystem which is already combined and put together to facilitate hassle-free and less time-consuming creation of IoT products and solutions. An IoT platform is an Internet of Things environment on its own, and it can be used by businesses anywhere and everywhere for creating their very own versions of IoT products, solutions, and services. 

On the other hand, an IoT DIY solution is when you, as a business or System Integrator, combine your thoughts, experiences, and mindsets to create technological innovations and advancements that will help you put together your very own IoT solution on the world map.

If you need a fairly simple solution, the budget is very limited, there is no need for branding and you work with the most experienced devices with widespread protocols – choose a ready-made solution.

For more complex cases, consider building your own custom solution.

###Examples of ready-made dashboard solutions

These are the dashboards that support the MQTT protocol and can be used to display data from MQTT devices.

[Node-Red](https://nodered.org/)– Open source Node js based platform for flow-based programming. Device management using the Node-red UI.

[Thingsboard](https://thingsboard.io/)– Open source data visualization and device management. Open source Apache license. Available as a cloud service or via installation on local hardware.

[Freeboard.io](https://freeboard.io/)– Open source. Very popular, but doesn’t currently support MQTT out of the box.

Of course, you can use custom solutions.

###Building a custom dashboard

Before creating your own dashboard, do the following:

1) Structure your Solution – to build an IoT application you need to create a structure encompassing: devices, variables, dashboards, and alerts.

2) Select a Device – devices are the individual hardware selected to sense data in a particular environment. It is very important that the device is selected based on the environment and the requirements you’re looking for it to complete. Also please consider your connection protocol of choice, be it WiFi, Bluetooth, Sigfox, LoRa, Ethernet, etc.

###Components

Components that will be used in the dashboard depending on the data you need to show and what you build the dashboard for.

We will consider a couple of data types and the purposes for which they were built.

Imagine you have a bunch of temperature sensors that are used in an existing system to control your home heating. A good approach to networking those sensors would be MQTT. Each sensor posts to a particular topic and the boiler controller are subscribed to those topics.

Now, you’d probably want a dashboard, and it’s easy enough to get the current temperature data via MQTT: just subscribe to the temperature topics using your client library of choice. But what about temperature data history? For that, we need some kind of data storage.

Components for this case should be:

- Status
- Temperature
- Camera
- Map
- Graphics
- Time

You also need these extra modules in your app, if are building it for other users:

Alerts. An alert is any action triggered when a sensor’s readings fulfill or exceed any design rule. For instance, you can send an email or an SMS anytime a sensor stops sending data or exceeds a threshold for temperature or vibration.

Authentification, login, user administration, branding.

###On top of Flatlogic dashboards

In Flatlogic, we have experience in building data display solutions with the Internet of Things.

You can use our components to display both parts of the information and to build a full front-end solution. To display the graphs, you can use the components of the Analytics module:

![IoT dashboard](https://lh5.googleusercontent.com/fG46HG1JMyV35fCIBdyzxKb7VEuYedzzBOYTSAtsCrZm21-3i5XHabIXk2-iBV94nVVHCRxCiVRwCPlkVONXUYXcl8Ts-doIyg9oSG_zlWt1S2oCKPLjoPO1YLsAtQUkHLsOho2C)

Widgets can be used to display weather and various quantitative indicators:

![IoT dashboard](https://lh3.googleusercontent.com/sxXTAg5wf2BSz1zb18TVCtcdrTY2cKKWSFm_C8e-2F0d4t3AlPds-sUpeP53apVT44A_GAshx-sykcirtoQW7XKPy5VCZClPiiMSE55mtxCs8t1tZylSShD3Ev8IdEtzUnsBJfC7)

You can also build a complete profile management solution using the People module:

![IoT solution](https://lh5.googleusercontent.com/7KBR0tpI7CC_CHyxUK-3uXjztuEuNpKjMrJ6lEJa6ZpiTCtASK49O5sQK3JBABUKonVeAPhs73Wcgh2H8aS43ORrubOcoRmz7zq3Nhrt2tzdA-EIqXB7UeB9bwu8j4e4I-yJmcfp)

In the Charts, Maps and Table modules you will find many options for displaying these components:

![IoT](https://lh5.googleusercontent.com/bJJaVpgROqvuspQiuhSUOj8zqNMGOo3olmJZIkC6gc1GjAk4cijjsWreeEa1Xnqi4g1J8X0TlUlkxAWS0Q7Q6SPz0lG7c-kKzeqWzQdHbpJsnIzjbUOKhni1GibzY_GHMGD9Ns6U)

You can also customize your own look & feel. Design layouts that exactly meet your needs. Change widget and background colors, add logos, match your branding, make it your own.

You can also do it like a white label solution:

- Set up your logo
- Match your branding
- Define your look and feel
- Responsiveness

###Recap and conclusion

In today’s variety of technologies, before choosing any solution, you need to determine what you need it for. There are 2 main ways to display data from IoT: build your own solution or trust ready-made platforms.

Ready-made platforms can be useful for some common cases. There is no deep customization and only a basic set of components is included. Also, do not forget that you depend on the capacity and protocols of the platform with which you work. There is also a chance your data will leak.

If you have a lot of devices with different protocols and data, consider building your own solution. You should choose this option if want to build a complete solution with alerts, user rights, your own design, an article. In general, you need to know what you want. And here ready [admin templates](https://flatlogic.com/admin-dashboards) 
can be useful.

Originally published at https://flatlogic.com/blog/how-to-build-an-iot-dashboard/