BlogSupport

ChartChartMapEONPubNub EON Chart SDK

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.