Saturday, December 18, 2010

Basic Time Slider in Closure

Earlier this month I was playing with a the Google Closure library and using the slider. I wanted to play with it for developing a time slider too. Since I'm going to History Hack Day at the end of January in London, I thought I'd show off some samples there and this was a perfect hack for that.

Anyway, it's pretty simple. You set minimum and maximum values on the slider that correspond to the millisecond values used by JavaScript to represent time. Then use the JS Date object to convert those to readable date and time for display under the slider. You can see the sample here. I set the slider to between Wed Dec 31 2003 23:59:59 and Fri Jan 01 2010 00:00:00 since I knew all dates in the underlying table fell between them. I used another Wikileaks table, the Afghan War Diary, 2004-2010 table.

The tricky part is that Fusion Tables doesn't document the date formats that it accepts for queries. We just haven't gotten around to changing the docs, but I happen to know that we accept these formats:

MM/dd/yy
MM-dd-yy
MMM-dd-yy
yyyy.MM.dd
dd-MMM-yy
MMM/yy
MMM yy
dd/MMM/yy
yyyy

2 comments:

Vjeux said...

Nice use of all the Google tools :)

Tip: you should put the demo link bigger, like a single line and centered "Click for the Demo". Because I had a hard time to find the link :)

kgjenkins said...

What about YYYY-MM-DD and YYYY-MM, which are actually part of the ISO 8601 standard. One of the great benefits is that it is unambiguous and sorts well as text. It seems that we should be doing whatever possible to encourage use of this format, and wean people away from all those other non-standard date formats.