Libraries and pseudocode for physical Dashboard/Status board

Question

OK, so I bought a 46" screen for the office yesterday, and with the imminent risk of being accused for setting up an "elaborate World Cup procrastination scheme", I'd better show my colleagues what it's meant for ;)

Looking at my simple sketch, and at these great projects from which I was inspired, I would like to get some input on the following:

1. Pseudocode for the skeleton: As some methods should be called every 24 hours ("Today's date in the heading"), others at 60 second intervals ("Twitter results"), what would be a good approach using JavaScript (jQuery) and PHP?

   EDIT: Alsciende: I can agree that #1 and #8 are too vague. Therefore I remove #8 and try to clarify #1: With "Pseudocode for the skeleton", I basically mean could this be done entirely using JavaScript timers and how would you set up the various timers?

2. Library for Google Analytics: Which libraries support the Google Analytics API and can produce neat charts. Preferably HTML5, JavaScript-based like Protovis.

3. Library for Twitter: Which libraries would you recommend for fetching twitter search results and latest tweets from profiles.

4. Libraries for Typography/CSS/HTML5: Trying to learn some HTML5 etc. in the process, please advice on any other typography/css libraries that could be of relevance.

5. Scraping/Parsing? I'll give you a concrete example: Trying to fetch today's menu from this restaurant's website, how would you go about? (it's in Swedish - but you get the point - sorry ;) )

6. Real-time stats? I'm using the WassUp-plugin for WordPress to track real-time visitors on our website. Other logging software (AWStats etc.) is probably also installed on the webserver. Any ideas on how to extract information from these and present in real-time on the dashboard?

7. Browser choice? Which Browser and OS would you pick? Stable, Full-screen, HTML5.

alt text http://www.freeimagehosting.net/uploads/cb7af2ef28.png

Answer 1

I've built a dashboard similar to what you're talking about for our office. I spent about a day working on it, the possibilities are really (pretty much) endless. Basically, all the computational stuff I handle via PHP and do interval AJAX calls to the appropriate PHP script, which returns JSON data to present.

#2: For graphs, I use/recommend flot (http://code.google.com/p/flot/). The documentation isn't really that great, but once you figure out how things generally work - it's a great library, and it generates graphs using HTML5 Canvas tag.

I've not integrated external libraries with Google Analytics before, but I assume you could pull data from analytics and format it for flot to build appropriate graphs for. This might be the hard-way around, but I'm more familiar with flot than most other graphing libraries (and it doesn't suck, as much as a lot of others do) so for me, this would be the easiest way to get it done.

#3: For twitter, it's pretty easy to pull data from their search API using JSON-P. Basically what this does, is dynamically adds a <script> tag to your DOM, which GET parameters that twitter interprets, then calls a predefined javascript method (which you pass via the URI) with a json-encoded hash of the results.

#5: Scraping and parsing individual sites is going to be a painstaking process. Every site is going to have it's own "pattern" (or non-pattern) for publishing their daily menu or specials. I'd build a "menu" script which knew how to call a few functions, and write a function / class for scraping each restaurant's site which you're interested in showing the menu for in PHP (or whatever other language you're comfortable with). It can reply with json, which is (imo) the easiest way to manipulate/process data in Javascript.

#6: Real time stats are pretty much the same as #5. I'd build a couple classes that knew how to fetch the statistics from whatever data sources I was interested in pulling from, and present the data in json to javascript, via an ajax call.

#1: Writing javascript code to load data on a timer is really simple, look into the setInterval, clearInterval, setTimeout, and clearTimeout methods. They all take a function name (or closure) and a timeout to wait before calling that function (in ms). You could easily call a master timer function every 60 seconds which would basically be a "scheduler" or a "cron" style function, which would just look for the stuff that needed to run "right now" and execute those functions from the scheduler.

Hopefully this gives you some ideas on where to go, and how to go about getting there.