Skip to content

Instantly share code, notes, and snippets.

@mchelen

mchelen/app.js

Created May 1, 2014 21:34
Show Gist options
  • Save mchelen/3ce3c0f616b3766047f1 to your computer and use it in GitHub Desktop.
Save mchelen/3ce3c0f616b3766047f1 to your computer and use it in GitHub Desktop.
Download ZIP
Recline.js Multiview Demo
Raw
app.js
jQuery(function($) {
window.dataExplorer = null;
window.explorerDiv = $('.data-explorer-here');
// This is some fancy stuff to allow configuring the multiview from
// parameters in the query string
//
// For more on state see the view documentation.
var state = recline.View.parseQueryString(decodeURIComponent(window.location.search));
if (state) {
_.each(state, function(value, key) {
try {
value = JSON.parse(value);
} catch(e) {}
state[key] = value;
});
} else {
state.url = 'demo';
}
var dataset = null;
if (state.dataset || state.url) {
var datasetInfo = _.extend({
url: state.url,
backend: state.backend
},
state.dataset
);
dataset = new recline.Model.Dataset(datasetInfo);
} else {
dataset = new recline.Model.Dataset({
records: [
{id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40},
{id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', title: 'second', lat:54.97, lon:-1.60},
{id: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', title: 'third', lat:40.00, lon:-75.5},
{id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', title: 'fourth', lat:57.27, lon:-6.20},
{id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', title: 'fifth', lat:51.58, lon:0},
{id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', title: '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: 'title', 'label': 'Title'},
{id: 'lat'},
{id: 'lon'}
]
});
}
createExplorer(dataset, state);
});
// make Explorer creation / initialization in a function so we can call it
// again and again
var createExplorer = function(dataset, state) {
// remove existing data explorer view
var reload = false;
if (window.dataExplorer) {
window.dataExplorer.remove();
reload = true;
}
window.dataExplorer = null;
var $el = $('<div />');
$el.appendTo(window.explorerDiv);
var views = [
{
id: 'grid',
label: 'Grid',
view: new recline.View.SlickGrid({
model: dataset,
state: {
gridOptions: {
editable: true,
enabledAddRow: true,
enabledDelRow: true,
autoEdit: false,
enableCellNavigation: true
},
columnsEditor: [
{ column: 'date', editor: Slick.Editors.Date },
{ column: 'title', 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
})
}
];
window.dataExplorer = new recline.View.MultiView({
model: dataset,
el: $el,
state: state,
views: views
});
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demos - Multiview - Recline Data Explorer and Library</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/bootstrap/2.0.2/css/bootstrap.css" />
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/leaflet/0.4.4/leaflet.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/leaflet/0.4.4/leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/leaflet.markercluster/MarkerCluster.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/leaflet.markercluster/MarkerCluster.Default.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/leaflet.markercluster/MarkerCluster.Default.ie.css" />
<![endif]-->
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/slickgrid/2.0.1/slick.grid.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/timeline/css/timeline.css">
<!-- Recline CSS components -->
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/grid.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/slickgrid.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/flot.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/map.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/multiview.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/timeline.css">
<!-- /Recline CSS components -->
<!-- 3rd party JS libraries -->
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/underscore/1.4.4/underscore.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/backbone/1.0.0/backbone.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/bootstrap/2.0.2/bootstrap.js"></script>
<!--[if lte IE 8]>
<script language="javascript" type="text/javascript" src="http://okfnlabs.org/recline/vendor/flot/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/flot/jquery.flot.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/leaflet/0.4.4/leaflet.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/leaflet.markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/moment/2.0.0/moment.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/timeline/js/timeline.js"></script>
<!--[if lte IE 7]>
<script language="javascript" type="text/javascript" src="http://okfnlabs.org/recline/vendor/json/json2.js"></script>
<![endif]-->
<!--
## Just use the all in one library version rather than individual files
<script type="text/javascript" src="http://okfnlabs.org/recline/dist/recline.js"></script>
-->
<!-- model and backends -->
<script type="text/javascript" src="http://okfnlabs.org/recline/src/ecma-fixes.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/model.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/backend.memory.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/backend.dataproxy.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline.backend.gdocs/backend.gdocs.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/backend.csv.js"></script>
<!-- views -->
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.grid.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.slickgrid.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.flot.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.graph.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.map.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.timeline.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.pager.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.queryeditor.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.filtereditor.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.valuefilter.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.facetviewer.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.fields.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.multiview.js"></script>
<!-- link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/bootstrap/2.0.2/css/bootstrap-responsive.css" -->
<link href="http://okfnlabs.org/recline/css-site/pygments.css" rel="stylesheet" type="text/css" />
<link href="http://okfnlabs.org/recline/css-site/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="logo-icon pull-left" href="/">
<img src="http://assets.okfn.org/p/recline/img/chair.png" />
</a>
<a class="brand" href="http://okfnlabs.org/recline/"><strong>Recline.js</strong> &ndash; relax with your data</a>
<ul class="nav">
<li>
<a href="http://okfnlabs.org/recline/docs/">
<i class="icon-book icon-white"></i>
Documentation
</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="http://okfnlabs.org/recline/docs/tutorials.html">
<i class="icon-road icon-white"></i>
Tutorials
</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="http://okfnlabs.org/recline/demos/">
<i class="icon-pencil icon-white"></i>
Demos
</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="http://okfnlabs.org/recline/download.html">
<i class="icon-download-alt icon-white"></i>
Download
</a>
</li>
</ul>
<ul class="nav pull-right">
<li>
<a href="http://github.com/okfn/recline/" title="Recline on Github">
<iframe src="http://ghbtns.com/github-btn.html?user=okfn&repo=recline&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20"></iframe>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<style type="text/css">
.recline-slickgrid {
height: 550px;
}
.recline-timeline .vmm-timeline {
height: 550px;
}
</style>
<div class="data-explorer-here"></div>
<div style="clear: both;"></div>
<script type="text/javascript" src="app.js"></script>
</div>
<section class="footer">
<div class="container">
<div class="row">
<div class="span4">
<p class="getit-btn"><a href="http://okfnlabs.org/recline/docs/" class="btn">Use the Library &raquo;</a></p>
<p>Recline.js is freely redistributable under the terms of the MIT license.</p>
</div>
<div class="span3">
<p><a href="http://www.shuttleworthfoundation.org/"><img src="http://farm8.staticflickr.com/7019/6467412887_18f72f5066_n.jpg" style="width: 140px;" alt="Supported by funding from the Shuttleworth Foundation" /></a></p>
<ul>
<li><a href="http://datahub.io/">The DataHub</a></li>
<li><a href="http://OpenSpending.org/">OpenSpending.org</a></li>
<li><a href="http://datacouch.com/">DataCouch.com</a></li>
</ul>
</div>
<div class="span3">
<ul>
<li><a href="http://okfnlabs.org/">Open Knowledge Foundation Labs</a></li>
<li><a href="http://opendefinition.org/">Open Definition</a></li>
<li><a href="http://okfn.org/">Open Knowledge Foundation</a></li>
</ul>
</div>
<div class="span2">
<h5>Contacts</h5>
<ul style="list-style-type: none; margin-left: 0;">
<li><a href="http://twitter.com/okfnlabs">@OKFNLabs</a></li>
<li><a href="http://twitter.com/maxogden">@maxogden</a></li>
<li><a href="http://twitter.com/rufuspollock">@rufuspollock</a></li>
</ul>
<a class="nav-logo" href="http://okfn.org/" title="An Open Knowledge Foundation Project">
<img src="http://assets.okfn.org/p/okfn/img/logo_28x30.png" alt="Open Knowledge Foundation logo" />
</a>
</div>
</div>
</div>
</section>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8271754-44']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment