Recline.js – relax with your data

Views Tutorial
This step-by-step tutorial will quickly get you started with Recline basics, including creating a dataset from local data and setting up a grid, graph and map to display it.

Preparing your page

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

  1. Download ReclineJS and relevant dependencies.

  2. Include the relevant CSS in the head section of your document:

    
 rel="stylesheet" href="vendor/bootstrap/2.0.2/css/bootstrap.css" />

 rel="stylesheet" href="css/grid.css" />

  3. Include the relevant Javascript files somewhere on the page (preferably before body close tag):

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

Setting up the Grid

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:

 rel="stylesheet" href="css/slickgrid.css">

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

 id="mygrid" style="height: 400px">

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

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:

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

Next, create a new div for the graph:

 id="mygraph">

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: {
    group: "date",
    series: ["x", "z"]
  }
});
$el.append(graph.el);
graph.render();
graph.redraw();

The result is the following graph:

 

Creating a Map

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:


 rel="stylesheet" href="vendor/leaflet/0.4.4/leaflet.css">

 rel="stylesheet" href="vendor/leaflet.markercluster/MarkerCluster.css">
 rel="stylesheet" href="vendor/leaflet.markercluster/MarkerCluster.Default.css">

 rel="stylesheet" href="css/map.css">

Now, create a new div for the map:

 id="mymap">

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

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:


 rel="stylesheet" href="vendor/timeline/20120520/css/timeline.css">

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


 id="mytimeline">

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

Use the Library »

Recline.js is freely redistributable under the terms of the MIT license.

Supported by funding from the Shuttleworth Foundation

Contacts