Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


 
 

Create Real Time Charts and Maps with Project EON

Posted by Sandeep Chanda on Sep 8, 2015

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.



<script type="text/javascript" src="http://pubnub.github.io/eon/lib/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/lib/eon.css" />

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: '<publish key>', subscribe_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: <token>, channel: channel, connect: connect });

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

TAGS:

maps, IoT, cross platform development, open source development, PubNub


Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date