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.
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.
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.
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.
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.
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.
Now for the fun part. Configure your chart using the tools in the next section.
The first row allows you to change the chart type. The selection includes spline, line, area, scatter, bar, donut, and pie.
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.
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!
There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...