3 min read
.
on Feb 26, 2015
We now have a library for building realtime, live-updating graphs using C3.js. Stream and publish data to a realtime visualization.

Having the ability to stream data to a realtime, 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.

realtime 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 realtime 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 realtime.

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 realtime 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, realtime gauge chart visualization example.

687474703a2f2f692e696d6775722e636f6d2f684f34707744702e676966Donut Chart

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

687474703a2f2f692e696d6775722e636f6d2f59447964775a692e676966

Bar Chart

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

687474703a2f2f692e696d6775722e636f6d2f636765637046772e676966Transforming Chart

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

687474703a2f2f692e696d6775722e636f6d2f367355514544582e676966

Realtime 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 realtime, 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 realtime visualizations! 

More From PubNub