Realtime Gauge Chart

D3 powered gauge chart that updates when it receives information from the PubNub data stream network. Awesome for showing the status of a single value.

Embed

var pubnub = new PubNub({
  publishKey: 'demo',
  subscribeKey: 'demo'
});
eon.chart({
  pubnub: pubnub,
  channels: ['eon-gauge'],
  generate: {
    bindto: '#chart',
    data: {
      type: 'gauge',
    },
    gauge: {
      min: 0,
      max: 100
    },
    color: {
      pattern: ['#FF0000', '#F6C600', '#60B044'],
      threshold: {
        values: [30, 60, 90]
      }
    }
  }
});

Publish

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

setInterval(function(){

  pubnub.publish({
    channel: 'eon-gauge',
    message: {
      eon: {
        'data': Math.random() * 99
      }
    }
  })

}, 1000);

Try PubNub Today

Connect up to 100 devices for Free