• Stars
    star
    123
  • Rank 290,145 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Realtime animated graphs with PubNub and C3.

Please note that this project is no longer actively maintained or accepting Pull Requests. The EON library remains available on npm, bower, or through hotlink.


EON Charts

Realtime animated graphs with PubNub and C3.

Examples

Installing

Hotlink

<script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
<link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>

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 param. Supply an array of PubNub channel in channels param. eon.chart returns the normal C3 chart object.

<div id="chart"></div>
<script>
  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"],
    generate: {
      bindto: '#chart',
      data: {
        labels: true
      }
    }
  });
</script>

That's it! Now you can publish messages to the same channel and they'll render in the graph.

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. Also notice how the channel and channels matches in both examples.

Configuration

Parameter Value Default
channels An array of PubNub channels to subscribe to. Either channels or channelGroups must be supplied. false
channelGroups An array of PubNub channel groups to subscribe to. Either channels or channelGroups must be supplied. false
generate Your C3 chart generation config. undefined
flow Used to update spline charts over time series. false
limit The size of your buffer. How many values to display on the chart before shifting the first value off and appending a new value. This is not native to C3. 10
rate Interval at which new datapoints are drawn on the chart in milliseconds. 1000
history Fill the buffer by using PubNub history call to retrieve last limit messages. Requires PubNub storage to be enabled. false
xType Your x axis configuration. Can be "auto", "custom", "category", or false. Read more about xType below. "auto"
xId Your x axis source if xType == "custom" "x"
message A function to call everytime a PubNub message is recieved. See PubNub subscribe function(message, env, channel){}
transform Method for changing the payload format of your stream. See example function(m){return m}
connect A function to call when PubNub makes a connection. See PubNub subscribe function(){}
pubnub An instance of the PUBNUB javascript global. This is required when using your own keys. See the subscribeKey example. false
debug Log EON events to console as they happen 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 is set to "auto".

Custom

If you'd like to supply your own Javascript timestamp, set xType to custom. Then, set xId to the x value that appears within your published messages. Any custom x must be a microtime date like 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 with every message.

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" and only the latest data will appear in the chart categorized by key. See examples/bar.html for an example.

Multiple Points Per Payload

It is possible to publish multiple plot points per payload. Rather than using the object name eon use the name eons and supply an Array. Because you use the eons property name, the library will know to loop through the array and plot each point.

Note that if publishing multiple points per payload, you must use xType: "custom" and supply an 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 to false. By default C3 will use an incremental x axis (1,2,3,4...).

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.

More Repositories

1

eon

An open-source chart and map framework for realtime data.
Shell
879
star
2

pubnub-api

APIs for developers building secure realtime mobile, web, and IoT apps.
JavaScript
817
star
3

java

PubNub Java-based APIs for core Java, Android
Java
624
star
4

javascript

PubNub JavaScript SDK docs https://www.pubnub.com/docs/sdks/javascript
JavaScript
539
star
5

real-time-stocks

This repository includes full app code for streaming stock quote data from PHP to a JavaScript HTML5 app. The PubNub Real-time Network offers a Globally Distributed solution for streaming real-time data to millions of users in less than 0.25 seconds. This provides developers the capability to utilize the Service Mediation aspect of the PubNub network to stream data over TCP socket connections using WebSockets and other protocols. This repository is an HTML5 JavaScript and CSS3 example using live real-time data stream from a server. Where PubNub fits in is in the mediation and brokering of the message stream in real-time to millions of people. The PubNub Real-time Network provides highly reliable services for real-time data streams. The PubNub Real-Time Network Build real-time apps quickly and scale them globally.
HTML
205
star
6

objective-c

PubNub Objective-C based APIs for iOS and OS X
Objective-C
178
star
7

react-chat-components

Chat UI Components to build chat applications with PubNub on React with TypeScript support
TypeScript
173
star
8

python

PubNub Python-based SDK with Asyncio support
Python
154
star
9

paper-chat

A simple chat room in Material Design build with Polymer (Polymer 0.5)
HTML
152
star
10

eon-map

Realtime maps with PubNub and MapBox.
JavaScript
135
star
11

php

PubNub clients for PHP
PHP
124
star
12

ruby

PubNub Ruby-based APIs
Ruby
119
star
13

genetic-car-2

Genetic Cars 2 (Globally Distributed)
JavaScript
114
star
14

rltm.js

Easily swap realtime providers with a single code base
JavaScript
107
star
15

go

PubNub clients for Go
Go
104
star
16

arduino

The Official PubNub Arduino-based API!
C++
103
star
17

c-sharp

