Since Recline looks so awesome, I’m just trying to fiddle with the multiview demo before working with my own data. This sucker is completely indistinguishable from your demo here, but it’s throwing an error that I (lowly non-developer that I am) can’t interpret:
Uncaught TypeError: undefined is not a function
Is this an easy “you forgot a semicolon” sort of thing or am I in bug territory here?
Thanks for building a great toolkit!
<!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="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="//geosprocket.com/dev/recline/vendor/bootstrap/2.0.2/css/bootstrap.css" />
<link rel="stylesheet" href="//geosprocket.com/dev/recline/vendor/leaflet/0.4.4/leaflet.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="//geosprocket.com/dev/recline/vendor/leaflet/0.4.4/leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="//geosprocket.com/dev/recline/vendor/leaflet.markercluster/MarkerCluster.css">
<link rel="stylesheet" href="//geosprocket.com/dev/recline/vendor/leaflet.markercluster/MarkerCluster.Default.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="//geosprocket.com/dev/recline/vendor/leaflet.markercluster/MarkerCluster.Default.ie.css" />
<![endif]-->
<link rel="stylesheet" href="//geosprocket.com/dev/recline/vendor/slickgrid/2.0.1/slick.grid.css">
<link rel="stylesheet" href="//geosprocket.com/dev/recline/vendor/timeline/20120520/css/timeline.css">
<!-- Recline CSS components -->
<link rel="stylesheet" href="//geosprocket.com/dev/recline/css/grid.css">
<link rel="stylesheet" href="//geosprocket.com/dev/recline/css/slickgrid.css">
<link rel="stylesheet" href="//geosprocket.com/dev/recline/css/graph.css">
<link rel="stylesheet" href="//geosprocket.com/dev/recline/css/transform.css">
<link rel="stylesheet" href="//geosprocket.com/dev/recline/css/map.css">
<link rel="stylesheet" href="//geosprocket.com/dev/recline/css/multiview.css">
<!-- /Recline CSS components -->
<!-- 3rd party JS libraries -->
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/underscore/1.4.2/underscore.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/underscore.deferred/0.4.0/underscore.deferred.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/backbone/0.9.2/backbone.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/bootstrap/2.0.2/bootstrap.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/flotr2/flotr2.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/leaflet/0.4.4/leaflet.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/leaflet.markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/moment/1.6.2/moment.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/vendor/timeline/20120520/js/timeline.js"></script>
<!--[if lte IE 7]>
<script language="javascript" type="text/javascript" src="//geosprocket.com/dev/recline/vendor/json/json2.js"></script>
<![endif]-->
<!--
## Just use the all in one library version rather than individual files
<script type="text/javascript" src="//geosprocket.com/dev/recline/dist/recline.js"></script>
-->
<!-- model and backends -->
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/ecma-fixes.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/model.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/backend.memory.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/backend.dataproxy.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/backend.gdocs.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/backend.elasticsearch.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/backend.csv.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/backend.ckan.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/backend.solr.js"></script>
<!-- views -->
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/view.grid.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/view.slickgrid.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/view.transform.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/data.transform.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/view.graph.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/view.map.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/view.timeline.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/widget.pager.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/widget.queryeditor.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/widget.filtereditor.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/widget.facetviewer.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/widget.fields.js"></script>
<script type="text/javascript" src="//geosprocket.com/dev/recline/src/view.multiview.js"></script>
<!-- link rel="stylesheet" href="//geosprocket.com/dev/recline/vendor/bootstrap/2.0.2/css/bootstrap-responsive.css" -->
<link href="//geosprocket.com/dev/recline/css-site/pygments.css" rel="stylesheet" type="text/css" />
<link href="//geosprocket.com/dev/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">
</div>
</div>
</div>
<div class="container">
<style type="text/css">
.recline-slickgrid {
height: 650px;
}
.recline-timeline .vmm-timeline {
height: 650px;
}
</style>
<div class="data-explorer-here"></div>
<div style="clear: both;"></div>
<script type="text/javascript" src="app.js"></script>
</div>
</body>
</html>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 {
var 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
})
},
{
id: 'graph',
label: 'Graph',
view: new recline.View.Graph({
model: dataset
})
},
{
id: 'map',
label: 'Map',
view: new recline.View.Map({
model: dataset
})
},
{
id: 'transform',
label: 'Transform',
view: new recline.View.Transform({
model: dataset
})
}
];
window.dataExplorer = new recline.View.MultiView({
model: dataset,
el: $el,
state: state,
views: views
});
}