public
Last active

Tool to visualize stats of travel.stackexchange.com over time

  • Download Gist
travel-se-stats.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
<html>
<head>
<!--Load the AJAX API-->
<style type="text/css">
#input {
width:100%;
height:95%;
}
#text {
width:100%;
height:90%;
}
#output {
width:100%;
height:95%;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the annotatedtimeline chart package.
google.load("visualization", "1", {packages: ['annotatedtimeline']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(doStuff);
// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it.
function doStuff() {
$("#showinput").click(function(){ $("#showinput").prop('disabled', true); $("#showoutput").prop('disabled', false); $("#input").show(); $("#output").hide(); });
$("#showoutput").click(function(){ $("#showinput").prop('disabled', false); $("#showoutput").prop('disabled', true); $("#input").hide(); $("#output").show(); });
 
var tzo = new Date().getTimezoneOffset() / -60;
 
$("#itz").val(tzo);
$("#otz").text(tzo);
 
$("#enter").click(function(){ drawChart( $("#text").val(), $("#itz").val(), $("#otz").text() ) });
}
 
function drawChart(raw, itz, otz) {
 
var tzOffset = otz - itz;
 
$("#tzdiff").text(tzOffset);
 
// Create the data table.
var data = new google.visualization.DataTable();
 
var lines = raw.split(/\r?\n/);
 
var l, f;
 
var fields = lines[0].split(",");
 
data.addColumn('datetime', fields[0]);
 
for (f = 1; f < fields.length; ++f) {
data.addColumn('number', fields[f]);
}
 
data.addRows(lines.length - 1);
for (l = 1; l < lines.length; ++l) {
fields = lines[l].split(",");
 
var d = new Date();
 
var m = fields[0].match(/^(\d\d?)\.(\d\d?)\.(\d\d\d\d) (\d\d?):(\d\d)$/);
 
if (!m) continue;
 
d.setFullYear(m[3]);
d.setMonth(m[2] - 1);
d.setDate(m[1]);
d.setHours(m[4]);
d.setMinutes(m[5]);
 
// Roflcopter TZ to my TZ?
d.setTime ( d.getTime() + tzOffset * 60 * 60 * 1000 );
 
data.setValue(l-1, 0, d);
 
data.setValue(l-1, 1, parseFloat(fields[1]));
 
for (f = 2; f < fields.length; ++f) {
if (f != 3) {
data.setValue(l-1, f, parseInt(fields[f]));
}
}
}
 
// Instantiate and draw our chart, passing in some options.
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('output'));
 
$("#showinput").prop('disabled', false);
$("#showoutput").prop('disabled', true);
$("#input").hide();
$("#output").show();
 
annotatedtimeline.draw(data, {'displayAnnotations': true, 'scaleType': 'allmaximized'});
}
</script>
</head>
 
<body>
<div id="app">
<button id="showinput" disabled="disabled">Input</button> <button id="showoutput">Output</button> (Timezone difference: <span id="tzdiff">?</span>)
<div id="input" style="display:block">
<textarea id="text"></textarea>
Input timezone: <input id="itz">?</input><button id="enter">Enter</button>
Output timezone: <span id="otz">?</span>
</div>
<!--Div that will hold the chart-->
<div id="output" style="display:none">
</div>
</div>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.