Realtime animated graphs with PubNub and C3.

View Example

View Example

View Example

View Example

View Example

<div id="chart"></div>
<script>
  var chart = new pubnub_c3({
    channel: "c3-spline", // the pubnub channel for real time data
    generate: {},         // c3 chart object
    flow: {},             // flow configuration
    limit: 10             // the size of your data buffer
  });
</script>

Include the Javascripts within your file.

<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../js/c3.js"></script>
<script src="../js/pubnub-c3.js"></script>

Initialize pubnub-c3, plug your normal C3 config into the generate param. Supply a PubNub channel in `channel`` param.

<div id="chart"></div>
<script>
var chart = new pubnub_c3({
  channel: "c3-spline",
  generate: {
    bindto: '#chart',
    data: {
      x: 'x',
      columns: [],
      labels: true
    },
    axis : {
      x : {
        type : 'timeseries',
        tick: {
          format: '%H:%M:%S'
        }
      }
    }
  }
});
</script>

That's it! Now you can publish messages to the same ```channel`` and they'll render in the graph.

Make sure your messages are in the format that C3 expects! For example:

var pubnub = PUBNUB.init({
  publish_key: 'demo',
  subscribe_key: 'demo'
});
setInterval(function(){
  
  pubnub.publish({
    channel: 'c3-spline',
    message: {
      columns: [
        ['x', new Date().getTime()],
        ['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);

Notice how the subscribe_key and channel matches.

This uses the included PubNub library to pubnub.publish() packets to the pubnub.subscribe() call waiting inside the C3 framework.

You probably want to publish data from the back-end instead. Check out our docs for more info:

http://www.pubnub.com/docs

PubNub-C3 works will all supported graph types in C3. Just check out the examples above.

You can learn more about customizing your graph from the official C3 docs.

If you happen to publish data at a higher frequency than your flow.duration than messages will get backed up in quene. An error will be displayed in the console if this is happening. You can fix this by decreasing your flow.duration.

Incoming messages from PubNub are stored in a message quene until they are rendered. You can use options.rate to configure how often messages in the quene will be rendered. rate is set to 10 (ms) by default which will render messages immediately.