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);