Get Code:
Hotlink
<script src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
<link rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>
Bower
bower install eon-chart --save
Check out our bower example.
NPM
npm install eon-chart --save
Check out our webpack example.
Hello World
Plug your normal C3 config into the generate
param. Supply an array of PubNub channel in channels
param. eon.chart
returns the normal C3 chart object.
<div data-id="chart"></div>
<script>
let pubnub = new PubNub({
publishKey: 'demo', // replace with your own pub-key
subscribeKey: 'demo' // replace with your own sub-key
});
eon.chart({
pubnub: pubnub,
channels: ["c3-spline"],
generate: {
bindto: '#chart',
data: {
labels: true
}
}
});
</script>
That's it! Now you can publish messages to the same channel
and they'll render in the graph.
Example
let pubnub = new PubNub({
publishKey: 'demo', // replace with your own pub-key
subscribeKey: 'demo' // replace with your own sub-key
});
setInterval(function(){
pubnub.publish({
channel: 'c3-spline',
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);
All chart data must exist within an object called eon
. Also notice how the channel
and channels
matches in both examples.