-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
60 lines (47 loc) · 2.07 KB
/
index.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
<html>
<head>
<title>Checkins over time</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://singly.com/js/api.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var client = new APIClient();
client.getJSON('/Me/places', {limit: 4000}, function(places) {
console.log('found ' + places.length + ' places');
var idx, yr, mo, byear=2009, eyear=2012, months=(eyear-byear+1) * 12, data=[];
//fill an array with data for the histogram
for (var i = 0; i < months; i+= 1){
data[i] = 0;
}
var mnames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var lastCheckin = places[places.length - 1];
var firstCheckinT = new Date(places[0].at);
var lastCheckinT = new Date(places[places.length - 1].at);
for(var i in places) {
var checkinDate = new Date(places[i].at);
mo = mnames[checkinDate.getMonth()];
day = checkinDate.getDay();
yr = checkinDate.getFullYear();
console.log('places #' + i, places[i], checkinDate);
idx = (parseInt(yr)-byear) * 12 + parseInt(checkinDate.getMonth()) - 1;
data[idx] +=1;
}
for (var i in data){
$('.histogram').append('<img src="bar.gif" height="' + data[i]/places.length * 1000 + '"> ');
}
$('.stats').append('<p>You have checked in ' + places.length + ' times between ' + mnames[firstCheckinT.getMonth()] + ' ' + firstCheckinT.getFullYear() + ' and ' + mnames[lastCheckinT.getMonth()] + ' ' + lastCheckinT.getFullYear() + '</p><p><em>You were most recently at '+ lastCheckin.title + '</em></p>');
});
});
</script>
</head>
<body>
<div id="catchphrase">
Your checkins over time
</div>
<div class="histogram">
</div>
<div class="stats">
</div>
</body>
</html>