A recent post over on Scott Hanselman's blog turned me on to Simile Timeline, a open source Javascript API for adding cool timelines to web pages. Think Google Maps, but for timelines. It features a brilliant UI, and very extensible, well written client code. Following the directions on the site, it's pretty easy to get started using it from ASP.NET- simply add the javascript reference and a bit of code to wire it up and you're all set. But moving beyond the simple demo, I encountered a few issues and solutions that may be helpful:
Reference the Script from the Page Header. Simile Timeline requires you to reference the script from an include inside the <head> tag of your page. This is because it uses the script include's url to determine the location of other scripts, images, and CSS files used by the app. It is also possible to set this prefix in javascript, but your script includes should be in <head> anyway.
When generating XML from a HTTP Handler or web page, set the content type to text/xml. The example that comes with Simile uses a static XML file for the event data, but in many cases you may want to generate this XML from a database in .NET. This is easy enough to do by looping through a DataReader and writing out XML. However, if you do not set Response.ContentType = "text/xml", then in FireFox, it will not parse the result as XML, and the events will not display. IE is more lenient apparently, but this is still a good idea.
Prevent IE XmlHttp from caching results by adding a timestamp to the URL. Internet Explorer's built-in XmlHttp class caches data, so that after one request to mysimilexml.aspx, the data is cached until the browser is restarted. This is a problem if your data changes frequently, and can be aggrivating when testing. There is probably a way to adjust this in IE, but why have your users modify their browser settings? In the javascript, add a timestamp to the URL to force a new request each time:
var
eventsUrl = "ScheduleSimileXML.aspx?preventCache=" + currentDate.getFullYear() + "" + currentDate.getMonth() + "" + currentDate.getDate() + "" + currentDate.getHours() + "" + currentDate.getMinutes() + "" + currentDate.getSeconds()
Eventually, I'd like to see a real ASP.NET control wrapping this, but for now this is a very usable and handy API.