[#213,docs,views][s]: add timeline example to views tutorial - fixes #213.

_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">

_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();
+

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>
+