EONChartChartMapEON Chart SDK 3.6.0

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.

 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. Not setting the UUID can significantly impact your billing if your account uses the Monthly Active Users (MAUs) based pricing model, and can also lead to unexpected behavior if you have Presence enabled.
<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

 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. Not setting the UUID can significantly impact your billing if your account uses the Monthly Active Users (MAUs) based pricing model, and can also lead to unexpected behavior if you have Presence enabled.
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.