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.  

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);
}
Go to Top