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);