77 lines
3.0 KiB
HTML
77 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Who chats and when?</title>
|
|
</head>
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"
|
|
charset="utf-8"></script>-->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
|
|
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
|
|
<script type="text/javascript">
|
|
google.load("visualization", "1", {packages:["timeline"]});
|
|
|
|
data = [];
|
|
threshold = 5;
|
|
threeDays = 3 * 86400;
|
|
oneWeek = 7 * 86400; <!-- seconds in a week -->
|
|
jQuery.getJSON("/~krowbar/data/userData.json", function(json) {
|
|
_.forEach(json, function(times, user) {
|
|
if(times.length > threshold) {
|
|
console.log("~" + user + ":", times.length, "item(s)");
|
|
_.forEach(times, function(time) {
|
|
d = new Date(0);
|
|
d.setUTCSeconds((Number(time) + threeDays) % oneWeek - threeDays);
|
|
<!--data.push([user, d.toISOString().slice(11,16), d, d]);-->
|
|
data.push([user, d, d]); <!-- User, Start, End, score -->
|
|
});
|
|
}
|
|
});
|
|
<!-- compress the data -->
|
|
data.sort(); <!-- to get the multi-week dates adjusted-->
|
|
timeThreshold = 30 * 60 * 1000; <!-- five minutes in milliseconds -->
|
|
removeCount = 0;
|
|
for(var i = 0; i < data.length-1;) {
|
|
removed = false;
|
|
if(data[i][0] == data[i+1][0]) { <!--name check-->
|
|
if(data[i][2].getTime() + timeThreshold > data[i+1][1].getTime() &&
|
|
data[i][2].getTime() < data[i+1][2].getTime() ) { <!--time check-->
|
|
<!-- console.log('Combining items', data[i][2].getTime(), data[i+1][1].getTime()); -->
|
|
data[i][2] = data[i+1][2];
|
|
data.splice(i+1,1); <!--remove item i+1-->
|
|
removed = true;
|
|
removeCount++;
|
|
}
|
|
}
|
|
if(!removed) {
|
|
i++;
|
|
}
|
|
}
|
|
console.log('Removed', removeCount, 'items');
|
|
//google.setOnLoadCallback(drawChart);
|
|
$(drawChart);
|
|
});
|
|
|
|
function drawChart() {
|
|
var container = document.getElementById('timeline');
|
|
console.log('container', container);
|
|
var chart = new google.visualization.Timeline(container);
|
|
console.log('chart', chart);
|
|
var dataTable = new google.visualization.DataTable();
|
|
console.log('dataTable', dataTable);
|
|
|
|
dataTable.addColumn({ type: 'string', id: 'User' });
|
|
<!--dataTable.addColumn({ type: 'string', id: 'tooltip' });-->
|
|
dataTable.addColumn({ type: 'date', id: 'Start' });
|
|
dataTable.addColumn({ type: 'date', id: 'End' });
|
|
<!--dataTable.addColumn({ type: 'number', id: 'Score' });-->
|
|
dataTable.addRows(data);
|
|
|
|
chart.draw(dataTable);
|
|
}
|
|
</script>
|
|
<body>
|
|
<div id="timeline" style="height: 800px;"></div>
|
|
</body>
|
|
</html>
|