Realtime Bar Chart

D3 powered bar chart that updates when it receives pings from the PubNub data stream network. Works best when comparing values to one another.

Embed

var pubnub = new PubNub({
  publishKey: 'demo',
  subscribeKey: 'demo'
});
eon.chart({
  pubnub: pubnub,
  channels: ['eon-bar'],
  generate: {
    bindto: '#chart',
    data: {
      labels: true,
      type: 'bar'
    },
    bar: {
      width: {
        ratio: 0.5
      }
    },
    tooltip: {
        show: false
    }
  }
});

Publish

var pubnub = new PubNub({
  publishKey: 'demo',
  subscribeKey: 'demo'
});
setInterval(function(){

  pubnub.publish({
    channel: channel,
    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);

Try PubNub Today

Connect up to 100 devices for Free