Creating realtime IoT dashboards and maps with PubNub


EON is an open source JavaScript framework for creating beautiful realtime dashboards, charts and maps.


The realtime publishing and streaming of data is a key component of the Internet of Things, especially when it comes to tracking and monitoring connected devices. We need a way to easily collect, detect, and distribute data as it’s created or changes, and immediately have it be received and acted upon.

There are several great frameworks for bringing data to life: D3.js, C3.js, WebGL, the list goes on. However, the missing component is how to deliver and reflect changes in that data in realtime, a vital requirement of the ever-growing IoT. Whether you’re streaming sensor data to a dashboard, monitoring device(s) health, or tracking a fleet of vehicles on a live-updating map, delivering the data in realtime is essential.

With this in mind, PubNub wanted an easier way to stream data to create beautiful IoT dashboards, charts, and maps. And so, the team built Project EON, an open source Javascript framework. EON not only enables you to build these dashboards and maps, but stream the raw JSON data to them as well.

iot maps and geolocation

Let’s check out the details! Then we’ll show you EON in action, using an Atmel MCU (because what’s better than connecting hardware and software?).

Realtime Charts and Dashboards for Connected Devices

The charting and graphing component of EON is based on C3.js, an open source charting library. This allows you to build realtime line, bar, pie, gauge, and donut charts. When new data is streamed, transitions are animated and changes are reflected in realtime — no manual refreshing required!

These charts are especially useful when it comes to monitoring and displaying data from Internet of Things connected devices, and gives you flexibility on how you want to display that data.

EON bar, pie, and gauge charts

EON bar, pie, and gauge charts

IoT use cases include:

  • Home automation: Temperature readings, power usage and consumption for individual devices
  • Connected car: RPMs, state of fleet of vehicles, analytics on vehicles including gas usage, capacity, or money earned, vehicle telemetry
  • Industrial and factory: Oil field sensor readings, brewery analytics (eg. pressure, capacity), factory statistics

Mapping for Connected Vehicles and Wearables

Realtime maps are a staple of any connected transportation application. For applications on the move, you need a way to track movement and current location.

The mapping and geolocation component of EON is based on Mapbox, a series of APIs and tools for building custom maps. Give EON a marker icon (bus, train, plane, person), and a geolocation. When the geolocation is updated, the market animates and travels to the new location.

EON maps for bus systems, aircrafts, and wearables

EON maps for bus systems, aircrafts, and wearables

IoT use cases for live-updating maps include:

  • Connected car, fleet management and public transportation: navigation, taxi/rideshare dispatch based on proximity, collect and publish road conditions, hailing and fare calculation for car services, monitor and calculate route and arrival times for public transit
  • Wearables: navigation and tracking, fitness applications
  • Air and sea: track and monitor location of aircraft and sea craft for consumer travel, freight, and delivery.

In Action: Atmel MCU Realtime Temperature Sensor

So let’s see EON and the Internet of Things working together!

Our demo application is a realtime temperature sensor built using an Atmel | SMART SAM D21 Xplained Pro and a temperature sensor. The concept is fairly simple, we collect the data using the Atmel sensor, and stream it in realtime to a live dashboard, where the temperature data is displayed as it changes.

That streaming and visualization is EON at work. And with some CSS added on, we have something that looks like this:

xplained_pro_demo_gif

Just think, this is just a simple demonstration. Imagine having hundreds or even thousands of these sensors spread across a region, all collecting and streaming that data to a single dashboard. Or even a single sensor streaming to hundreds of dashboards, all simultaneously.

The use cases are endless, and it really comes down to collecting data, streaming data, and visualizing that data. And that’s where EON does the work.

To learn more about the Atmel Realtime Temperature Sensor demo, check out our full tutorial and code repository, or watch the video below.

1 thought on “Creating realtime IoT dashboards and maps with PubNub

  1. Pingback: Creating realtime IoT dashboards and maps with PubNub - Internet of Things | Wearables | Smart Home | M2M

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s