Hospital ER Wait Times

Last fall I helped a client of mine (Middlesex Hospital) release a new website to display their ER wait times for their three locations. It received national news. At the time they were one of only three hospitals (that we knew of) that were doing it in the nation. Since then many other hospitals have followed suit, but MHS still gets critical acclaim for it.

Two weeks ago we launched a new main hospital website for them (http://middlesexhospital.org) and placed the ER wait times on the homepage (as well a few key places on the website).

I've been getting a lot of questions lately asking how we did it. So I thought I'd walk through the process for those who might be interested. First the data itself comes from the hospital's clinical systems (specifically a system called Cerner). I don't know the process they use to get the actual numbers. Unfortunately Cerner isn't designed to distribute data (ie. web service, XML, or any other type of data feed), so we had to find a loop hole. One of the guys at MHS figured out a way to do it using Cerner's custom query system where he runs a custom query and outputs it to an ASCII-based file (text file) which is sort-of like a CSV format. It's very messy, but with a little Regex I'm able to clean it up to be pretty decent (but I'm getting ahead of myself :) ). Next they FTP the file every 5 minutes to the web server through the DMZ. Now it's in my domain and I get to use ColdFusion to do the rest.

Once on the server I have a ColdFusion directory watcher that detects the file and triggers a script to run. The script runs the regex to cleanup the data and allow the CSV file to be easily consumable. Then it consumes the data from that file into a DB. From there it queries the DB and outputs the data to a static XML file for which I have an API (Thanks to my friend Simon Free for the lessons on proper API coding and documentation). Why an API you ask? Because it allows us to use the data for other devices, systems, and apps (and an iPhone app that I believe is in development).

The final piece is to display the data. To do that I do it in two parts. Let's take the MHS homepage for example. Since we know the data gets updated every five minutes they wanted the data on the homepage to auto-update every five minutes. So, since we use jQuery quite heavily on that website I made a jQuery script (using jQuery's get() function to consume XML data) to grab and display the data every five minutes.

But what if the user doesn't have javascript enabled? No problem. I have a separate ColdFusion script that runs before jQuery has access to the DOM where it runs against a CFC to grab the data and display it in HTML with no help from javascript. That CFC script gets a little trickier since the client wanted the items returned in a different order than they appear in the XML. Sure I could have hit the XML three separate times per page load, but since this is the homepage (which gets more hits than any other page on the site) that would just be poor programming on my part. So I figured out a way to hit the XML feed once and sort the data in a desired fashion (and allow the client to change the order easily at any time).

What about the font? Did I use Flash? Nope :). At first I wrote the whole thing to work in sIFR which allows you to display custom fonts on a website using Flash. It worked great, but I wasn't really happy with it. For one, we don't use Flash anywhere else on the homepage, so why load it for just this one item? (note: we do use Flash elsewhere on the site for things like videos. Don't think I have anything against Flash like Mr. Jobs. In fact, I love Flash.). Okay, so how did I get a custom font on the website and get it to still work in things like the iPhone that doesn't support Flash? I used a feature called @font-face{} which allows you to have your clients browser download and use a custom font of your choosing in their browser. There is lots of documentation and how-to's on the web for implementing @font-face{}, but if you really want to jump in and play with it quickly I strongly suggest checking out fontsquirrel.com's font-face generator (you can use one of their free fonts or use their tool to upload one of your own). Not only do they convert your font into the appropriate format, they'll create sample code based on your font... pretty cool. Once you get your testing done though there are some things you need to be smart about, like cleaner code, small/condensed font size (try to keep the font size under 20k if possible. I try to shoot for 12k or better. There are tutorials on how to do this if you search the web), and a few other common sense developer things to keep in mind. Most importantly you want to make sure you have a fallback font (and font size) that will work well for those people with older browsers that don't support @font-face{}. Also, for legal reasons make sure you are allowed to use the font on your website (font licensing can get pretty expensive). I was lucky enough to find an open-source font that allowed us to use the font freely on the website.

Here's an interesting tidbit to know for @font-face{}. Of all the major browsers to support the feature, Firefox was the last one to the party (not supporting it until v3.5) and Microsoft's IE6 was the browser that actually first supported the feature (I know... weird). However, I have to give Mozilla props. They have a slightly better implementation for it where it allows you to offer FF browsers a much smaller/compact file size for the user to download (if you use the fontsquirrel @font-face generator mentioned above, it creates all of these files for you, including a pretty cool font just for the iPhone).

Side Note: When I created the XML files (I'll probably offer JSON soon as well if they ask for it) I decided to make the file static instead of dynamically created on each page hit. Normally you want to dynamically create the XML on each page load, however the reason I chose to statically save the XML file was because the hospital only sends the data to me once every five minutes. Since this data is requested a lot from many sources, it would be unwise programming to hit the database repeatedly for the same information. Sure I could have cached the query, but technically this uses less resources.