Views

Views display Recline datasets in different ways. This page covers the interesting built-in views. For a full list of views including extensions outside of the Recline.js core, see the list of currently available views.

Preparing your page

Before writing any code with Recline, you need to do the following preparation steps on your page:

<!-- you do not have to use bootstrap but we use it by default -->
<link rel="stylesheet" href="vendor/bootstrap/3.2.0/css/bootstrap.css" />
<!-- 3rd party dependencies -->
<script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="vendor/underscore/1.4.4/underscore.js"></script>
<script type="text/javascript" src="vendor/backbone/1.0.0/backbone.js"></script>
<script type="text/javascript" src="vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="vendor/bootstrap/3.2.0/js/bootstrap.js"></script>

<!-- note that we could include individual components rather than whole of recline e.g.
<script type="text/javascript" src="src/model.js"></script>
<script type="text/javascript" src="src/backend.memory.js"></script>
<script type="text/javascript" src="src/view-grid.js"></script>
-->

<script type="text/javascript" src="dist/recline.js"></script>

You’re now ready to start working with Recline.

Creating a Dataset

Here’s some example data we are going to work with:

var data = [
  {id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', geo: {lat:52.56, lon:13.40} },
  {id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', geo: {lat:54.97, lon:-1.60}},
  {id: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', geo: {lat:40.00, lon:-75.5}},
  {id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', geo: {lat:57.27, lon:-6.20}},
  {id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', geo: {lat:51.58, lon:0}},
  {id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', geo: {lat:51.04, lon:7.9}}
];

In this data we have 6 documents / rows. Each document is a javascript object containing keys and values (note that all values here are ‘simple’ but there is no reason you cannot have objects as values allowing you to nest data.

We can now create a recline Dataset object (and memory backend) from this raw data:

var dataset = new recline.Model.Dataset({
  records: data
});

//Depending on the view, it may be important to set the date type
dataset.fields.models[1].attributes.type = 'date';

Setting up the Grid

The source code along with all dependencies for the grid part of the tutorial can be found at this GitHub repository. See it in action via GitHub Pages. Although it's not demonstrated here, you can also use the simpler Grid view without SlickGrid. Source code along with all dependencies for that can be found at this GitHub repository. Demo on GitHub Pages.

Let’s create a data grid view to display the dataset we have just created. We’re going to use the SlickGrid-based grid so we need the following CSS and JS dependencies in addition to those above:

<link rel="stylesheet" href="css/grid.css" />
<link rel="stylesheet" href="css/slickgrid.css">
<link rel="stylesheet" href="vendor/slickgrid/2.2/slick.grid.css">

<!-- vendor -->
<script type="text/javascript" src="vendor/slickgrid/2.2/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.2/jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.2/slick.core.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.2/slick.grid.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.2/slick.formatters.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.2/slick.editors.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.2/plugins/slick.rowselectionmodel.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.2/plugins/slick.rowmovemanager.js"></script>

<!-- Recline (only needed when NOT including the combined JS file as shown above) -->
<script type="text/javascript" src="src/view.slickgrid.js"></script>

Now, let’s create an HTML element to for the Grid:

<div id="mygrid" style="height: 400px"></div>

Now let’s set up the Grid:

var $el = $('#mygrid');
var grid = new recline.View.SlickGrid({
  model: dataset,
  el: $el
});
grid.visible = true;
grid.render();

And hey presto:

 

Creating a Graph

The source code along with all dependencies for the graph part of the tutorial can be found at this GitHub repository. See it in action via GitHub Pages.

Let’s create a graph view to display a line graph for this dataset.

First, add the additional dependencies for this view. These are the Flot library and the Recline Flot Graph view:

<link rel="stylesheet" href="css/flot.css">

<!-- javascript -->
<!--[if lte IE 8]>
<script language="javascript" type="text/javascript" src="vendor/flot/excanvas.min.js"></script>
<![endif]-->
<!-- you only need moment when you have datetime data -->
<script type="text/javascript" src="vendor/moment/2.0.0/moment.js"></script>

<script type="text/javascript" src="vendor/flot/jquery.flot.js"></script>
<script type="text/javascript" src="vendor/flot/jquery.flot.time.js"></script>

<!-- Recline (only needed when NOT including the combined JS file as shown above) -->
<script type="text/javascript" src="src/view.graph.js"></script>

Next, create a new div for the graph:

<div id="mygraph"></div>

Now let’s create the graph, we will use the same dataset we had earlier, and we will need to set the view ‘state’ in order to configure the graph with the column to use for the x-axis (“group”) and the columns to use for the series to show (“series”).

State: The concept of a state is a common feature of Recline views being an object which stores information about the state and configuration of a given view. You can read more about it in the general Views documentation as well as the documentation of individual views such as the Graph View.
var $el = $('#mygraph');
var graph = new recline.View.Graph({
  model: dataset,
  state: {
    graphType: "lines-and-points",
    group: "date",
    series: ["y", "z"]
  }
});
$el.append(graph.el);
graph.render();
graph.redraw();

For the axis date formatting to work, it is crucial that the date type is set for that field as shown in the code concerning the dataset above. The result is the following graph:

 

Creating a Map

The source code along with all dependencies for the map part of the tutorial can be found at this GitHub repository. See it in action via GitHub Pages.

Now, let’s create a map of this dataset using the lon/lat information which is present on these data points.

First, add the additional dependencies for the map view. These are the Leaflet library and the Recline Map view:

<!-- css -->
<link rel="stylesheet" href="vendor/leaflet/0.7.3/leaflet.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="vendor/leaflet/0.7.3/leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="vendor/leaflet.markercluster/MarkerCluster.css">
<link rel="stylesheet" href="vendor/leaflet.markercluster/MarkerCluster.Default.css">
<link rel="stylesheet" href="css/map.css">

<!-- javascript -->
<script type="text/javascript" src="vendor/leaflet/0.7.3/leaflet.js"></script>
<script type="text/javascript" src="vendor/leaflet.markercluster/leaflet.markercluster.js"></script>

<!-- Recline (only needed when NOT including the combined JS file as shown above) -->
<script type="text/javascript" src="src/view-map.js"></script>

Now, create a new div for the map:

<div id="mymap"></div>

Now let’s create the map, we will use the existing dataset object created previously:

var $el = $('#mymap');
var map = new recline.View.Map({
  model: dataset
});
$el.append(map.el);
map.render();
 

Creating a Timeline

The source code along with all dependencies for the timeline part of the tutorial can be found at this GitHub repository. See it in action via GitHub Pages.

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:

<!-- css -->
<link rel="stylesheet" href="vendor/timeline/css/timeline.css">
<link rel="stylesheet" href="css/map.css">

<!-- javascript -->
<script type="text/javascript" src="vendor/moment/2.0.0/moment.js"></script>
<script type="text/javascript" src="vendor/timeline/js/timeline.js"></script>

Now, create a new div for the map (must have an explicit height for the timeline to render):

<style type="text/css">#mytimeline .recline-timeline { height: 400px; }</style>
<div id="mytimeline"></div>

Now let’s create the timeline, we will use the existing dataset object created previously:

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