diff --git a/gracedb/views.py b/gracedb/views.py
index c3d75f76a4a458d674abf7d3f04bb2a82763a348..43bcea295b6ef5f860085a776ffccdddae6e6d2d 100644
--- a/gracedb/views.py
+++ b/gracedb/views.py
@@ -416,6 +416,30 @@ def search(request):
{ 'form' : form },
context_instance=RequestContext(request))
+def timeline(request):
+ import simplejson
+ from templatetags.timeutil import gpsToUtc
+ from django.utils import dateformat
+
+ response = HttpResponse(mimetype='application/javascript')
+ events = []
+ for event in Event.objects.exclude(group__name="Test").all():
+ if event.gpstime:
+ t = dateformat.format(gpsToUtc(event.gpstime), "F j, Y h:i:s")+" UTC"
+
+ events.append({
+ 'start': t,
+ 'title': event.get_analysisType_display(),
+ 'description':
+ "%s<br/>%s" %(event.get_analysisType_display(),"GPS time:%s"%event.gpstime),
+ 'durationEvent':False,
+ })
+ d = {'events': events}
+ msg = simplejson.dumps(d)
+ response['Content-length'] = len(msg)
+ response.write(msg)
+ return response
+
#-----------------------------------------------------------------
# Things that aren't views and should really be elsewhere.
#-----------------------------------------------------------------
diff --git a/static/js/timeline.js b/static/js/timeline.js
new file mode 100644
index 0000000000000000000000000000000000000000..30f530e605f3a24113f0daa933a53bc9f8ed8569
--- /dev/null
+++ b/static/js/timeline.js
@@ -0,0 +1,47 @@
+var tl;
+
+var eventSource = new Timeline.DefaultEventSource();
+
+function onLoad() {
+ var bandInfos = [
+ Timeline.createBandInfo({
+ eventSource: eventSource,
+ //date: "Sat May 20 1961 00:00:00 GMT-0600",
+ width: "70%",
+ intervalUnit: Timeline.DateTime.HOUR,
+ intervalPixels: 100
+ }),
+ Timeline.createBandInfo({
+ eventSource: eventSource,
+ //date: "Sat May 20 1961 00:00:00 GMT-0600",
+ width: "15%",
+ intervalUnit: Timeline.DateTime.DAY,
+ intervalPixels: 100,
+ overview: true
+ }),
+ Timeline.createBandInfo({
+ eventSource: eventSource,
+ //date: "Sat May 20 1961 00:00:00 GMT-0600",
+ width: "15%",
+ intervalUnit: Timeline.DateTime.MONTH,
+ intervalPixels: 200,
+ overview: true
+ })
+ ];
+ bandInfos[1].syncWith = 0;
+ bandInfos[1].highlight = true;
+ bandInfos[2].syncWith = 1;
+ bandInfos[2].highlight = true;
+ tl = Timeline.create(document.getElementById("tl"), bandInfos);
+ Timeline.loadJSON("/gracedb/events/timeline",
+ function(json, url) { eventSource.loadJSON(json, url); });
+}
+var resizeTimerID = null;
+function onResize() {
+ if (resizeTimerID == null) {
+ resizeTimerID = window.setTimeout(function() {
+ resizeTimerID = null;
+ tl.layout();
+ }, 500);
+ }
+}
diff --git a/templates/base.html b/templates/base.html
index 551c3140478f9089ee4b0af8d680229aa1b199c0..327c19629bc478e5dceb6b3c5a0b20cac2bd7191 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,9 +17,10 @@ function changeTime(obj, label) {
}
</script>
<!-- END TESTING -->
+{% block jscript %}{% endblock %}
</head>
-<body id="{% block pageid %}{% endblock %}">
+<body id="{% block pageid %}{% endblock %}"{% block bodyattrs %}{% endblock %}>
<div id="header">
<!-- Header -->