Create Real Time Charts and Maps with Project EON

PubNub is a global data stream network, providing real-time communication for IoT, mobile and web. It has a wide series of solutions for most common use cases in event and data stream needs ranging from home automation, device signalling, to wearables, geolocation and financial data streaming.

Recently the company produced an open source platform called EON for creating charts and maps that provides real-time data stream animation. You can create analytical dashboards that reflect the true nature of the changing data, thereby allowing you to take action in the real world based on what you see.

For starters, you can include the EON JS and CSS files in your page to start leveraging the charting and map features.

To create your own custom charts or maps, you can clone the repository, install the bower dependencies and then compile using gulp.

EON charts are based on C3.js and you need to use the C3 chart generation config to configure your charts with data. The C3 config is supplied as a parameter to eon.generate() method from the framework:

var channel = "c3-bar" + Math.random(); eon.chart({ channel: channel, generate: { bindto: '#chart', data: { labels: true, type: 'bar' }, bar: { width: { ratio: 0.5 } }, tooltip: { show: false } } });

You can then use the PubNub publishing feature to publish a data stream to the channel created above.

var pubnub = PUBNUB.init({ publish_key: '', subscribe_key:  }); setInterval(function(){ pubnub.publish({ channel: channel, message: { columns: [ ['Austin', Math.floor(Math.random() * 99)], ['New York', Math.floor(Math.random() * 99)], ['San Francisco', Math.floor(Math.random() * 99)], ['Portland', Math.floor(Math.random() * 99)] ] } }); }, 1000); 

Similarly for maps, you can embed a map using eon.map():

eon.map({ id: 'map', mb_token: , channel: channel, connect: connect });

Then use the PubNub publishing feature to publish the map data stream:

var pubnub = PUBNUB.init({ publish_key: '', subscribe_key: ' ' }); setInterval(function(){ PUBNUB.publish({ channel: 'eon-map', message: [ {"latlng":[31,-99]}, {"latlng":[32,-100]}, {"latlng":[33,-101]}, {"latlng":[35,-102]} ] }); }, 1000); 
Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS

homes in the real estate industry

Exploring the Latest Tech Trends Impacting the Real Estate Industry

The real estate industry is changing thanks to the newest technological advancements. These new developments — from blockchain and AI to virtual reality and 3D printing — are poised to change how we buy and sell homes. Real estate brokers, buyers, sellers, wholesale real estate professionals, fix and flippers, and beyond may