Realtime Donut Chart

D3 powered donut or pie chart that updates when it receives information from the PubNub data stream network. Great for comparing percentage values against one another.

Embed

var pubnub = new PubNub({
  publishKey: 'demo',
  subscribeKey: 'demo'
});
eon.chart({
  pubnub: pubnub,
  channels: ['donut-chart'],
  generate: {
    bindto: '#chart',
    data: {
      labels: true,
      type: 'donut'
    }
  }
});

Publish

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

  pubnub.publish({
    channel: 'donut-chart',
    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