Building Real-time Charts for Live-Updating Data

3 min read Michael Carroll on Oct 27, 2015
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

How to build real-time charts where data is streamed to a live-updating UI dashboard using PubNub Data Streaming and the EON JavaScript framework.

This tutorial covers how to build real-time charts by streaming a data source to an interactive UI using the EON JavaScript Framework. In this general overview, we'll introduce you to four types of real-time charts (see below), and in future posts, we'll drill down deeper into each one. We'll use PubNub Data Streams to stream the data to our real-time chart.

real-time chart from live data source

Our four types of real-time charts we'll look at today:

A full open source GitHub repository for this project is available here.

Real-time Charts Quickstart

Parameter Value Default
channel Your PubNub channel name. 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
history Fill the buffer by using PubNub history call to retrieve last limit messages. Requires PubNub Storage & Playback to be enabled. false
x_type Your x axis configuration. Can be "auto", "custom", or false. We'll cover more on x_type below. "auto"
x_id Your x axis source if x_type == "custom" "x"
message A function to call every time a PubNub message is received. See PubNub Subscribe. function(message, env, channel){}
transform Method for changing the payload format of your stream. 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 subscribe_key example below. false
debug Log EON events to console as they happen. false

Simple Example

Plug your normal C3 config into the generate parameter. Supply a PubNub channel in channel parameter. eon.chart returns the normal c3 chart object.

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

All chart data must exist within an object called eon. Also notice how the channel matches in both examples.

This uses the included PubNub library to pubnub.publish() packets to the pubnub.subscribe() call waiting inside the C3 framework.

X-Axis Configuration


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 x_type is set to "auto".


If you'd like to supply your own timestamp (or other x value), set x_type to custom. Then, set x_id to the x value that appears within your published messages.

Notice how the code below publishes a key value pair called x with every message.


You can disable eon-chart modifications by setting x_type 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 three servers by supplying the same channel to your PubNub publish requests. Check out our distributed chart example for more on this.

That’s all for this quick tutorial on building real-time charts with EON. For more in depth guide to EON, check out the video below, or read more on the EON project overview page.

More from PubNub

NPP and HIPAA: Notice of Privacy Practices Definition
Healthcare CategoryJan 6, 20235 min read

NPP and HIPAA: Notice of Privacy Practices Definition

A Notice of Privacy Practices (NPP) is one of the requirements of HIPAA and helps patients understand their personal data rights.

Michael Carroll

Michael Carroll

HIPAA Violation Examples
Healthcare CategoryJan 5, 20236 min read

HIPAA Violation Examples

HIPAA violations can be financially expensive and devastating to a brand. Examine some examples of HIPAA violations, and learn...

Michael Carroll

Michael Carroll

HIPAA Technical Safeguards: How To Protect Sensitive Data
Healthcare CategoryJan 5, 20236 min read

HIPAA Technical Safeguards: How To Protect Sensitive Data

HIPAA covered entities must follow the five technical safeguards to achieve HIPAA compliance and prevent data corruption.

Michael Carroll

Michael Carroll