From bafe84060cd0ec4ccc9c7ad30c65f80c974c86da Mon Sep 17 00:00:00 2001 From: Matt Fullerton Date: Sat, 21 Mar 2015 10:38:42 +0100 Subject: [PATCH] [docs/demos] Fixes #400, Typos --- _includes/views-list.html | 12 +- docs/tutorial-multiview.markdown | 239 +++++++++++++++++++++++++++++++ docs/tutorial-views.markdown | 8 +- docs/tutorials.html | 5 + 4 files changed, 254 insertions(+), 10 deletions(-) create mode 100644 docs/tutorial-multiview.markdown diff --git a/_includes/views-list.html b/_includes/views-list.html index 36bb87ca..9cb68d3b 100644 --- a/_includes/views-list.html +++ b/_includes/views-list.html @@ -1,7 +1,7 @@ -* Grid (simple) -* Grid (SlickGrid) -* Map +* Grid (simple) +* Grid (SlickGrid) +* Map * Choropleth Map -* Graph -* Timeline -* Multiview (combines views) \ No newline at end of file +* Graph +* Timeline +* Multiview (combines views) \ No newline at end of file diff --git a/docs/tutorial-multiview.markdown b/docs/tutorial-multiview.markdown new file mode 100644 index 00000000..13df5205 --- /dev/null +++ b/docs/tutorial-multiview.markdown @@ -0,0 +1,239 @@ +--- +layout: container +title: Library - Multiview Tutorial +recline-deps: true +root: ../ +--- + +
+

+ 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](views.html) into one visualization. The different views are synced to one dataset. The [technical documentation for Multiview](src/view.multiview.html) 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]({{page.root}}download.html) (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 %} diff --git a/docs/tutorial-views.markdown b/docs/tutorial-views.markdown index 8f850c30..05dfc922 100644 --- a/docs/tutorial-views.markdown +++ b/docs/tutorial-views.markdown @@ -21,15 +21,15 @@ Views display Recline datasets in different ways. This page covers the interesti Before writing any code with Recline, you need to do the following preparation steps on your page: -1. [Download ReclineJS]({{page.root}}download.html) and relevant dependencies. -2. Include the relevant CSS in the head section of your document: +* [Download ReclineJS]({{page.root}}download.html) and relevant dependencies. +* Include the relevant CSS in the head section of your document: {% highlight html %} {% endhighlight %} -3. Include the relevant Javascript files somewhere on the page (preferably before body close tag): +* Include the relevant Javascript files somewhere on the page (preferably before body close tag): {% highlight html %} @@ -50,7 +50,7 @@ You're now ready to start working with Recline. ### Creating a Dataset -Here's some example data We are going to work with: +Here's some example data we are going to work with: {% highlight javascript %} {% include data.js %} diff --git a/docs/tutorials.html b/docs/tutorials.html index 6ef1e832..35dae7df 100644 --- a/docs/tutorials.html +++ b/docs/tutorials.html @@ -53,6 +53,11 @@ root: ../

Views Quickstart - Grids, Graphs, Maps & Timelines

+
+
+

Multiview - Multiple tabbed views

+
+

Doing more with maps