PubNub EON Chart SDK 1.1.0

Unsupported SDK

PubNub no longer supports this SDK but you are welcome to contribute.

Get Code:

Hotlink

<script src="https://pubnub.github.io/eon/v/eon/1.1.0/eon.js"></script>
<link rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.1.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.

Note

Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the UUID, you won't be able to connect to PubNub.

<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

Note

Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the UUID, you won't be able to connect to PubNub.

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.

Configuration →