Insights

Graph Your Data in Real time Charts with EON Chart Builder

4 min readPubNub Staff on May 2, 2016
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.

Create real-time graphs without code! With PubNub’s Project EON you can create real-time graphs that update when you publish data over PubNub. EON works with any of the 70+ SDKs available. Check out o...

Create real-time graphs without code! With PubNub’s Project EON you can create real-time graphs that update when you publish data over PubNub. EON works with any of the 70+ SDKs available. Check out our libraries for Javascript, Python, Ruby, and Arduino.

If you need help getting started with EON, check out our other blog posts about the EON real time maps and charting library.

Today we’re happy to announce the EON Chart builder, an interface for easily building real-time charts using the EON framework. No coding required! Take your existing PubNub stream and create a real time chart by following the steps below.

Getting Started with The EON Chart Builder

When you first load the EON builder page, you’ll notice some information has been filled out for you already. The EON Chart builder uses a preset subscribe key and test channel to help you get started fast.

Configure your PubNub credentials

If you’d like to work with your own data, click on the subscribe key and enter your own PubNub subscribe keys. You’ll also want to supply your own channel in the second row.

If you have PubNub history enabled on your account, enable it within the third row. This will populate the chart when it loads, displaying the last x data points.

You’ll see chart data appear in the chart preview at the top of the page.

Real-time chart preview

Select data to graph

Data getting sent over the PubNub network through the supplied key and channel will appear within the Data table. EON Chart builder only works with integer values, so any text values will not appear.

Select the data to graph

The first column contains the name, the second contains a preview of the data being sent over, the third column chooses the data color and the fourth columns allows you to disable graphing that data altogether.

Click on the label text to change the label, then hit the checkbox to save.

Real-time chart name selection

Click on the color block to choose a new color for your graph. You’ll see the color update live on your EON graph. You can also supply a raw HEX value for your data color.

Real-time graph color selection

Configuring the chart

Now for the fun part. Configure your chart using the tools in the next section.

Real-time chart configuration

The first row allows you to change the chart type. The selection includes spline, line, area, scatter, bar, donut, and pie.

  • Scatter charts plot points on a time series chart
  • Line charts connect one point to the last to demonstrate change over time
  • Spline charts are like line charts with the addition of a curve to demonstrate velocity
  • Step charts are like line charts without data interpretation between points
  • Area charts fill in the bottom section and help show contract between data sources
  • Bar charts show the relation between data at every time point
  • Pie charts show the relation between data in a percentage base
  • Donut charts are pie charts with a hole in the center
real-time chart type settings

The next row allows you to label the x and y axis on the chart. The x axis is most commonly “time” or “date.” The y axis is up to you!

Speed is the rate at which the chart updates in milliseconds. If you’re publishing data slowly, you can leave this at 1000ms or even slow it down. If you’re publishing many messages very fast, you can lower the speed (try 100ms) or increase it to allow points to accumulate before redrawing the graph.

If PubNub messages are received in between updates, the chart will queue the points and draw all of them on the next update.

Limit is the number of x values shown on the graph. Enabling history on your chart will populate your graph to the limit, thus “filling” it.

XGrid and YGrid add dashed gray lines along incremental data points on their respective axis.

Show Points add small circles to every point. This only applies to time series charts (spline, line, et).

Show Tooltips shows a popup on the chart detailing chart values where the mouse is pointing.

Embed Your Chart

Once you’re happy with your chart, it’s time to embed it on your own page!


<link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/0.0.10/eon.css" />

<div id="chart"></div>

You can copy the code supplied within the Embed section and paste it in a new HTML file or CodePen. Try using a simple grid system to embed multiple charts in a full dashboard!

Embed chart code into Codepen

More from PubNub

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff

Improving Virtual Care in a Post-Pandemic World
News Apr 14, 20221 min read

Improving Virtual Care in a Post-Pandemic World

Meg Barron, VP of Digital Health Strategy at the AMA, talks with PubNub’s COO, Casey Clegg, about what’s next for the healthcare...

PubNub Staff

PubNub Staff