For the things in life which make me glad I'm not dead yet.
Xbox Live Monitor
This is powered by the SIMILIE Timeline widget. The documentation is a bit lacking, and bizarrely split across two wikis with useful content divided between the two. The tool itself is fantastic though.
- [SIMILIE Widgets wiki] Tutorial
- [SIMILIE Widgets wiki] Data source format
- [SIMILIE Widgets wiki] Moving the timeline with JavaScript
The JavaScript is fairly simple:
var tl, theme, bandInfos, eventSource; // jQuery onLoad jQuery(window).load(function() { onLoad(); }); function onLoad() { // Disable the history feature: https://code.google.com/p/simile-widgets/issues/detail?id=61 SimileAjax.History.enabled = false; theme = Timeline.ClassicTheme.create(); theme.event.track.gap = 2; theme.event.tape.height = 8; theme.event.overviewTrack.height = 8; theme.timeline_start = new Date(Date.UTC(2011, 0, 1)); theme.timeline_stop = new Date(Date.UTC(2014, 0, 1)); eventSource = new Timeline.DefaultEventSource(); bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, date: new Date(), width: "80%", intervalUnit: Timeline.DateTime.DAY, intervalPixels: 200, theme: theme }), Timeline.createBandInfo({ overview: true, eventSource: eventSource, date: new Date(), width: "10%", intervalUnit: Timeline.DateTime.WEEK, intervalPixels: 150, theme: theme }), Timeline.createBandInfo({ overview: true, eventSource: eventSource, date: new Date(), width: "10%", intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 400, theme: theme }) ]; bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; bandInfos[2].syncWith = 1; bandInfos[2].highlight = true; tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); ); }); } function loadData(dates) { eventSource.clear(); // We pass in the array as a single param because the HTML option field // only contains a single value. var dateArray = dates.split("/"); // Start Date var date1Parts = dateArray[0].split("-"); var jsDate1 = new Date(date1Parts[0], date1Parts[1] - 1, date1Parts[2]); // End Date var date2Parts = dateArray[1].split("-"); var jsDate2 = new Date(date2Parts[0], date2Parts[1] - 1, date2Parts[2]); var middle = Math.floor((jsDate2.getTime() + jsDate1.getTime())/2); centerTimeline(middle); Timeline.loadXML("<URL>?d1="+dateArray[0]+"&d2="+dateArray[1], function(xml, url) { eventSource.loadXML(xml, url); }); } function centerTimeline(milliseconds) { date = new Date(parseInt(milliseconds)); tl.getBand(0).setCenterVisibleDate(date); }