Weekly Activity

This charts my activity on Xbox Live.  The blue series is time spent gaming, the red is time spent watching video content.

Loading ...

2011 | 2012 | 2013 | All | Stack/Unstack

The JavaScript powering this is fairly simple, I choose to initially draw the table with empty data so as to get the opening transition animation.  In truth it's a bit of a hack, but I like the result.  See the Google Chart Tools documentation for more information:

var options, data, chart;

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {
	var d = new Date();

	data = new google.visualization.DataTable();
	data.addColumn('date', 'Week');
	data.addColumn('number', 'Games');
	data.addColumn('number', 'Video');
	
	// Draw with empty data to get initial animation effect
	data.addRow([new Date(2011,5,1), 0, 0]);
	data.addRow([new Date(d.getFullYear(),d.getMonth()+1,1), 0, 0]);
	
	
	options = {
		animation: {duration: 3000, easing: "inAndOut"}, // linear, in, out, inAndOut
		hAxis: {title: "Hours", textPosition: "in", textStyle: {color:"#000000"}, viewWindowMode: "explicit", viewWindow: {min: new Date(2011,5,1), max: new Date(d.getFullYear(),d.getMonth()+1,1)}}, 
		vAxis: {title: "Week", textPosition: "in", textStyle: {color:"#000000"}, minValue:0, maxValue:60},
		chartArea:{left:0,top:0,width:"100%",height:"100%"},
		backgroundColor: {fill: "#ffffff", stroke: "#000000", strokeWidth:1},
		axisTitlesPosition: "in", //in, out, none 
		bar: {groupWidth: "95%"}, 
		fontSize: 12, fontName: "Verdana", 
		isStacked: false, 
		legend: {position: "bottom"},
		lineWidth:1,
		pointSize:0
	};
	chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
	chart.draw(data, options);
	
	var jsonData = jQuery.ajax({
		url: <JSON_URL>,
		dataType:"json",
		async: false
	}).responseText;
	
	data = new google.visualization.DataTable(jsonData);
	options.vAxis.maxValue="automatic";
	chart.draw(data, options);
	
}

function redrawChart() {
	chart.draw(data, options);
}

function changeYear(year) {
	var d = new Date();
	if (year == 0) {
		options.hAxis.viewWindow.min = new Date(2011,5,1);
		options.hAxis.viewWindow.max = new Date(d.getFullYear(),d.getMonth()+1,1);
	}
	else {
		options.hAxis.viewWindow.min = new Date(year,0,1);
		options.hAxis.viewWindow.max = new Date(year+1,0,1);
	}
	chart.draw(data, options);
}

function changeStacking() {
	options.isStacked = !options.isStacked;
	chart.draw(data, options);
}

Go to Top