PubNub clients for C-Sharp based languages, including MS Windows C#/.net, Silveright, IIS, and Mono
C#
101
star
18

typescript-ref-app-team-chat

Team Chat Reference Application for PubNub Chat With React, Redux and TypeScript
TypeScript
98
star
19

chat-engine

Object oriented event emitter based framework for building chat applications in Javascript.
JavaScript
96
star
20

workshop-raspberrypi

IoT Hands On Workshop: Build a Realtime App with Raspberry Pi 2 and PubNub. Demo Web ->
Python
89
star
21

pubnub-angular

Official PubNub AngularJS SDK
JavaScript
84
star
22

angular-js

Example of AngularJS integration with the PubNub AngularJS SDK v1
CSS
78
star
23

webrtc-chat

A simple webrtc chatting application.
JavaScript
69
star
24

pubnub-xkcd

http://twitter.com/stephenlb - PubNub Powered xkcd MMO World Game. Live with WebSockets and rendered with HTML5 Canvas.
JavaScript
56
star
25

react

TypeScript
49
star
26

webgl-visualization

A visualization of the PubNub traffic in WebGL.
JavaScript
47
star
27

pi-house

A simplified version of Raspberry Pi House web interface.
CSS
47
star
28

c

PubNub clients for C, C++, and Raspberry Pi
C
46
star
29

d3-bubble

Showcasing d3 bubble chart using PubNub streaming data
CSS
43
star
30

c-core

PubNub for C and C-like platforms build home
C
43
star
31

open-growth

Open Growth - grow your business 10x by automating tedious workforce tasks with machines - rules-based "customer delighter" with MonkeyLearn ML/AI enriched customer profile building. A framework for Developers capable of delighting your customers with template generated multi-channel messages in realtime.
JavaScript
38
star
32

pubnub-chat-channel-presence

PubNub Chat with Channel Presence is a new and breakthrough technology that has never existed until now empowering you (the developer) to obtain details about a PubNub Channel's Occupants. Receive Server Sent Notifications World-wide from PubNub's 10 Data Centers regarding "Who's There?" - Who is online and who will receive PubNub messages.
JavaScript
37
star
33

pubnUber

PubNub Uber (phonegap)
JavaScript
35
star
34

transportation

PubNub Transportation Solution
CSS
33
star
35

video-sync

PubNub VideoSync SDK for YouTube Video Multi-user Playback
HTML
32
star
36

iot-push-demo

A simulated IoT panel desktop UI for Android (GCM) and iOS (APNS) push notification demo using Cordova
JavaScript
32
star
37

pubnub-angular2

JavaScript
32
star
38

unity

PubNub for Unity3D 5.x
C#
31
star
39

backbone

An example of BackboneJS integration with the PubNub library.
JavaScript
30
star
40

rust

PubNub Rust SDK.
Rust
29
star
41

pubnub-jscourse

HTML
28
star
42

dart

PubNub Dart SDK
Dart
27
star
43

super-simple-chat

A simple chat room demo for a PhoneGap tutorial
CSS
26
star
44

Unity-Realtime-Chat-Room-Tutorial

A realtime unity chat room for iOS, Android, web and others.
C#
26
star
45

pubnub-android-chat

Java
25
star
46

swift

PubNub native Swift SDK for iOS, MacOS, WatchOS, TvOS
Swift
24
star
47

oi-web-notifications

A simple realtime web notification demo
CSS
23
star
48

Realtime-RaspberryPi-Temperature-Humidity-Sensor

Stream live temperature and humidity readings from the Raspberry Pi and visualize through realtime charts and graphs
JavaScript
22
star
49

LeapMotionServoBots

LeapMotionServoBots
Java
21
star
50

pubnub-polymer

A Custom element to connect PubNub data stream.
HTML
19
star
51

eon-workshop

Hands on Exercises for the EON workshop
HTML
19
star
52

secure-key-exchange

Babel - Encrypted Self Destructing Messaging with Asymmetric Key Exchange Public-Private Crypto.
JavaScript
19
star
53

haskell

PubNub Haskell SDK
Haskell
18
star
54

pongnub

Realtime Multiplayer Online Pong
JavaScript
16
star
55

pubnub-rickshaw-memory

Publish the memory usage of a nodeJS instance in pubnub-rickshaw format
JavaScript
16
star
56

d3-wordcloud

Demo of a word cloud generated from messages from a chat room
JavaScript
15
star
57

pubnub-ember

PubNub Ember SDK
CoffeeScript
14
star
58

swift-radio-station

Swift
14
star
59

am-chat

A demo of using PubNub Access Manager to secure a public chatting experience.
JavaScript
14
star
60

