Using EON charts in a Ember Page - pubnub

Question

We are trying to use (pubnub) EON charts in an Ember application.
While we see this which talks about using pubnub APIs in Ember, this doesn't talk about EON charts.
Is there a "Ember wrapped" EON chart variant? Either way some sample code will be helpful.

Answer 1

You can use EON with Ember just like any other library. Check out this example which combines the EON real time spline chart example and the ember starter kit.
Your HTML:
<script type="text/javascript" src="//pubnub.github.io/eon/v/eon/0.0.9/eon.js"></script>
<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/0.0.9/eon.css"/>
<div id="chart"></div>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
And then in your JS:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
var pubnub = PUBNUB.init({
publish_key: 'demo',
subscribe_key: 'demo'
});
var channel = "c3-spline" + Math.random();
eon.chart({
channel: channel,
history: true,
flow: true,
pubnub: pubnub,
generate: {
bindto: '#chart',
data: {
labels: false
}
}
});
var pubnub = PUBNUB.init({
publish_key: 'demo',
subscribe_key: 'demo'
});
setInterval(function(){
pubnub.publish({
channel: channel,
message: {
eon: {
'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);