Using Flot.js with the Digg Streaming API
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).
curl http://flot.googlecode.com/files/flot-0.7.tar.gz > flot-0.7.tar.gz tar -xvzf flot-0.7.tar.gz
Next, create an HTML page in the same directory which these contents:
If everything has downloaded correctly, you should see this example:
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
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
as well as
callback=some_function. All put together the URL will look like:
With that knowledge in mind, let’s create a simple script which retrieves recent comments and renders the them. Let’s use this HTML fragment as the template for rendering comments:
:::html <div id="digg-comment"> <span id="digg-author">some author</span> <p id="digg-body">some text</span> </div>
Performing JSONP requests to the Digg Streaming API requires a bit of extra tact,
it isn’t enough to simply use
$.getJSON("http://..."), you’ll actually need
to write a simple wrapper looking 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
with the current time as its value as an attempt to bypass caching).
get_stream we can whip together the code for populating the HTML comment
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):
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>
aspect will be handled by reusing the
get_stream function defined
Put it together, and you have a real-time graph of comments, Diggs and submissions occuring right now on Digg.
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.)
As always, hope this was useful, I apologize for any awkwardness in the new format, and let me know your feedback!