Build

Building Real-time Live-Updating Animated Graphs: Eon C3.js

3 min read PubNub Staff on Feb 26, 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.

We now have a library for building real-time, live-updating graphs using C3.js. Stream and publish data to a real-time visualization.

Having the ability to stream data to a real-time, live-updating graph is pretty powerful. There’s no argument there. But until now, they’ve been fairly difficult to implement. Most of the time, you’d end up hacking a graphing library to re-render every time it gets new information.

real-time chart rickshaw d3jsWhen I played with the C3.js demos on their homepage, I realized it was something different. Not only do the charts smoothly transition when new data points are added but you can even switch between chart types!

C3.js is a great way to graph real-time data. The transitions are smooth, the variety of chart types is awesome, and they look great. That’s why we’re happy to announce the new PubNub C3.js library; an easy way to update your graphs in real time.

Getting Started with C3.js

It’s super easy to get started. The PubNub Chart library simply wraps C3 in a function that updates the graph when new messages are received.

Start by including pubnub.min.jsd3.v3.min.jsc3.js, and then finally eon-chart.js. You can get eon-chart.js from the github repo.

Then, just initialize eon-chart. The normal C3 config plugs into the generate param. For now, this spline chart will work just fine.

You also need to supply a PubNub channel in channel param. Choose a unique name for your graph.

Streaming and Publishing Data to the Graph

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

Make sure your messages are in the format that C3.js expects! For example:

Notice how the subscribe_key and channel matches.

You can find a full C3.js real-time streaming example with code here.

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 PubNub docs for more info.

Auto Populating the Graph
You may notice that when you refresh the graph is reset. Wouldn’t it be great to save the data so it could populate the graph automatically?

Just use the parameter history: true, and PubNub history will automatically fetch the last x messages for you and populate the graph with them!

Customize Your Graph

PubNub-C3 works will all supported graph types in C3. Just check out the examples below. You can learn more about customizing your graph from the official C3 docs.

Gauge Chart

The gauge chart measures a specific metric between two predefined variables. Here’s a live, real-time gauge chart visualization example.

Live-Updating Animated GraphsDonut Chart

A donut chart measures multiple variables and presents it in a circle visualization.

Live-Updating Animated Graphs

Bar Chart

Bar charts measures multiple metrics and presents them on bars of varying heights. Here’s a real-time, live-updating bar graph visualization example.

Live-Updating Animated GraphsTransforming Chart

With transforming charts, the sky’s the limit. Get creative, mix types of visualizations, and present data in a cool and unique way.

Live-Updating Animated Graphs

Real-time Visualizations: Bringing Data to Life

Our C3.js library is just another way we want to bring data to life, by streaming then publishing it to a real-time, live-updating user interfaces. We have a ton of demos and tutorials around this already, including:

Check them out, stream data of your own, and look for more from us on real-time visualizations! 

More from PubNub

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff