For the things in life which make me glad I'm not dead yet.
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); }