John Bafford

For a client at work a few months ago, I created a Twitter search tool, Twitterslurp, that put all the tweets related to the client’s project on their webpage, updated in (close to) real-time via AJAX.

I’ve since added a lot of features, including a set of graphs, and we’ve set up a version of Twitterslurp for php|tek 2009.

Twitterslurp consists of two parts. The first is a PHP cron job that queries Twitter for new tweets matching a search string and adds them to a database. The second is JavaScript code that interfaces with a PHP script that searches the database for new tweets. In a nutshell, the JavaScript examines the web page for placeholders that represent different types of data (tweets, the leaderboard, and the graphs), and then posts to the PHP script with a JSON object detailing the data it wants. Once PHP responds, also with a JSON object, the JavaScript takes that data, formats it, and updates the page with the new content. The web page updates automatically based on an interval specified in the response object, so in the unlikely event the server came under heavy load, we would be able to easily throttle requests.

The new feature I’m really happy with is the stats page I’ve added, using jQuery and a graphs library called flot.

Flot uses the canvas tag introduced in Safari, and later supported by Firefox and Opera (and Chrome), to draw 2D images (graphs, in this case) within the browser. IE is supported with a library that implements canvas support on top of VML.

Flot is pretty simple to learn and use, thanks to its detailed API documentation and helpful set of examples. It actually has relatively few API functions. For the most part, you implement graphs simply by building a JavaScript object with the graph data and configuration options you want, and tell flot where to put the graph. (Twitterslurp builds this object in PHP and gives it to the JavaScript code via a JSON object.) With a few hours of work, I was able to put together the four graphs shown on the stats page, all of which have a rollover that shows the value of individual data points.

To lessen the server load, the stats page updates less frequently, and the graph data is cached on the server via APC, so the graph data doesn’t have to be regenerated on every request.

Please feel free to take a look, and let me know if you have any comments or suggestions, either here, or via Twitter (@jbafford).

We’re planning on taking what we’ve learned with Twitterslurp for php|tek, clean up the code (which wasn’t intended on providing graph data), adding a few more new features, and releasing it with an open source license in June. Stay tuned for more details…

Tags: ajax, apc, flot, jquery, PHP, phptek, tek09, twitter, twitterslurp

This entry was posted on Wednesday, May 20th, 2009 at 1:03 pm and is filed under JavaScript, PHP. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.