Stream Data to Create Real-time Charts w/ D3.js and Rickshaw
By now, we all know that old data is bad data, and up-to-date, live updating data is good data. With a data stream network, we can now stream data and publish it in real time to a responsive chart or graph. No more manually running reports or refreshing the page.
However, Rickshaw is missing one key component: real-time! Graphs are much more useful when the data is updated as it changes. As a result, with our brand spankin’ new PubNub-Rickshaw library, you can easily add real-time data streams to your charts.
In this blog post (and the video walkthrough below), we’ll show you how to implement PubNub Pub/Sub Messaging with Rickshaw to create real-time charts.
- Works just like the extensions included in Rickshaw examples.
- Uses your PubNub subscribe_key
- Limit the size of your buffer. Choose how many values on the x series to display before shifting data.
- Use PubNub history call to retrieve last
limitmessages. Requires PubNub Storage & Playback to be enabled.
Then do the normal Rickshaw setup. Leave the
data fields within
series as empty arrays. These values will be filled in by the PubNub fixture.
Add the PubNub fixture. In this basic example, only the
graph are supplied. It’ll connect directly to the
demo subscribe key automatically, but you can supply your own
publish_keys. To get your publish/subscribe keys, sign up for a free PubNub account and get your keys in the PubNub Admin Dashboard.
You’re real-time! Now when you publish data to the
rickshaw-channel-1 channel, it’ll show up on your chart. See the next step for more detailed instructions.
Publishing Data to the Real-time Chart
Make sure you use the Rickshaw JSON schema for your real-time graphs. Using the date on the x axis is suggested, but you can use anything you want.
Now publish to PubNub network like normal. Notice how the
channel matches what we supplied to the fixture.
You can add this code to the bottom of your HTML page, but you probably want to publish data from the back-end instead. Check out our docs for more info on how to do that.
In our next part, we’ll show you how to graph your NodeJS memory usage in d3.js with Rickshaw, so stay tuned!