From c75e31a856d5cd396bde720ff198fa2f9dd7c6b2 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Wed, 15 Aug 2012 12:27:45 +0100
Subject: [PATCH] [#213,docs,views][s]: add timeline example to views tutorial
 - fixes #213.

---
 _includes/recline-deps.html          |  1 +
 _includes/tutorial-views-timeline.js | 15 ++++++++++++
 docs/tutorial-views.markdown         | 36 ++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 _includes/tutorial-views-timeline.js

diff --git a/_includes/recline-deps.html b/_includes/recline-deps.html
index 270855cc..ee0d4750 100644
--- a/_includes/recline-deps.html
+++ b/_includes/recline-deps.html
@@ -3,6 +3,7 @@
   <link rel="stylesheet" href="{{page.root}}vendor/leaflet/0.3.1/leaflet.ie.css" />
   <![endif]-->
   <link rel="stylesheet" href="{{page.root}}vendor/slickgrid/2.0.1/slick.grid.css">
+  <link rel="stylesheet" href="{{page.root}}vendor/timeline/20120520/css/timeline.css">
 
   <!-- Recline CSS components -->
   <link rel="stylesheet" href="{{page.root}}css/grid.css">
diff --git a/_includes/tutorial-views-timeline.js b/_includes/tutorial-views-timeline.js
new file mode 100644
index 00000000..cfb91cc7
--- /dev/null
+++ b/_includes/tutorial-views-timeline.js
@@ -0,0 +1,15 @@
+var $el = $('#mytimeline');
+var timeline = new recline.View.Timeline({
+  model: dataset
+});
+$el.append(timeline.el);
+// set the headline/title for each record with x column
+timeline.convertRecord = function(record, fields) {
+  var out = this._convertRecord(record);
+  if (out) {
+    out.headline = record.get('x').toString();
+  }
+  return out;
+}
+timeline.render();
+
diff --git a/docs/tutorial-views.markdown b/docs/tutorial-views.markdown
index f297c16a..6752bb86 100644
--- a/docs/tutorial-views.markdown
+++ b/docs/tutorial-views.markdown
@@ -227,3 +227,39 @@ $el.append(map.el);
 map.render();
 </script>
 
+### Creating a Timeline
+
+Now, let's create a timeline for this dataset using the date information which is
+present on these data points.
+
+First, add the additional dependencies for the timeline view. The timeline is built on the excellent Verite Timeline widget so that library is the key one for this view:
+
+{% highlight html %}
+<!-- css -->
+<link rel="stylesheet" href="vendor/timeline/20120520/css/timeline.css">
+
+<!-- javascript -->
+<script type="text/javascript" src="vendor/moment/1.6.2/moment.js"></script>
+<script type="text/javascript" src="vendor/timeline/20120520/js/timeline.js"></script>
+{% endhighlight %}
+
+Now, create a new div for the map:
+
+{% highlight html %}
+<div id="mytimeline"></div>
+{% endhighlight %}
+
+Now let's create the timeline, we will use the existing dataset object created
+previously:
+
+{% highlight javascript %}
+{% include tutorial-views-timeline.js %}
+{% endhighlight %}
+
+<div id="mytimeline">&nbsp;</div>
+<div style="clear: both;"></div>
+
+<script type="text/javascript">
+{% include tutorial-views-timeline.js %}
+</script>
+