The Data Explorer is an application for exploring
- and working with data built in pure javascript and html. In basic operation it's much like a spreadsheet - though it's
+
Recline allows you to explore and work with data in your browser and then share with others
+ In basic operation it's much like a spreadsheet - though it's
feature set is a little different. In particular, the Data
Explorer provides:
Usage instructions are built into the Data Explorer
- itself so no specific additional documentation is provided on usage.
-
To embed the data explorer in another site you can use a simple iframe in
- your web page:
-
-
-
-
-
-
-
-
Alternatively, you can initialize the explorer yourself from javascript. To
- see how to do this just take at look at the Explorer's initialization
- javascript in: app.js.
-
-
-
-
-
Library Documentation
-
-
Examples
-
-
Note: A quick read through of the Concepts section will
- likely be useful in understanding the details of the examples.
-
-
Note: for all the following examples you should have
- included relevant Recline dependencies.
-
-
Simple in-memory dataset.
-
- // Some data you have
- // Your data must be in the form of list of documents / rows
- // Each document/row is an Object with keys and values
- var data = [
- {id: 0, x: 1, y: 2, z: 3, country: 'UK', label: 'first'}
- , {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'}
- , {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'}
- ];
-
- // Create a Dataset object from local in-memory data
- // Dataset object is a Backbone model - more info on attributes in model docs below
- var dataset = recline.Backend.createDataset(data);
-
- // Now create the main explorer view (it will create other views as needed)
- // DataExplorer is a Backbone View
- var explorer = recline.View.DataExplorer({
- model: dataset,
- // you can specify any element to bind to in the dom
- el: $('.data-explorer-here')
- });
- // Start Backbone routing (if you want routing support)
- Backbone.history.start();
-
-
-
Creating a Dataset Explicitly with a Backend
-
- // Connect to ElasticSearch index/type as our data source
- // There are many other backends you can use (and you can write your own)
- var backend = new recline.Backend.ElasticSearch();
-
- // Dataset is a Backbone model so the first hash become model attributes
- var dataset = recline.Model.Dataset({
- id: 'my-id',
- // url for source of this dataset - will be used by backend
- url: 'http://localhost:9200/my-index/my-type',
- // any other metadata e.g.
- title: 'My Dataset Title'
- },
- backend
- );
-
-
-
-
-
-
Concepts and Structure
-
-
-
-
-
-
Recline has a simple structure layered on top of the basic Model/View
- distinction inherent in Backbone.
-
-
Models
-
There are two main model objects:
-
-
Dataset: represents the dataset.
- Holds dataset info and a pointer to list of data items (Documents in our
- terminology) which it can load from the relevant Backend.
-
Document: an individual data item
- (e.g. a row from a relational database or a spreadsheet, a document from from
- a document DB like CouchDB or MongoDB).
Query: an object to encapsulate a
- query to the backend (useful both for creating queries and for storing and
- manipulating query state - e.g. from a query editor).
-
Facet: Object to store Facet
- information, that is summary information (e.g. values and counts) about a
- field obtained by some faceting method on the backend.
-
-
-
More detail of how these work can be found in the Model source docs.
-
-
-
-
-
-
Backends
-
Backends connect Dataset and Documents to data from a
- specific 'Backend' data source. They provide methods for loading and saving
- Datasets and individuals Documents as well as for bulk loading via a query API
- and doing bulk transforms on the backend.
-
-
A template Base class can be found in the
- Backend base module of the source docs. It documents both the relevant
- methods a Backend must have and (optionally) provides a base 'class' for
- inheritance. You can also find detailed examples of backend implementations in
- the source documentation below.
-
-
Views
-
Complementing the model are various Views (you can
- also easily write your own). Each view holds a pointer to a Dataset:
-
-
DataExplorer: the parent view which manages the overall app and sets up
- sub views.
Note: A quick read through of the Concepts section will
+ likely be useful in understanding the details of the examples.
+
+
Note: for all the following examples you should have
+ included relevant Recline dependencies.
+
+
Simple in-memory dataset.
+
+ // Some data you have
+ // Your data must be in the form of list of documents / rows
+ // Each document/row is an Object with keys and values
+ var data = [
+ {id: 0, x: 1, y: 2, z: 3, country: 'UK', label: 'first'}
+ , {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'}
+ , {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'}
+ ];
+
+ // Create a Dataset object from local in-memory data
+ // Dataset object is a Backbone model - more info on attributes in model docs below
+ var dataset = recline.Backend.createDataset(data);
+
+ // Now create the main explorer view (it will create other views as needed)
+ // DataExplorer is a Backbone View
+ var explorer = recline.View.DataExplorer({
+ model: dataset,
+ // you can specify any element to bind to in the dom
+ el: $('.data-explorer-here')
+ });
+ // Start Backbone routing (if you want routing support)
+ Backbone.history.start();
+
+
+
Creating a Dataset Explicitly with a Backend
+
+ // Connect to ElasticSearch index/type as our data source
+ // There are many other backends you can use (and you can write your own)
+ var backend = new recline.Backend.ElasticSearch();
+
+ // Dataset is a Backbone model so the first hash become model attributes
+ var dataset = recline.Model.Dataset({
+ id: 'my-id',
+ // url for source of this dataset - will be used by backend
+ url: 'http://localhost:9200/my-index/my-type',
+ // any other metadata e.g.
+ title: 'My Dataset Title'
+ },
+ backend
+ );
+
+
+
+
+
+
Concepts and Structure
+
+
+
+
+
+
Recline has a simple structure layered on top of the basic Model/View
+ distinction inherent in Backbone.
+
+
Models
+
There are two main model objects:
+
+
Dataset: represents the dataset.
+ Holds dataset info and a pointer to list of data items (Documents in our
+ terminology) which it can load from the relevant Backend.
+
Document: an individual data item
+ (e.g. a row from a relational database or a spreadsheet, a document from from
+ a document DB like CouchDB or MongoDB).
Query: an object to encapsulate a
+ query to the backend (useful both for creating queries and for storing and
+ manipulating query state - e.g. from a query editor).
+
Facet: Object to store Facet
+ information, that is summary information (e.g. values and counts) about a
+ field obtained by some faceting method on the backend.
+
+
+
More detail of how these work can be found in the Model source docs.
+
+
+
+
+
+
Backends
+
Backends connect Dataset and Documents to data from a
+ specific 'Backend' data source. They provide methods for loading and saving
+ Datasets and individuals Documents as well as for bulk loading via a query API
+ and doing bulk transforms on the backend.
+
+
A template Base class can be found in the
+ Backend base module of the source docs. It documents both the relevant
+ methods a Backend must have and (optionally) provides a base 'class' for
+ inheritance. You can also find detailed examples of backend implementations in
+ the source documentation below.
+
+
Views
+
Complementing the model are various Views (you can
+ also easily write your own). Each view holds a pointer to a Dataset:
+
+
DataExplorer: the parent view which manages the overall app and sets up
+ sub views.
+
diff --git a/src/view-graph.js b/src/view-graph.js
index d9fe7873..e858a51d 100644
--- a/src/view-graph.js
+++ b/src/view-graph.js
@@ -301,6 +301,12 @@ my.Graph = Backbone.View.extend({
$("#flot-tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
+ // it's horizontal so we have to flip
+ if (self.state.attributes.graphType === 'bars') {
+ var _tmp = x;
+ x = y;
+ y = _tmp;
+ }
// convert back from 'index' value on x-axis (e.g. in cases where non-number values)
if (self.model.currentDocuments.models[x]) {
x = self.model.currentDocuments.models[x].get(self.state.attributes.group);
+