Using Flot.js with the Digg Streaming API

Last year Digg released our Streaming API,
but there still aren't too many tutorials out there, especially on using
it for JSONP. I've also wanted to
experiment with more dynamic tutorials which run JavaScript examples in-line
with the article. So, time to scratch some itches.

In this tutorial we'll look at using Flot, jQuery and the
Digg Streaming API to create dynamic graphs.

Install & Setup Flot

First we'll need to download Flot (which comes with a copy of jQuery).

Digg Streaming API

The Digg Streaming API makes it possible to see all Diggs, comments and submission
occuring on Digg.com in real-time (generally a second or two after they occur,
but occasionally a bit longer).

It is available at

http://services.digg.com/2.0/stream

and takes a variety of parameters. For our purposes we'll want to use its JSONP
capabilities to perform requests from across a different domain. To do so we'll need to specify format=javascript
as well as callback=some_function. All put together the URL will look like:

More specifically the $.getJSON utility function for JSONP won't work because it attempts to pass extra parameters
which the Digg Streamin API doesn't know about and will reject (specifically jQuery passes the _ parameter
with the current time as its value as an attempt to bypass caching).

Armed with get_stream we can whip together the code for populating the HTML comment
pretty quickly.

Once you put those pieces together, it looks a bit like this (well, the version running
here has a ten second delay between fetches to avoid wasting too much of your bandwidth,
and also stops after sixty requests):

some author

some comment

Okay, so now that we've put together an example of using the Streaming API and have
Flot.js installed, let's take a stab at using them together.

Dynamicly Updating Flot

For our example of updating Flot with real-time data from the Streaming API,
let's create a chart which will track the number of submissions, comments and Diggs
each minute over time.

As usual, the HTML will be trivial.

:::html
<div class="js-example" id="exampletwo"></div>

The JavaScript will be a bit more complex this time, but the JSONP
aspect will be handled by reusing the get_stream function defined
above.

Put it together, and you have a real-time graph of comments, Diggs and submissions
occuring right now on Digg.

Waiting a

Note that this really isn't an accurate reflection of the
total quantity of activity happening on Digg because of the way we're doing the intervals
and also because we're missing events.
The single-threaded and callback nature of JSONP, along with the lack of support for cursors
and bulk response type for all activity since the last cursor mean that you'll need to investigate
establishing a persistent to the Digg Streaming API if you really want to see everything.
(If you're interested, take a look at this repository on Github for Python examples.)

Certainly not the prettiest of graphs, or the most useful of examples, but working directly with JavaScript
examples embedded in the tutorial was certainly an interesting experience, and hopefully slightly more useful
than simply seeing screenshots.

As always, hope this was useful, I apologize for any awkwardness in the new format, and let me know your feedback!

Hi folks. I'm Will, known as @lethain on Twitter.
I write about software and management topics,
and love email at lethain[at]gmail.
Get email from me by subscribing to
my weekly newsletter.