EON Charts

Realtime animated graphs with PubNub and C3.

Examples

• Spline Chart
• Bar Chart
• Donut Chart
• Gauge Chart

Installing

Hotlink

Bower

bower install eon-chart --save

Check out our bower example.

NPM

npm install eon-chart --save

Check out our webpack example.

Quick Start

Plug your normal C3 config into the

generate

channels

eon.chart

That's it! Now you can publish messages to the same

channel

var pubnub = new PubNub({
  publishKey:   'demo', // replace with your own pub-key
  subscribeKey: 'demo' // replace with your own sub-key
});

setInterval(function(){
  pubnub.publish({
    channel: 'c3-spline',
    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);

All chart data must exist within an object called

eon

channel

channels

Configuration

Parameter | Value | Default | :------------ |:---------------| -----:| | channels | An array of PubNub channels to subscribe to. Either

channels

channelGroups

false

channels

channelGroups

false

undefined

false

10

1000

limit

false

"auto"

"custom"

"category"

false

xType

"auto"

xType == "custom"

"x"

function(message, env, channel){}

function(m){return m}

function(){}

subscribeKey

false

false

More on Publishing Messages

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/documentation/

Customize Your Graph

eon-chart 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.

X Axis Configuration

Automatic

eon-chart will automatically use the PubNub message timestamp for chart x values. This timestamp is recorded when a message is published to the PubNub data stream network. This is the case when

xType

"auto"

Custom

If you'd like to supply your own Javascript timestamp, set

xType

custom

xId

x

1465417017340

var pubnub = new PubNub({
  publishKey:   'demo', // replace with your own pub-key
  subscribeKey: 'demo' // replace with your own sub-key
});

eon.chart({
  pubnub: pubnub,
  channels: ["c3-spline"], // the pubnub channel for real time data
  generate: {           // c3 chart object
    bindto: '#chart'
  },
  xType: 'custom',
  xId: 'x'
});

Notice how the code below publishes a key value pair called

x

pubnub.publish({
  channels: 'c3-spline',
  message: {
    eon: {
      'x': new Date().getTime(),
      'Austin': Math.floor(Math.random() * 99)
    }
  }
});

Category

Eon charts supports both time series bar charts and point of time bar charts. If you'd like to represent a bar chart in a single point of time, supply

xType: "category"

examples/bar.html

Multiple Points Per Payload

It is possible to publish multiple plot points per payload. Rather than using the object name

eon

eons

Array

eons

Note that if publishing multiple points per payload, you must use

xType: "custom"

xId

eons: [
  {
    x: new Date().getTime(),
    value: 1
  },
  {
    x: new Date().getTime(),
    value: 2
  }
]

Here's an example of data collected at 100ms increments, but only publishes every 1,000ms. Every payload includes 10 points with 100ms resolution. See a full example here.

setInterval(function(){
  var data = [];
  var date = new Date().getTime();

  for(var i = 0; i < 10; i++) {
      data.push({
          'pub_time': date + (100 * i),
          'Austin': Math.floor(Math.random() * 99)
      });
  }
  pubnub.publish({
    channels: [channel],
    message: {
      eons: data
    }
  });
}, 1000);

Disable

You can disable eon-chart modifications by setting

xType

false

Distributed Systems

You can publish from multiple sources into one chart. For example, you can graph the individual memory usage from 3 servers by supplying the same channel to your PubNub publish requests.

Check out our distributed chart example.