ChartChartMapEONPubNub EON Chart SDK

    <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 install eon-chart --save

Check out our bower example.

npm install eon-chart --save

Check out our webpack example.




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.

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.