pubstrap-chat

Bootstrap 3 Chat Plugin
JavaScript
14
star
61

flutter-ref-app-simple-chat

Dart
13
star
62

go-metrics-statsd

library for sending statsd messages via go-metrics https://github.com/rcrowley/go-metrics
Go
13
star
63

ios-swift-todo-app

Collaborative to-do app in swift
Swift
13
star
64

swift-ref-app-team-chat

Team Chat Reference Application for PubNub Chat With SwiftUI and ReSwift
Swift
13
star
65

chat-examples-javascript

Sample code and apps for PubNub’s Chat Resource Center
JavaScript
12
star
66

webgl-stackhack

A collaborative block painting game.
JavaScript
12
star
67

eon-builder

CSS
12
star
68

chat-engine-examples

Examples for angular, react, jQuery, and NodeJS
HTML
12
star
69

swift-apple-watch-heart-rate-pubnub-eon

Objective-C
12
star
70

collab-notes-react

A collaborative stickie note web app with React.js, ES6, and PubNub
CSS
12
star
71

easy-hacker-news-stream

The Easiest Way to Create a Hacker News Feed using Python and JavaScript - We’ve all been sitting in the back of a CS lecture or class and looked up from our laptop to actually listen and taken a quick peek around at everyone’s laptops. More likely than not, quite a few of those screens were displaying the all too familiar Hacker News orange. While maybe we should all pay attention more to the speaker, it seems new, cool news always takes precedence. So what if you were determined to never miss a single article? Or what if you wanted to get every update from the site and automate based off that new information? By leveraging the power of PubNub’s real time global network and scraping a little RSS everyone will never miss a new Hacker News article again.
HTML
12
star
72

lua

lua
Lua
11
star
73

flutter-demo-app

Dart
11
star
74

kotlin-telemedicine-demo

A sample application that demonstrates how to build a feature-rich chat app for telemedicine using PubNub Chat and PubNub Kotlin SDK
Kotlin
11
star
75

pubnub-drone

Parrot AR 2.0 Drone Controlled with PubNub
JavaScript
10
star
76

auth-chat-demo

A simple chat room demo using PubNub JavaScript pub/sub API for both client and server, combined with PubNub Access Manager APIs and OAuth.
JavaScript
10
star
77

chat-engine-tutorial

JavaScript
10
star
78

moderation-dashboard

Moderation Dashboard is a React application that provides moderation capabilities to Chat applications built using PubNub and PubNub Chat Components
JavaScript
9
star
79

chat-examples-java

Sample code and apps for PubNub’s Chat Resource Center
Java
9
star
80

pubnub-tessel

Getting Started Guide and Example Programs for Tessel.io / PubNub integration
CoffeeScript
9
star
81

polymer-cat-chat-v1

A simple chat room in Material Design build with Polymer (Polymer 1.0)
HTML
9
star
82

LinkItONE

PubNub LinkIt ONE Library
C++
8
star
83

redux

Redux based Client State Management for interacting with PubNub Realtime APIs
TypeScript
8
star
84

vue

JavaScript
8
star
85

pubnub-rickshaw

HTML
8
star
86

pubnub-bluetooth

Connect PubNub to tiny-circuits bluetooth module (nrf8001)
JavaScript
8
star
87

kafka-bridge

Messages from your Kafka cluster can be received on a target mobile device.
Rust
7
star
88

chat-engine-apple

Objective-C
7
star
89

tutorial-app-react-native

JavaScript
7
star
90

javascript-quickstart-platform

JavaScript
HTML
7
star
91

rabbitmq

Adapter to connect PubNub's real-time network with RabbitMQ deployments behind an enterprise's firewall
Java
7
star
92

bitcoin

Real-time BitCoin graphs with PubNub and D3.js
CSS
7
star
93

kotlin

PubNub Kotlin SDK
Kotlin
7
star
94

bootstrap-content-curator

A real-time feed management system using Bootstrap UI that enables the rapid authoring of feed headlines for applications in social news, social TV, social music, social sports, social commerce and social finance.
HTML
7
star
95

johnnyfive-eon

Realtime data visualization with PubNub EON Demo & Arduino: Displaying the data sent by Arduino with DS18B20 temperature sensor using Johnny-Five
HTML
7
star
96

pubnub-chatterbox-ios

Objective-C
6
star
97

brightscript

Brightscript
6
star
98

js-chat

PubNub JavaScript Chat SDK
TypeScript
6
star
99

graphql-pubnub-subscriptions

TypeScript
6
star
100

chat-examples-swift

Sample code and apps for PubNub’s Chat Resource Center
Swift
5
star