datahub/docs/tutorial-multiview.markdown

layout, title, recline-deps, root

layout	title	recline-deps	root
container	Library - Multiview Tutorial	true	../

Multiview Tutorial
This tutorial will quickly get you started with Recline Multiview

The full source code along with all dependencies for the tutorial can be found at this GitHub repository. Do not try to assemble a working example from the code snippets in this page! See it in action via GitHub Pages. The code is almost identical to that used for the site demo, with the advantage of the code being separated out of the main recline website. You can also see Multiview in action in many CKAN-based data catalogs (resource views) and in the OKFN Labs DataDeck

Multiview

Multiview, as its name suggests, combines multiple Recline views into one visualization. The different views are synced to one dataset. The technical documentation for Multiview details the nuts and bolts.

When building a Multiview from scratch, it is advised to start by getting each individual view to work satisfactorily before combining into a Multiview, to aid debugging.

Preparing your page

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

• Download ReclineJS (downloading the master, developer code is recommended as this example is based on that and all dependencies should be available) or the all-in-one demo code.
• Include the Multiview CSS as well as the CSS for each view in the head section of your document, as well as any 3rd party CSS for each view e.g.: {% highlight html %}

{% endhighlight %}

• Include the relevant Javascript files somewhere on the page (preferably before body close tag). You will need to include any necessary Javascript dependencies for each view as well, e.g.: {% highlight html %}

{% endhighlight %}

Creating a Dataset

Here's the function to create an example dataset we are going to work with:

{% highlight javascript %} function createDemoDataset() { var dataset = new recline.Model.Dataset({ records: [ {id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', sometext: 'first', lat:52.56, lon:13.40}, {id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', sometext: 'second', lat:54.97, lon:-1.60}, {id: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', sometext: 'third', lat:40.00, lon:-75.5}, {id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', sometext: 'fourth', lat:57.27, lon:-6.20}, {id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', sometext: 'fifth', lat:51.58, lon:0}, {id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', sometext: 'sixth', lat:51.04, lon:7.9} ], // let's be really explicit about fields // Plus take opportunity to set date to be a date field and set some labels fields: [ {id: 'id'}, {id: 'date', type: 'date'}, {id: 'x', type: 'number'}, {id: 'y', type: 'number'}, {id: 'z', type: 'number'}, {id: 'country', 'label': 'Country'}, {id: 'sometext', 'label': 'Some text'}, {id: 'lat'}, {id: 'lon'} ] }); return dataset; } {% endhighlight %}

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.

Setting up the Multiview

To create a Multiview, we first create each view that we want to include, and include these in an array. A function to do everything for SlickGrid, Graph and Map views is shown below:

{% highlight javascript %} var createMultiView = function(dataset, state) { // remove existing multiview if present var reload = false; if (window.multiView) { window.multiView.remove(); window.multiView = null; reload = true; }

var $el = $('

'); $el.appendTo(window.explorerDiv);

// customize the subviews for the MultiView var views = [ { id: 'grid', label: 'Grid', view: new recline.View.SlickGrid({ model: dataset, state: { gridOptions: { editable: true, // Enable support for row add enabledAddRow: true, // Enable support for row delete enabledDelRow: true, // Enable support for row ReOrder enableReOrderRow:true, autoEdit: false, enableCellNavigation: true }, columnsEditor: [ { column: 'date', editor: Slick.Editors.Date }, { column: 'sometext', editor: Slick.Editors.Text } ] } }) }, { id: 'graph', label: 'Graph', view: new recline.View.Graph({ model: dataset

  })
},
{
  id: 'map',
  label: 'Map',
  view: new recline.View.Map({
    model: dataset
  })
}

];

var multiView = new recline.View.MultiView({ model: dataset, el: $el, state: state, views: views }); return multiView; } {% endhighlight %}

To tie it all together: {% highlight javascript %} jQuery(function($) { window.multiView = null; window.explorerDiv = $('.data-explorer-here');

// create the demo dataset var dataset = createDemoDataset(); // now create the multiview // this is rather more elaborate than the minimum as we configure the // MultiView in various ways (see function below) window.multiview = createMultiView(dataset);

// last, we'll demonstrate binding to changes in the dataset // this will print out a summary of each change onto the page in the // changelog section dataset.records.bind('all', function(name, obj) { var $info = $('

'); $info.html(name + ': ' + JSON.stringify(obj.toJSON())); $('.changelog').append($info); $('.changelog').show(); }); }); {% endhighlight %}

The HTML is very simple: {% highlight html %}

Changes

{% endhighlight %}