[build][xs]: latest version of recline.

recline.js

@@ -131,14 +131,13 @@ this.recline.Model = this.recline.Model || {};
 
 // ## A Dataset model
 //
-// A model must have the following (Backbone) attributes:
+// A model has the following (non-Backbone) attributes:
 //
 // * fields: (aka columns) is a FieldList listing all the fields on this
-//   Dataset (this can be set explicitly, or, on fetch() of Dataset
-//   information from the backend, or as is perhaps most common on the first
-//   query)
-// * currentDocuments: a DocumentList containing the Documents we have currently loaded for viewing (you update currentDocuments by calling getRows)
-// * docCount: total number of documents in this dataset (obtained on a fetch for this Dataset)
+//   Dataset (this can be set explicitly, or, will be set by Dataset.fetch() or Dataset.query()
+// * currentDocuments: a DocumentList containing the Documents we have
+//   currently loaded for viewing (you update currentDocuments by calling query)
+// * docCount: total number of documents in this dataset
 my.Dataset = Backbone.Model.extend({
   __type__: 'Dataset',
   initialize: function(model, backend) {
@@ -553,11 +552,9 @@ my.FlotGraph = Backbone.View.extend({
       return
     }
     var series = this.createSeries();
-    var options = this.graphOptions[this.chartConfig.graphType];
+    var options = this.getGraphOptions(this.chartConfig.graphType);
     this.plot = $.plot(this.$graph, series, options);
-    if (this.chartConfig.graphType in { 'points': '', 'lines-and-points': '' }) {
-      this.setupTooltips();
-    }
+    this.setupTooltips();
     // create this.plot and cache it
 //    if (!this.plot) {
 //      this.plot = $.plot(this.$graph, series, options);
@@ -570,40 +567,63 @@ my.FlotGraph = Backbone.View.extend({
 //    }
   },
 
-  graphOptions: { 
-    lines: {
-       series: { 
-         lines: { show: true }
-       }
-    }
-    , points: {
-      series: {
-        points: { show: true }
-      },
-      grid: { hoverable: true, clickable: true }
-    }
-    , 'lines-and-points': {
-      series: {
-        points: { show: true },
-        lines: { show: true }
-      },
-      grid: { hoverable: true, clickable: true }
-    }
-    , bars: {
-      series: {
-        lines: {show: false},
-        bars: {
-          show: true,
-          barWidth: 1,
-          align: "left",
-          fill: true
+  // needs to be function as can depend on state
+  getGraphOptions: function(typeId) { 
+    var self = this;
+    var tickFormatter = function (val) {
+      if (self.model.currentDocuments.models[val]) {
+        var out = self.model.currentDocuments.models[val].get(self.chartConfig.group);
+        // if the x-axis value was in fact a number we want that not the 
+        if (typeof(out) == 'number') {
+          return val;
+        } else {
+          return out;
+        }
+      }
+      return val;
+    }
+    // TODO: we should really use tickFormatter and 1 interval ticks if (and
+    // only if) x-axis values are non-numeric
+    // However, that is non-trivial to work out from a dataset (datasets may
+    // have no field type info). Thus at present we only do this for bars.
+    var options = { 
+      lines: {
+         series: { 
+           lines: { show: true }
+         }
+      }
+      , points: {
+        series: {
+          points: { show: true }
+        },
+        grid: { hoverable: true, clickable: true }
+      }
+      , 'lines-and-points': {
+        series: {
+          points: { show: true },
+          lines: { show: true }
+        },
+        grid: { hoverable: true, clickable: true },
+      }
+      , bars: {
+        series: {
+          lines: {show: false},
+          bars: {
+            show: true,
+            barWidth: 1,
+            align: "center",
+            fill: true
+          }
+        },
+        grid: { hoverable: true, clickable: true },
+        xaxis: {
+          tickSize: 1,
+          tickLength: 1,
+          tickFormatter: tickFormatter
         }
-      },
-      xaxis: {
-        tickSize: 1,
-        tickLength: 1,
       }
     }
+    return options[typeId];
   },
 
   setupTooltips: function() {
@@ -624,12 +644,19 @@ my.FlotGraph = Backbone.View.extend({
     var previousPoint = null;
     this.$graph.bind("plothover", function (event, pos, item) {
       if (item) {
-        if (previousPoint != item.dataIndex) {
-          previousPoint = item.dataIndex;
+        if (previousPoint != item.datapoint) {
+          previousPoint = item.datapoint;
           
           $("#flot-tooltip").remove();
-          var x = item.datapoint[0].toFixed(2),
-              y = item.datapoint[1].toFixed(2);
+          var x = item.datapoint[0];
+          var y = item.datapoint[1];
+          // 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.chartConfig.group);
+          } else {
+            x = x.toFixed(2);
+          }
+          y = y.toFixed(2);
           
           var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
             group: self.chartConfig.group,