morrisjs-rails 0.3.3 → 0.4.0

data/vendor/assets/javascripts/morris.js

@@ -44,9 +44,7 @@
 
   Morris.commas = function(num) {
     var absnum, intnum, ret, strabsnum;
-    if (num === null) {
-      return "-";
-    } else {
+    if (num != null) {
       ret = num < 0 ? "-" : "";
       absnum = Math.abs(num);
       intnum = Math.floor(absnum).toFixed(0);
@@ -56,6 +54,8 @@
         ret += strabsnum.slice(intnum.length);
       }
       return ret;
+    } else {
+      return '-';
     }
   };
 
@@ -68,14 +68,18 @@
     __extends(Grid, _super);
 
     function Grid(options) {
+      var _this = this;
       if (typeof options.element === 'string') {
         this.el = $(document.getElementById(options.element));
       } else {
         this.el = $(options.element);
       }
-      if (this.el === null || this.el.length === 0) {
+      if (!(this.el != null) || this.el.length === 0) {
         throw new Error("Graph container element not found");
       }
+      if (this.el.css('position') === 'static') {
+        this.el.css('position', 'relative');
+      }
       this.options = $.extend({}, this.gridDefaults, this.defaults || {}, options);
       if (this.options.data === void 0 || this.options.data.length === 0) {
         return;
@@ -83,7 +87,7 @@
       if (typeof this.options.units === 'string') {
         this.options.postUnits = options.units;
       }
-      this.r = new Raphael(this.el[0]);
+      this.raphael = new Raphael(this.el[0]);
       this.elementWidth = null;
       this.elementHeight = null;
       this.dirty = false;
@@ -91,81 +95,119 @@
         this.init();
       }
       this.setData(this.options.data);
+      this.el.bind('mousemove', function(evt) {
+        var offset;
+        offset = _this.el.offset();
+        return _this.fire('hovermove', evt.pageX - offset.left, evt.pageY - offset.top);
+      });
+      this.el.bind('mouseout', function(evt) {
+        return _this.fire('hoverout');
+      });
+      this.el.bind('touchstart touchmove touchend', function(evt) {
+        var offset, touch;
+        touch = evt.originalEvent.touches[0] || evt.originalEvent.changedTouches[0];
+        offset = _this.el.offset();
+        _this.fire('hover', touch.pageX - offset.left, touch.pageY - offset.top);
+        return touch;
+      });
+      if (this.postInit) {
+        this.postInit();
+      }
     }
 
     Grid.prototype.gridDefaults = {
       dateFormat: null,
+      axes: true,
+      grid: true,
       gridLineColor: '#aaa',
       gridStrokeWidth: 0.5,
       gridTextColor: '#888',
       gridTextSize: 12,
+      hideHover: false,
+      yLabelFormat: null,
       numLines: 5,
       padding: 25,
       parseTime: true,
       postUnits: '',
       preUnits: '',
       ymax: 'auto',
-      ymin: 'auto 0'
+      ymin: 'auto 0',
+      goals: [],
+      goalStrokeWidth: 1.0,
+      goalLineColors: ['#666633', '#999966', '#cc6666', '#663333'],
+      events: [],
+      eventStrokeWidth: 1.0,
+      eventLineColors: ['#005a04', '#ccffbb', '#3a5f0b', '#005502']
     };
 
     Grid.prototype.setData = function(data, redraw) {
-      var ymax, ymin,
-        _this = this;
+      var e, idx, index, maxGoal, minGoal, ret, row, total, ykey, ymax, ymin, yval;
       if (redraw == null) {
         redraw = true;
       }
       ymax = this.cumulative ? 0 : null;
       ymin = this.cumulative ? 0 : null;
-      this.data = $.map(data, function(row, index) {
-        var idx, ret, total, ykey, yval;
-        ret = {};
-        ret.label = row[_this.options.xkey];
-        if (_this.options.parseTime) {
-          ret.x = Morris.parseDate(ret.label);
-          if (_this.options.dateFormat) {
-            ret.label = _this.options.dateFormat(ret.x);
-          } else if (typeof ret.label === 'number') {
-            ret.label = new Date(ret.label).toString();
-          }
-        } else {
-          ret.x = index;
-        }
-        total = 0;
-        ret.y = (function() {
-          var _i, _len, _ref, _results;
-          _ref = this.options.ykeys;
-          _results = [];
-          for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
-            ykey = _ref[idx];
-            yval = row[ykey];
-            if (typeof yval === 'string') {
-              yval = parseFloat(yval);
-            }
-            if (typeof yval !== 'number') {
-              yval = null;
+      if (this.options.goals.length > 0) {
+        minGoal = Math.min.apply(null, this.options.goals);
+        maxGoal = Math.max.apply(null, this.options.goals);
+        ymin = ymin != null ? Math.min(ymin, minGoal) : minGoal;
+        ymax = ymax != null ? Math.max(ymax, maxGoal) : maxGoal;
+      }
+      this.data = (function() {
+        var _i, _len, _results;
+        _results = [];
+        for (index = _i = 0, _len = data.length; _i < _len; index = ++_i) {
+          row = data[index];
+          ret = {};
+          ret.label = row[this.options.xkey];
+          if (this.options.parseTime) {
+            ret.x = Morris.parseDate(ret.label);
+            if (this.options.dateFormat) {
+              ret.label = this.options.dateFormat(ret.x);
+            } else if (typeof ret.label === 'number') {
+              ret.label = new Date(ret.label).toString();
             }
-            if (yval !== null) {
-              if (this.cumulative) {
-                total += yval;
-              } else {
-                if (ymax === null) {
-                  ymax = ymin = yval;
+          } else {
+            ret.x = index;
+          }
+          total = 0;
+          ret.y = (function() {
+            var _j, _len1, _ref, _results1;
+            _ref = this.options.ykeys;
+            _results1 = [];
+            for (idx = _j = 0, _len1 = _ref.length; _j < _len1; idx = ++_j) {
+              ykey = _ref[idx];
+              yval = row[ykey];
+              if (typeof yval === 'string') {
+                yval = parseFloat(yval);
+              }
+              if ((yval != null) && typeof yval !== 'number') {
+                yval = null;
+              }
+              if (yval != null) {
+                if (this.cumulative) {
+                  total += yval;
                 } else {
-                  ymax = Math.max(yval, ymax);
-                  ymin = Math.min(yval, ymin);
+                  if (ymax != null) {
+                    ymax = Math.max(yval, ymax);
+                    ymin = Math.min(yval, ymin);
+                  } else {
+                    ymax = ymin = yval;
+                  }
                 }
               }
+              if (this.cumulative && (total != null)) {
+                ymax = Math.max(total, ymax);
+                ymin = Math.min(total, ymin);
+              }
+              _results1.push(yval);
             }
-            if (this.cumulative && total !== null) {
-              ymax = Math.max(total, ymax);
-              ymin = Math.min(total, ymin);
-            }
-            _results.push(yval);
-          }
-          return _results;
-        }).call(_this);
-        return ret;
-      });
+            return _results1;
+          }).call(this);
+          _results.push(ret);
+        }
+        return _results;
+      }).call(this);
       if (this.options.parseTime) {
         this.data = this.data.sort(function(a, b) {
           return (a.x > b.x) - (b.x > a.x);
@@ -173,42 +215,27 @@
       }
       this.xmin = this.data[0].x;
       this.xmax = this.data[this.data.length - 1].x;
+      this.events = [];
+      if (this.options.parseTime && this.options.events.length > 0) {
+        this.events = (function() {
+          var _i, _len, _ref, _results;
+          _ref = this.options.events;
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            e = _ref[_i];
+            _results.push(Morris.parseDate(e));
+          }
+          return _results;
+        }).call(this);
+        this.xmax = Math.max(this.xmax, Math.max.apply(null, this.events));
+        this.xmin = Math.min(this.xmin, Math.min.apply(null, this.events));
+      }
       if (this.xmin === this.xmax) {
         this.xmin -= 1;
         this.xmax += 1;
       }
-      if (typeof this.options.ymax === 'string') {
-        if (this.options.ymax.slice(0, 4) === 'auto') {
-          if (this.options.ymax.length > 5) {
-            this.ymax = parseInt(this.options.ymax.slice(5), 10);
-            if (ymax !== null) {
-              this.ymax = Math.max(ymax, this.ymax);
-            }
-          } else {
-            this.ymax = ymax !== null ? ymax : 0;
-          }
-        } else {
-          this.ymax = parseInt(this.options.ymax, 10);
-        }
-      } else {
-        this.ymax = this.options.ymax;
-      }
-      if (typeof this.options.ymin === 'string') {
-        if (this.options.ymin.slice(0, 4) === 'auto') {
-          if (this.options.ymin.length > 5) {
-            this.ymin = parseInt(this.options.ymin.slice(5), 10);
-            if (ymin !== null) {
-              this.ymin = Math.min(ymin, this.ymin);
-            }
-          } else {
-            this.ymin = ymin !== null ? ymin : 0;
-          }
-        } else {
-          this.ymin = parseInt(this.options.ymin, 10);
-        }
-      } else {
-        this.ymin = this.options.ymin;
-      }
+      this.ymin = this.yboundary('min', ymin);
+      this.ymax = this.yboundary('max', ymax);
       if (this.ymin === this.ymax) {
         if (ymin) {
           this.ymin -= 1;
@@ -227,6 +254,32 @@
       }
     };
 
+    Grid.prototype.yboundary = function(boundaryType, currentValue) {
+      var boundaryOption, suggestedValue;
+      boundaryOption = this.options["y" + boundaryType];
+      if (typeof boundaryOption === 'string') {
+        if (boundaryOption.slice(0, 4) === 'auto') {
+          if (boundaryOption.length > 5) {
+            suggestedValue = parseInt(boundaryOption.slice(5), 10);
+            if (currentValue == null) {
+              return suggestedValue;
+            }
+            return Math[boundaryType](currentValue, suggestedValue);
+          } else {
+            if (currentValue != null) {
+              return currentValue;
+            } else {
+              return 0;
+            }
+          }
+        } else {
+          return parseInt(boundaryOption, 10);
+        }
+      } else {
+        return boundaryOption;
+      }
+    };
+
     Grid.prototype._calc = function() {
       var h, maxYLabelWidth, w;
       w = this.el.width();
@@ -235,11 +288,15 @@
         this.elementWidth = w;
         this.elementHeight = h;
         this.dirty = false;
-        maxYLabelWidth = Math.max(this.measureText(this.yAxisFormat(this.ymin), this.options.gridTextSize).width, this.measureText(this.yAxisFormat(this.ymax), this.options.gridTextSize).width);
-        this.left = maxYLabelWidth + this.options.padding;
+        this.left = this.options.padding;
         this.right = this.elementWidth - this.options.padding;
         this.top = this.options.padding;
-        this.bottom = this.elementHeight - this.options.padding - 1.5 * this.options.gridTextSize;
+        this.bottom = this.elementHeight - this.options.padding;
+        if (this.options.axes) {
+          maxYLabelWidth = Math.max(this.measureText(this.yAxisFormat(this.ymin), this.options.gridTextSize).width, this.measureText(this.yAxisFormat(this.ymax), this.options.gridTextSize).width);
+          this.left += maxYLabelWidth;
+          this.bottom -= 1.5 * this.options.gridTextSize;
+        }
         this.width = this.right - this.left;
         this.height = this.bottom - this.top;
         this.dx = this.width / (this.xmax - this.xmin);
@@ -263,24 +320,57 @@
     };
 
     Grid.prototype.redraw = function() {
-      this.r.clear();
+      this.raphael.clear();
       this._calc();
       this.drawGrid();
+      this.drawGoals();
+      this.drawEvents();
       if (this.draw) {
         return this.draw();
       }
     };
 
+    Grid.prototype.drawGoals = function() {
+      var goal, i, _i, _len, _ref, _results;
+      _ref = this.options.goals;
+      _results = [];
+      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
+        goal = _ref[i];
+        _results.push(this.drawGoal("M" + this.left + "," + (this.transY(goal)) + "H" + (this.left + this.width)));
+      }
+      return _results;
+    };
+
+    Grid.prototype.drawEvents = function() {
+      var event, i, _i, _len, _ref, _results;
+      _ref = this.events;
+      _results = [];
+      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
+        event = _ref[i];
+        _results.push(this.drawEvent("M" + (this.transX(event)) + "," + this.bottom + "V" + this.top));
+      }
+      return _results;
+    };
+
     Grid.prototype.drawGrid = function() {
       var firstY, lastY, lineY, v, y, _i, _ref, _results;
+      if (this.options.grid === false && this.options.axes === false) {
+        return;
+      }
       firstY = this.ymin;
       lastY = this.ymax;
       _results = [];
       for (lineY = _i = firstY, _ref = this.yInterval; firstY <= lastY ? _i <= lastY : _i >= lastY; lineY = _i += _ref) {
         v = parseFloat(lineY.toFixed(this.precision));
         y = this.transY(v);
-        this.r.text(this.left - this.options.padding / 2, y, this.yAxisFormat(v)).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end');
-        _results.push(this.r.path("M" + this.left + "," + y + "H" + (this.left + this.width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth));
+        if (this.options.axes) {
+          this.drawYAxisLabel(this.left - this.options.padding / 2, y, this.yAxisFormat(v));
+        }
+        if (this.options.grid) {
+          _results.push(this.drawGridLine("M" + this.left + "," + y + "H" + (this.left + this.width)));
+        } else {
+          _results.push(void 0);
+        }
       }
       return _results;
     };
@@ -290,7 +380,7 @@
       if (fontSize == null) {
         fontSize = 12;
       }
-      tt = this.r.text(100, 100, text).attr('font-size', fontSize);
+      tt = this.raphael.text(100, 100, text).attr('font-size', fontSize);
       ret = tt.getBBox();
       tt.remove();
       return ret;
@@ -301,7 +391,35 @@
     };
 
     Grid.prototype.yLabelFormat = function(label) {
-      return "" + this.options.preUnits + (Morris.commas(label)) + this.options.postUnits;
+      if (typeof this.options.yLabelFormat === 'function') {
+        return this.options.yLabelFormat(label);
+      } else {
+        return "" + this.options.preUnits + (Morris.commas(label)) + this.options.postUnits;
+      }
+    };
+
+    Grid.prototype.updateHover = function(x, y) {
+      var hit, _ref;
+      hit = this.hitTest(x, y);
+      if (hit != null) {
+        return (_ref = this.hover).update.apply(_ref, hit);
+      }
+    };
+
+    Grid.prototype.drawGoal = function(path) {
+      return this.raphael.path(path).attr('stroke', this.options.goalLineColors[i % this.options.goalLineColors.length]).attr('stroke-width', this.options.goalStrokeWidth);
+    };
+
+    Grid.prototype.drawEvent = function(path) {
+      return this.raphael.path(path).attr('stroke', this.options.eventLineColors[i % this.options.eventLineColors.length]).attr('stroke-width', this.options.eventStrokeWidth);
+    };
+
+    Grid.prototype.drawYAxisLabel = function(xPos, yPos, text) {
+      return this.raphael.text(xPos, yPos, text).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end');
+    };
+
+    Grid.prototype.drawGridLine = function(path) {
+      return this.raphael.path(path).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth);
     };
 
     return Grid;
@@ -365,16 +483,78 @@
     }
   };
 
+  Morris.Hover = (function() {
+
+    Hover.defaults = {
+      "class": 'morris-hover morris-default-style'
+    };
+
+    function Hover(options) {
+      if (options == null) {
+        options = {};
+      }
+      this.options = $.extend({}, Morris.Hover.defaults, options);
+      this.el = $("<div class='" + this.options["class"] + "'></div>");
+      this.el.hide();
+      this.options.parent.append(this.el);
+    }
+
+    Hover.prototype.update = function(html, x, y) {
+      this.html(html);
+      this.show();
+      return this.moveTo(x, y);
+    };
+
+    Hover.prototype.html = function(content) {
+      return this.el.html(content);
+    };
+
+    Hover.prototype.moveTo = function(x, y) {
+      var hoverHeight, hoverWidth, left, parentHeight, parentWidth, top;
+      parentWidth = this.options.parent.innerWidth();
+      parentHeight = this.options.parent.innerHeight();
+      hoverWidth = this.el.outerWidth();
+      hoverHeight = this.el.outerHeight();
+      left = Math.min(Math.max(0, x - hoverWidth / 2), parentWidth - hoverWidth);
+      if (y != null) {
+        top = y - hoverHeight - 10;
+        if (top < 0) {
+          top = y + 10;
+          if (top + hoverHeight > parentHeight) {
+            top = parentHeight / 2 - hoverHeight / 2;
+          }
+        }
+      } else {
+        top = parentHeight / 2 - hoverHeight / 2;
+      }
+      return this.el.css({
+        left: left + "px",
+        top: top + "px"
+      });
+    };
+
+    Hover.prototype.show = function() {
+      return this.el.show();
+    };
+
+    Hover.prototype.hide = function() {
+      return this.el.hide();
+    };
+
+    return Hover;
+
+  })();
+
   Morris.Line = (function(_super) {
 
     __extends(Line, _super);
 
     function Line(options) {
-      this.updateHilight = __bind(this.updateHilight, this);
-
       this.hilight = __bind(this.hilight, this);
 
-      this.updateHover = __bind(this.updateHover, this);
+      this.onHoverOut = __bind(this.onHoverOut, this);
+
+      this.onHoverMove = __bind(this.onHoverMove, this);
       if (!(this instanceof Morris.Line)) {
         return new Morris.Line(options);
       }
@@ -382,32 +562,19 @@
     }
 
     Line.prototype.init = function() {
-      var touchHandler,
-        _this = this;
       this.pointGrow = Raphael.animation({
         r: this.options.pointSize + 3
       }, 25, 'linear');
       this.pointShrink = Raphael.animation({
         r: this.options.pointSize
       }, 25, 'linear');
-      this.prevHilight = null;
-      this.el.mousemove(function(evt) {
-        return _this.updateHilight(evt.pageX);
-      });
-      if (this.options.hideHover) {
-        this.el.mouseout(function(evt) {
-          return _this.hilight(null);
+      if (this.options.hideHover !== 'always') {
+        this.hover = new Morris.Hover({
+          parent: this.el
         });
+        this.on('hovermove', this.onHoverMove);
+        return this.on('hoverout', this.onHoverOut);
       }
-      touchHandler = function(evt) {
-        var touch;
-        touch = evt.originalEvent.touches[0] || evt.originalEvent.changedTouches[0];
-        _this.updateHilight(touch.pageX);
-        return touch;
-      };
-      this.el.bind('touchstart', touchHandler);
-      this.el.bind('touchmove', touchHandler);
-      return this.el.bind('touchend', touchHandler);
     };
 
     Line.prototype.defaults = {
@@ -417,25 +584,17 @@
       pointWidths: [1],
       pointStrokeColors: ['#ffffff'],
       pointFillColors: [],
-      hoverPaddingX: 10,
-      hoverPaddingY: 5,
-      hoverMargin: 10,
-      hoverFillColor: '#fff',
-      hoverBorderColor: '#ccc',
-      hoverBorderWidth: 2,
-      hoverOpacity: 0.95,
-      hoverLabelColor: '#444',
-      hoverFontSize: 12,
       smooth: true,
-      hideHover: false,
       xLabels: 'auto',
-      xLabelFormat: null
+      xLabelFormat: null,
+      xLabelMargin: 50,
+      continuousLine: true,
+      hideHover: false
     };
 
     Line.prototype.calc = function() {
       this.calcPoints();
-      this.generatePaths();
-      return this.calcHoverMargins();
+      return this.generatePaths();
     };
 
     Line.prototype.calcPoints = function() {
@@ -445,33 +604,89 @@
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
         row = _ref[_i];
         row._x = this.transX(row.x);
-        _results.push(row._y = (function() {
+        row._y = (function() {
           var _j, _len1, _ref1, _results1;
           _ref1 = row.y;
           _results1 = [];
           for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
             y = _ref1[_j];
-            if (y === null) {
-              _results1.push(null);
-            } else {
+            if (y != null) {
               _results1.push(this.transY(y));
+            } else {
+              _results1.push(y);
             }
           }
           return _results1;
-        }).call(this));
+        }).call(this);
+        _results.push(row._ymax = Math.min.apply(null, [this.bottom].concat((function() {
+          var _j, _len1, _ref1, _results1;
+          _ref1 = row._y;
+          _results1 = [];
+          for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
+            y = _ref1[_j];
+            if (y != null) {
+              _results1.push(y);
+            }
+          }
+          return _results1;
+        })())));
       }
       return _results;
     };
 
-    Line.prototype.calcHoverMargins = function() {
-      var _this = this;
-      return this.hoverMargins = $.map(this.data.slice(1), function(r, i) {
-        return (r._x + _this.data[i]._x) / 2;
-      });
+    Line.prototype.hitTest = function(x, y) {
+      var index, r, _i, _len, _ref;
+      _ref = this.data.slice(1);
+      for (index = _i = 0, _len = _ref.length; _i < _len; index = ++_i) {
+        r = _ref[index];
+        if (x < (r._x + this.data[index]._x) / 2) {
+          break;
+        }
+      }
+      return index;
+    };
+
+    Line.prototype.onHoverMove = function(x, y) {
+      var index;
+      index = this.hitTest(x, y);
+      return this.displayHoverForRow(index);
+    };
+
+    Line.prototype.onHoverOut = function() {
+      if (this.options.hideHover === 'auto') {
+        return this.displayHoverForRow(null);
+      }
+    };
+
+    Line.prototype.displayHoverForRow = function(index) {
+      var _ref;
+      if (index != null) {
+        (_ref = this.hover).update.apply(_ref, this.hoverContentForRow(index));
+        return this.hilight(index);
+      } else {
+        this.hover.hide();
+        return this.hilight();
+      }
+    };
+
+    Line.prototype.hoverContentForRow = function(index) {
+      var content, j, row, y, _i, _len, _ref;
+      row = this.data[index];
+      if (typeof this.options.hoverCallback === 'function') {
+        content = this.options.hoverCallback(index, this.options);
+      } else {
+        content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
+        _ref = row.y;
+        for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
+          y = _ref[j];
+          content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n  " + this.options.labels[j] + ":\n  " + (this.yLabelFormat(y)) + "\n</div>";
+        }
+      }
+      return [content, row._x, row._ymax];
     };
 
     Line.prototype.generatePaths = function() {
-      var coords, i, r, smooth;
+      var c, coords, i, r, smooth;
       return this.paths = (function() {
         var _i, _ref, _ref1, _results;
         _results = [];
@@ -483,7 +698,7 @@
             _results1 = [];
             for (_j = 0, _len = _ref2.length; _j < _len; _j++) {
               r = _ref2[_j];
-              if (r._y[i] !== null) {
+              if (r._y[i] !== void 0) {
                 _results1.push({
                   x: r._x,
                   y: r._y[i]
@@ -492,8 +707,21 @@
             }
             return _results1;
           }).call(this);
+          if (this.options.continuousLine) {
+            coords = (function() {
+              var _j, _len, _results1;
+              _results1 = [];
+              for (_j = 0, _len = coords.length; _j < _len; _j++) {
+                c = coords[_j];
+                if (c.y !== null) {
+                  _results1.push(c);
+                }
+              }
+              return _results1;
+            })();
+          }
           if (coords.length > 1) {
-            _results.push(this.createPath(coords, smooth));
+            _results.push(Morris.Line.createPath(coords, smooth, this.bottom));
           } else {
             _results.push(null);
           }
@@ -503,24 +731,26 @@
     };
 
     Line.prototype.draw = function() {
-      this.drawXAxis();
+      if (this.options.axes) {
+        this.drawXAxis();
+      }
       this.drawSeries();
-      this.drawHover();
-      return this.hilight(this.options.hideHover ? null : this.data.length - 1);
+      if (this.options.hideHover === false) {
+        return this.displayHoverForRow(this.data.length - 1);
+      }
     };
 
     Line.prototype.drawXAxis = function() {
-      var drawLabel, l, labels, prevLabelMargin, row, xLabelMargin, ypos, _i, _len, _results,
+      var drawLabel, l, labels, prevLabelMargin, row, ypos, _i, _len, _results,
         _this = this;
       ypos = this.bottom + this.options.gridTextSize * 1.25;
-      xLabelMargin = 50;
       prevLabelMargin = null;
       drawLabel = function(labelText, xpos) {
         var label, labelBox;
-        label = _this.r.text(_this.transX(xpos), ypos, labelText).attr('font-size', _this.options.gridTextSize).attr('fill', _this.options.gridTextColor);
+        label = _this.drawXAxisLabel(_this.transX(xpos), ypos, labelText);
         labelBox = label.getBBox();
-        if ((prevLabelMargin === null || prevLabelMargin >= labelBox.x + labelBox.width) && labelBox.x >= 0 && (labelBox.x + labelBox.width) < _this.el.width()) {
-          return prevLabelMargin = labelBox.x - xLabelMargin;
+        if ((!(prevLabelMargin != null) || prevLabelMargin >= labelBox.x + labelBox.width) && labelBox.x >= 0 && (labelBox.x + labelBox.width) < _this.el.width()) {
+          return prevLabelMargin = labelBox.x - _this.options.xLabelMargin;
         } else {
           return label.remove();
         }
@@ -557,7 +787,7 @@
       for (i = _i = _ref = this.options.ykeys.length - 1; _ref <= 0 ? _i <= 0 : _i >= 0; i = _ref <= 0 ? ++_i : --_i) {
         path = this.paths[i];
         if (path !== null) {
-          this.r.path(path).attr('stroke', this.colorForSeries(i)).attr('stroke-width', this.options.lineWidth);
+          this.drawLinePath(path, this.colorFor(row, i, 'line'));
         }
       }
       this.seriesPoints = (function() {
@@ -576,10 +806,10 @@
           _results1 = [];
           for (_k = 0, _len = _ref2.length; _k < _len; _k++) {
             row = _ref2[_k];
-            if (row._y[i] === null) {
-              circle = null;
+            if (row._y[i] != null) {
+              circle = this.drawLinePoint(row._x, row._y[i], this.options.pointSize, this.colorFor(row, i, 'point'), i);
             } else {
-              circle = this.r.circle(row._x, row._y[i], this.options.pointSize).attr('fill', this.pointFillColorForSeries(i) || this.colorForSeries(i)).attr('stroke-width', this.strokeWidthForSeries(i)).attr('stroke', this.strokeForSeries(i));
+              circle = null;
             }
             _results1.push(this.seriesPoints[i].push(circle));
           }
@@ -589,108 +819,71 @@
       return _results;
     };
 
-    Line.prototype.createPath = function(coords, smooth) {
-      var c, g, grads, i, ix, lc, lg, path, x1, x2, y1, y2, _i, _ref;
+    Line.createPath = function(coords, smooth, bottom) {
+      var coord, g, grads, i, ix, lg, path, prevCoord, x1, x2, y1, y2, _i, _len;
       path = "";
       if (smooth) {
-        grads = this.gradients(coords);
-        for (i = _i = 0, _ref = coords.length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
-          c = coords[i];
-          if (i === 0) {
-            path += "M" + c.x + "," + c.y;
+        grads = Morris.Line.gradients(coords);
+      }
+      prevCoord = {
+        y: null
+      };
+      for (i = _i = 0, _len = coords.length; _i < _len; i = ++_i) {
+        coord = coords[i];
+        if (coord.y != null) {
+          if (prevCoord.y != null) {
+            if (smooth) {
+              g = grads[i];
+              lg = grads[i - 1];
+              ix = (coord.x - prevCoord.x) / 4;
+              x1 = prevCoord.x + ix;
+              y1 = Math.min(bottom, prevCoord.y + ix * lg);
+              x2 = coord.x - ix;
+              y2 = Math.min(bottom, coord.y - ix * g);
+              path += "C" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + coord.x + "," + coord.y;
+            } else {
+              path += "L" + coord.x + "," + coord.y;
+            }
           } else {
-            g = grads[i];
-            lc = coords[i - 1];
-            lg = grads[i - 1];
-            ix = (c.x - lc.x) / 4;
-            x1 = lc.x + ix;
-            y1 = Math.min(this.bottom, lc.y + ix * lg);
-            x2 = c.x - ix;
-            y2 = Math.min(this.bottom, c.y - ix * g);
-            path += "C" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + c.x + "," + c.y;
+            if (!smooth || (grads[i] != null)) {
+              path += "M" + coord.x + "," + coord.y;
+            }
           }
         }
-      } else {
-        path = "M" + $.map(coords, function(c) {
-          return "" + c.x + "," + c.y;
-        }).join("L");
+        prevCoord = coord;
       }
       return path;
     };
 
-    Line.prototype.gradients = function(coords) {
-      return $.map(coords, function(c, i) {
-        if (i === 0) {
-          return (coords[1].y - c.y) / (coords[1].x - c.x);
-        } else if (i === (coords.length - 1)) {
-          return (c.y - coords[i - 1].y) / (c.x - coords[i - 1].x);
-        } else {
-          return (coords[i + 1].y - coords[i - 1].y) / (coords[i + 1].x - coords[i - 1].x);
-        }
-      });
-    };
-
-    Line.prototype.drawHover = function() {
-      var i, idx, yLabel, _i, _ref, _results;
-      this.hoverHeight = this.options.hoverFontSize * 1.5 * (this.options.ykeys.length + 1);
-      this.hover = this.r.rect(-10, -this.hoverHeight / 2 - this.options.hoverPaddingY, 20, this.hoverHeight + this.options.hoverPaddingY * 2, 10).attr('fill', this.options.hoverFillColor).attr('stroke', this.options.hoverBorderColor).attr('stroke-width', this.options.hoverBorderWidth).attr('opacity', this.options.hoverOpacity);
-      this.xLabel = this.r.text(0, (this.options.hoverFontSize * 0.75) - this.hoverHeight / 2, '').attr('fill', this.options.hoverLabelColor).attr('font-weight', 'bold').attr('font-size', this.options.hoverFontSize);
-      this.hoverSet = this.r.set();
-      this.hoverSet.push(this.hover);
-      this.hoverSet.push(this.xLabel);
-      this.yLabels = [];
+    Line.gradients = function(coords) {
+      var coord, grad, i, nextCoord, prevCoord, _i, _len, _results;
+      grad = function(a, b) {
+        return (a.y - b.y) / (a.x - b.x);
+      };
       _results = [];
-      for (i = _i = 0, _ref = this.options.ykeys.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
-        idx = this.cumulative ? this.options.ykeys.length - i - 1 : i;
-        yLabel = this.r.text(0, this.options.hoverFontSize * 1.5 * (idx + 1.5) - this.hoverHeight / 2, '').attr('fill', this.colorForSeries(i)).attr('font-size', this.options.hoverFontSize);
-        this.yLabels.push(yLabel);
-        _results.push(this.hoverSet.push(yLabel));
-      }
-      return _results;
-    };
-
-    Line.prototype.updateHover = function(index) {
-      var i, maxLabelWidth, row, xloc, y, yloc, _i, _len, _ref;
-      this.hoverSet.show();
-      row = this.data[index];
-      this.xLabel.attr('text', row.label);
-      _ref = row.y;
-      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
-        y = _ref[i];
-        this.yLabels[i].attr('text', "" + this.options.labels[i] + ": " + (this.yLabelFormat(y)));
-      }
-      maxLabelWidth = Math.max.apply(null, $.map(this.yLabels, function(l) {
-        return l.getBBox().width;
-      }));
-      maxLabelWidth = Math.max(maxLabelWidth, this.xLabel.getBBox().width);
-      this.hover.attr('width', maxLabelWidth + this.options.hoverPaddingX * 2);
-      this.hover.attr('x', -this.options.hoverPaddingX - maxLabelWidth / 2);
-      yloc = Math.min.apply(null, ((function() {
-        var _j, _len1, _ref1, _results;
-        _ref1 = row._y;
-        _results = [];
-        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-          y = _ref1[_j];
-          if (y !== null) {
-            _results.push(y);
+      for (i = _i = 0, _len = coords.length; _i < _len; i = ++_i) {
+        coord = coords[i];
+        if (coord.y != null) {
+          nextCoord = coords[i + 1] || {
+            y: null
+          };
+          prevCoord = coords[i - 1] || {
+            y: null
+          };
+          if ((prevCoord.y != null) && (nextCoord.y != null)) {
+            _results.push(grad(prevCoord, nextCoord));
+          } else if (prevCoord.y != null) {
+            _results.push(grad(prevCoord, coord));
+          } else if (nextCoord.y != null) {
+            _results.push(grad(coord, nextCoord));
+          } else {
+            _results.push(null);
           }
+        } else {
+          _results.push(null);
         }
-        return _results;
-      })()).concat(this.bottom));
-      if (yloc > this.hoverHeight + this.options.hoverPaddingY * 2 + this.options.hoverMargin + this.top) {
-        yloc = yloc - this.hoverHeight / 2 - this.options.hoverPaddingY - this.options.hoverMargin;
-      } else {
-        yloc = yloc + this.hoverHeight / 2 + this.options.hoverPaddingY + this.options.hoverMargin;
       }
-      yloc = Math.max(this.top + this.hoverHeight / 2 + this.options.hoverPaddingY, yloc);
-      yloc = Math.min(this.bottom - this.hoverHeight / 2 - this.options.hoverPaddingY, yloc);
-      xloc = Math.min(this.right - maxLabelWidth / 2 - this.options.hoverPaddingX, this.data[index]._x);
-      xloc = Math.max(this.left + maxLabelWidth / 2 + this.options.hoverPaddingX, xloc);
-      return this.hoverSet.attr('transform', "t" + xloc + "," + yloc);
-    };
-
-    Line.prototype.hideHover = function() {
-      return this.hoverSet.hide();
+      return _results;
     };
 
     Line.prototype.hilight = function(index) {
@@ -708,27 +901,30 @@
             this.seriesPoints[i][index].animate(this.pointGrow);
           }
         }
-        this.updateHover(index);
-      }
-      this.prevHilight = index;
-      if (index === null) {
-        return this.hideHover();
       }
+      return this.prevHilight = index;
     };
 
-    Line.prototype.updateHilight = function(x) {
-      var hoverIndex, _i, _ref;
-      x -= this.el.offset().left;
-      for (hoverIndex = _i = 0, _ref = this.hoverMargins.length; 0 <= _ref ? _i < _ref : _i > _ref; hoverIndex = 0 <= _ref ? ++_i : --_i) {
-        if (this.hoverMargins[hoverIndex] > x) {
-          break;
-        }
+    Line.prototype.colorFor = function(row, sidx, type) {
+      if (typeof this.options.lineColors === 'function') {
+        return this.options.lineColors.call(this, row, sidx, type);
+      } else if (type === 'point') {
+        return this.options.pointFillColors[sidx % this.options.pointFillColors.length] || this.options.lineColors[sidx % this.options.lineColors.length];
+      } else {
+        return this.options.lineColors[sidx % this.options.lineColors.length];
       }
-      return this.hilight(hoverIndex);
     };
 
-    Line.prototype.colorForSeries = function(index) {
-      return this.options.lineColors[index % this.options.lineColors.length];
+    Line.prototype.drawXAxisLabel = function(xPos, yPos, text) {
+      return this.raphael.text(xPos, yPos, text).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor);
+    };
+
+    Line.prototype.drawLinePath = function(path, lineColor) {
+      return this.raphael.path(path).attr('stroke', lineColor).attr('stroke-width', this.options.lineWidth);
+    };
+
+    Line.prototype.drawLinePoint = function(xPos, yPos, size, pointColor, lineIndex) {
+      return this.raphael.circle(xPos, yPos, size).attr('fill', pointColor).attr('stroke-width', this.strokeWidthForSeries(lineIndex)).attr('stroke', this.strokeForSeries(lineIndex));
     };
 
     Line.prototype.strokeWidthForSeries = function(index) {
@@ -739,10 +935,6 @@
       return this.options.pointStrokeColors[index % this.options.pointStrokeColors.length];
     };
 
-    Line.prototype.pointFillColorForSeries = function(index) {
-      return this.options.pointFillColors[index % this.options.pointFillColors.length];
-    };
-
     return Line;
 
   })(Morris.Grid);
@@ -813,6 +1005,18 @@
   };
 
   Morris.LABEL_SPECS = {
+    "decade": {
+      span: 172800000000,
+      start: function(d) {
+        return new Date(d.getFullYear() - d.getFullYear() % 10, 0, 1);
+      },
+      fmt: function(d) {
+        return "" + (d.getFullYear());
+      },
+      incr: function(d) {
+        return d.setFullYear(d.getFullYear() + 10);
+      }
+    },
     "year": {
       span: 17280000000,
       start: function(d) {
@@ -862,7 +1066,7 @@
     "second": secondsSpecHelper(1)
   };
 
-  Morris.AUTO_LABEL_ORDER = ["year", "month", "day", "hour", "30min", "15min", "10min", "5min", "minute", "30sec", "15sec", "10sec", "5sec", "second"];
+  Morris.AUTO_LABEL_ORDER = ["decade", "year", "month", "day", "hour", "30min", "15min", "10min", "5min", "minute", "30sec", "15sec", "10sec", "5sec", "second"];
 
   Morris.Area = (function(_super) {
 
@@ -884,7 +1088,7 @@
         row = _ref[_i];
         row._x = this.transX(row.x);
         total = 0;
-        _results.push(row._y = (function() {
+        row._y = (function() {
           var _j, _len1, _ref1, _results1;
           _ref1 = row.y;
           _results1 = [];
@@ -894,7 +1098,8 @@
             _results1.push(this.transY(total));
           }
           return _results1;
-        }).call(this));
+        }).call(this);
+        _results.push(row._ymax = row._y[row._y.length - 1]);
       }
       return _results;
     };
@@ -905,7 +1110,7 @@
         path = this.paths[i];
         if (path !== null) {
           path = path + ("L" + (this.transX(this.xmax)) + "," + this.bottom + "L" + (this.transX(this.xmin)) + "," + this.bottom + "Z");
-          this.r.path(path).attr('fill', this.fillForSeries(i)).attr('stroke-width', 0);
+          this.drawFilledPath(path, this.fillForSeries(i));
         }
       }
       return Area.__super__.drawSeries.call(this);
@@ -913,10 +1118,14 @@
 
     Area.prototype.fillForSeries = function(i) {
       var color;
-      color = Raphael.rgb2hsl(this.colorForSeries(i));
+      color = Raphael.rgb2hsl(this.colorFor(this.data[i], i, 'line'));
       return Raphael.hsl(color.h, Math.min(255, color.s * 0.75), Math.min(255, color.l * 1.25));
     };
 
+    Area.prototype.drawFilledPath = function(path, fill) {
+      return this.raphael.path(path).attr('fill', fill).attr('stroke-width', 0);
+    };
+
     return Area;
 
   })(Morris.Line);
@@ -926,11 +1135,9 @@
     __extends(Bar, _super);
 
     function Bar(options) {
-      this.updateHilight = __bind(this.updateHilight, this);
+      this.onHoverOut = __bind(this.onHoverOut, this);
 
-      this.hilight = __bind(this.hilight, this);
-
-      this.updateHover = __bind(this.updateHover, this);
+      this.onHoverMove = __bind(this.onHoverMove, this);
       if (!(this instanceof Morris.Bar)) {
         return new Morris.Bar(options);
       }
@@ -940,47 +1147,29 @@
     }
 
     Bar.prototype.init = function() {
-      var touchHandler,
-        _this = this;
-      this.prevHilight = null;
-      this.el.mousemove(function(evt) {
-        return _this.updateHilight(evt.pageX);
-      });
-      if (this.options.hideHover) {
-        this.el.mouseout(function(evt) {
-          return _this.hilight(null);
+      this.cumulative = this.options.stacked;
+      if (this.options.hideHover !== 'always') {
+        this.hover = new Morris.Hover({
+          parent: this.el
         });
+        this.on('hovermove', this.onHoverMove);
+        return this.on('hoverout', this.onHoverOut);
       }
-      touchHandler = function(evt) {
-        var touch;
-        touch = evt.originalEvent.touches[0] || evt.originalEvent.changedTouches[0];
-        _this.updateHilight(touch.pageX);
-        return touch;
-      };
-      this.el.bind('touchstart', touchHandler);
-      this.el.bind('touchmove', touchHandler);
-      return this.el.bind('touchend', touchHandler);
     };
 
     Bar.prototype.defaults = {
       barSizeRatio: 0.75,
       barGap: 3,
       barColors: ['#0b62a4', '#7a92a3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
-      hoverPaddingX: 10,
-      hoverPaddingY: 5,
-      hoverMargin: 10,
-      hoverFillColor: '#fff',
-      hoverBorderColor: '#ccc',
-      hoverBorderWidth: 2,
-      hoverOpacity: 0.95,
-      hoverLabelColor: '#444',
-      hoverFontSize: 12,
-      hideHover: false
+      xLabelMargin: 50
     };
 
     Bar.prototype.calc = function() {
+      var _ref;
       this.calcBars();
-      return this.calcHoverMargins();
+      if (this.options.hideHover === false) {
+        return (_ref = this.hover).update.apply(_ref, this.hoverContentForRow(this.data.length - 1));
+      }
     };
 
     Bar.prototype.calcBars = function() {
@@ -996,10 +1185,10 @@
           _results1 = [];
           for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
             y = _ref1[_j];
-            if (y === null) {
-              _results1.push(null);
-            } else {
+            if (y != null) {
               _results1.push(this.transY(y));
+            } else {
+              _results1.push(null);
             }
           }
           return _results1;
@@ -1008,37 +1197,24 @@
       return _results;
     };
 
-    Bar.prototype.calcHoverMargins = function() {
-      var i;
-      return this.hoverMargins = (function() {
-        var _i, _ref, _results;
-        _results = [];
-        for (i = _i = 1, _ref = this.data.length; 1 <= _ref ? _i < _ref : _i > _ref; i = 1 <= _ref ? ++_i : --_i) {
-          _results.push(this.left + i * this.width / this.data.length);
-        }
-        return _results;
-      }).call(this);
-    };
-
     Bar.prototype.draw = function() {
-      this.drawXAxis();
-      this.drawSeries();
-      this.drawHover();
-      return this.hilight(this.options.hideHover ? null : this.data.length - 1);
+      if (this.options.axes) {
+        this.drawXAxis();
+      }
+      return this.drawSeries();
     };
 
     Bar.prototype.drawXAxis = function() {
-      var i, label, labelBox, prevLabelMargin, row, xLabelMargin, ypos, _i, _ref, _results;
+      var i, label, labelBox, prevLabelMargin, row, ypos, _i, _ref, _results;
       ypos = this.bottom + this.options.gridTextSize * 1.25;
-      xLabelMargin = 50;
       prevLabelMargin = null;
       _results = [];
       for (i = _i = 0, _ref = this.data.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
         row = this.data[this.data.length - 1 - i];
-        label = this.r.text(row._x, ypos, row.label).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor);
+        label = this.drawXAxisLabel(row._x, ypos, row.label);
         labelBox = label.getBBox();
-        if ((prevLabelMargin === null || prevLabelMargin >= labelBox.x + labelBox.width) && labelBox.x >= 0 && (labelBox.x + labelBox.width) < this.el.width()) {
-          _results.push(prevLabelMargin = labelBox.x - xLabelMargin);
+        if ((!(prevLabelMargin != null) || prevLabelMargin >= labelBox.x + labelBox.width) && labelBox.x >= 0 && (labelBox.x + labelBox.width) < this.el.width()) {
+          _results.push(prevLabelMargin = labelBox.x - this.options.xLabelMargin);
         } else {
           _results.push(label.remove());
         }
@@ -1047,9 +1223,9 @@
     };
 
     Bar.prototype.drawSeries = function() {
-      var barWidth, bottom, groupWidth, idx, left, leftPadding, numBars, row, sidx, top, ypos, zeroPos;
+      var barWidth, bottom, groupWidth, idx, lastTop, left, leftPadding, numBars, row, sidx, size, top, ypos, zeroPos;
       groupWidth = this.width / this.options.data.length;
-      numBars = this.options.ykeys.length;
+      numBars = this.options.stacked != null ? 1 : this.options.ykeys.length;
       barWidth = (groupWidth * this.options.barSizeRatio - this.options.barGap * (numBars - 1)) / numBars;
       leftPadding = groupWidth * (1 - this.options.barSizeRatio) / 2;
       zeroPos = this.ymin <= 0 && this.ymax >= 0 ? this.transY(0) : null;
@@ -1059,6 +1235,7 @@
         _results = [];
         for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
           row = _ref[idx];
+          lastTop = 0;
           _results.push((function() {
             var _j, _len1, _ref1, _results1;
             _ref1 = row._y;
@@ -1073,8 +1250,16 @@
                   top = ypos;
                   bottom = this.bottom;
                 }
-                left = this.left + idx * groupWidth + leftPadding + sidx * (barWidth + this.options.barGap);
-                _results1.push(this.r.rect(left, top, barWidth, bottom - top).attr('fill', this.options.barColors[sidx % this.options.barColors.length]).attr('stroke-width', 0));
+                left = this.left + idx * groupWidth + leftPadding;
+                if (!this.options.stacked) {
+                  left += sidx * (barWidth + this.options.barGap);
+                }
+                size = bottom - top;
+                if (this.options.stacked) {
+                  top -= lastTop;
+                }
+                this.drawBar(left, top, barWidth, size, this.colorFor(row, sidx, 'bar'));
+                _results1.push(lastTop += size);
               } else {
                 _results1.push(null);
               }
@@ -1086,70 +1271,66 @@
       }).call(this);
     };
 
-    Bar.prototype.drawHover = function() {
-      var i, yLabel, _i, _ref, _results;
-      this.hoverHeight = this.options.hoverFontSize * 1.5 * (this.options.ykeys.length + 1);
-      this.hover = this.r.rect(-10, -this.hoverHeight / 2 - this.options.hoverPaddingY, 20, this.hoverHeight + this.options.hoverPaddingY * 2, 10).attr('fill', this.options.hoverFillColor).attr('stroke', this.options.hoverBorderColor).attr('stroke-width', this.options.hoverBorderWidth).attr('opacity', this.options.hoverOpacity);
-      this.xLabel = this.r.text(0, (this.options.hoverFontSize * 0.75) - this.hoverHeight / 2, '').attr('fill', this.options.hoverLabelColor).attr('font-weight', 'bold').attr('font-size', this.options.hoverFontSize);
-      this.hoverSet = this.r.set();
-      this.hoverSet.push(this.hover);
-      this.hoverSet.push(this.xLabel);
-      this.yLabels = [];
-      _results = [];
-      for (i = _i = 0, _ref = this.options.ykeys.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
-        yLabel = this.r.text(0, this.options.hoverFontSize * 1.5 * (i + 1.5) - this.hoverHeight / 2, '').attr('font-size', this.options.hoverFontSize);
-        this.yLabels.push(yLabel);
-        _results.push(this.hoverSet.push(yLabel));
+    Bar.prototype.colorFor = function(row, sidx, type) {
+      var r, s;
+      if (typeof this.options.barColors === 'function') {
+        r = {
+          x: row.x,
+          y: row.y[sidx],
+          label: row.label
+        };
+        s = {
+          index: sidx,
+          key: this.options.ykeys[sidx],
+          label: this.options.labels[sidx]
+        };
+        return this.options.barColors.call(this, r, s, type);
+      } else {
+        return this.options.barColors[sidx % this.options.barColors.length];
       }
-      return _results;
     };
 
-    Bar.prototype.updateHover = function(index) {
-      var i, maxLabelWidth, row, xloc, y, yloc, _i, _len, _ref;
-      this.hoverSet.show();
-      row = this.data[index];
-      this.xLabel.attr('text', row.label);
-      _ref = row.y;
-      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
-        y = _ref[i];
-        this.yLabels[i].attr('fill', this.options.barColors[i % this.options.barColors.length]);
-        this.yLabels[i].attr('text', "" + this.options.labels[i] + ": " + (this.yLabelFormat(y)));
-      }
-      maxLabelWidth = Math.max.apply(null, $.map(this.yLabels, function(l) {
-        return l.getBBox().width;
-      }));
-      maxLabelWidth = Math.max(maxLabelWidth, this.xLabel.getBBox().width);
-      this.hover.attr('width', maxLabelWidth + this.options.hoverPaddingX * 2);
-      this.hover.attr('x', -this.options.hoverPaddingX - maxLabelWidth / 2);
-      yloc = (this.bottom + this.top) / 2;
-      xloc = Math.min(this.right - maxLabelWidth / 2 - this.options.hoverPaddingX, this.data[index]._x);
-      xloc = Math.max(this.left + maxLabelWidth / 2 + this.options.hoverPaddingX, xloc);
-      return this.hoverSet.attr('transform', "t" + xloc + "," + yloc);
+    Bar.prototype.hitTest = function(x, y) {
+      x = Math.max(Math.min(x, this.right), this.left);
+      return Math.min(this.data.length - 1, Math.floor((x - this.left) / (this.width / this.data.length)));
     };
 
-    Bar.prototype.hideHover = function() {
-      return this.hoverSet.hide();
+    Bar.prototype.onHoverMove = function(x, y) {
+      var index, _ref;
+      index = this.hitTest(x, y);
+      return (_ref = this.hover).update.apply(_ref, this.hoverContentForRow(index));
     };
 
-    Bar.prototype.hilight = function(index) {
-      if (index !== null && this.prevHilight !== index) {
-        this.updateHover(index);
-      }
-      this.prevHilight = index;
-      if (index === null) {
-        return this.hideHover();
+    Bar.prototype.onHoverOut = function() {
+      if (this.options.hideHover === 'auto') {
+        return this.hover.hide();
       }
     };
 
-    Bar.prototype.updateHilight = function(x) {
-      var hoverIndex, _i, _ref;
-      x -= this.el.offset().left;
-      for (hoverIndex = _i = 0, _ref = this.hoverMargins.length; 0 <= _ref ? _i < _ref : _i > _ref; hoverIndex = 0 <= _ref ? ++_i : --_i) {
-        if (this.hoverMargins[hoverIndex] > x) {
-          break;
+    Bar.prototype.hoverContentForRow = function(index) {
+      var content, j, row, x, y, _i, _len, _ref;
+      if (typeof this.options.hoverCallback === 'function') {
+        content = this.options.hoverCallback(index, this.options);
+      } else {
+        row = this.data[index];
+        content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
+        _ref = row.y;
+        for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
+          y = _ref[j];
+          content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n  " + this.options.labels[j] + ":\n  " + (this.yLabelFormat(y)) + "\n</div>";
         }
       }
-      return this.hilight(hoverIndex);
+      x = this.left + (index + 0.5) * this.width / this.data.length;
+      return [content, x];
+    };
+
+    Bar.prototype.drawXAxisLabel = function(xPos, yPos, text) {
+      var label;
+      return label = this.raphael.text(xPos, yPos, text).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor);
+    };
+
+    Bar.prototype.drawBar = function(xPos, yPos, width, height, barColor) {
+      return this.raphael.rect(xPos, yPos, width, height).attr('fill', barColor).attr('stroke-width', 0);
     };
 
     return Bar;
@@ -1160,6 +1341,7 @@
 
     Donut.prototype.defaults = {
       colors: ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'],
+      backgroundColor: '#FFFFFF',
       formatter: Morris.commas
     };
 
@@ -1181,14 +1363,13 @@
         return;
       }
       this.data = options.data;
-      this.el.addClass('graph-initialised');
       this.redraw();
     }
 
     Donut.prototype.redraw = function() {
       var C, cx, cy, d, idx, last, max_value, min, next, seg, total, w, x, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results;
       this.el.empty();
-      this.r = new Raphael(this.el[0]);
+      this.raphael = new Raphael(this.el[0]);
       cx = this.el.width() / 2;
       cy = this.el.height() / 2;
       w = (Math.min(cx, cy) - 10) / 3;
@@ -1207,20 +1388,15 @@
       for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
         d = _ref1[_j];
         next = last + min + C * (d.value / total);
-        seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.options.colors[idx % this.options.colors.length], d);
-        seg.render(this.r);
+        seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.options.colors[idx % this.options.colors.length], this.options.backgroundColor, d, this.raphael);
+        seg.render();
         this.segments.push(seg);
         seg.on('hover', this.select);
         last = next;
         idx += 1;
       }
-      this.text1 = this.r.text(cx, cy - 10, '').attr({
-        'font-size': 15,
-        'font-weight': 800
-      });
-      this.text2 = this.r.text(cx, cy + 10, '').attr({
-        'font-size': 14
-      });
+      this.text1 = this.drawEmptyDonutLabel(cx, cy - 10, 15, 800);
+      this.text2 = this.drawEmptyDonutLabel(cx, cy + 10, 14);
       max_value = Math.max.apply(null, (function() {
         var _k, _len2, _ref2, _results;
         _ref2 = this.data;
@@ -1258,7 +1434,7 @@
         segment = idx;
       }
       segment.select();
-      return this.setLabels(segment.data.label, this.options.formatter(segment.data.value));
+      return this.setLabels(segment.data.label, this.options.formatter(segment.data.value, segment.data));
     };
 
     Donut.prototype.setLabels = function(label1, label2) {
@@ -1287,6 +1463,15 @@
       });
     };
 
+    Donut.prototype.drawEmptyDonutLabel = function(xPos, yPos, fontSize, fontWeight) {
+      var text;
+      text = this.raphael.text(xPos, yPos, '').attr('font-size', fontSize);
+      if (fontWeight != null) {
+        text.attr('font-weight', fontWeight);
+      }
+      return text;
+    };
+
     return Donut;
 
   })();
@@ -1295,13 +1480,15 @@
 
     __extends(DonutSegment, _super);
 
-    function DonutSegment(cx, cy, inner, outer, p0, p1, color, data) {
+    function DonutSegment(cx, cy, inner, outer, p0, p1, color, backgroundColor, data, raphael) {
       this.cx = cx;
       this.cy = cy;
       this.inner = inner;
       this.outer = outer;
       this.color = color;
+      this.backgroundColor = backgroundColor;
       this.data = data;
+      this.raphael = raphael;
       this.deselect = __bind(this.deselect, this);
 
       this.select = __bind(this.select, this);
@@ -1310,7 +1497,7 @@
       this.cos_p0 = Math.cos(p0);
       this.sin_p1 = Math.sin(p1);
       this.cos_p1 = Math.cos(p1);
-      this.long = (p1 - p0) > Math.PI ? 1 : 0;
+      this.is_long = (p1 - p0) > Math.PI ? 1 : 0;
       this.path = this.calcSegment(this.inner + 3, this.inner + this.outer - 5);
       this.selectedPath = this.calcSegment(this.inner + 3, this.inner + this.outer);
       this.hilight = this.calcArc(this.inner);
@@ -1324,29 +1511,37 @@
       var ix0, ix1, iy0, iy1, ox0, ox1, oy0, oy1, _ref, _ref1;
       _ref = this.calcArcPoints(r1), ix0 = _ref[0], iy0 = _ref[1], ix1 = _ref[2], iy1 = _ref[3];
       _ref1 = this.calcArcPoints(r2), ox0 = _ref1[0], oy0 = _ref1[1], ox1 = _ref1[2], oy1 = _ref1[3];
-      return ("M" + ix0 + "," + iy0) + ("A" + r1 + "," + r1 + ",0," + this.long + ",0," + ix1 + "," + iy1) + ("L" + ox1 + "," + oy1) + ("A" + r2 + "," + r2 + ",0," + this.long + ",1," + ox0 + "," + oy0) + "Z";
+      return ("M" + ix0 + "," + iy0) + ("A" + r1 + "," + r1 + ",0," + this.is_long + ",0," + ix1 + "," + iy1) + ("L" + ox1 + "," + oy1) + ("A" + r2 + "," + r2 + ",0," + this.is_long + ",1," + ox0 + "," + oy0) + "Z";
     };
 
     DonutSegment.prototype.calcArc = function(r) {
       var ix0, ix1, iy0, iy1, _ref;
       _ref = this.calcArcPoints(r), ix0 = _ref[0], iy0 = _ref[1], ix1 = _ref[2], iy1 = _ref[3];
-      return ("M" + ix0 + "," + iy0) + ("A" + r + "," + r + ",0," + this.long + ",0," + ix1 + "," + iy1);
+      return ("M" + ix0 + "," + iy0) + ("A" + r + "," + r + ",0," + this.is_long + ",0," + ix1 + "," + iy1);
     };
 
-    DonutSegment.prototype.render = function(r) {
+    DonutSegment.prototype.render = function() {
       var _this = this;
-      this.arc = r.path(this.hilight).attr({
-        stroke: this.color,
+      this.arc = this.drawDonutArc(this.hilight, this.color);
+      return this.seg = this.drawDonutSegment(this.path, this.color, this.backgroundColor, function() {
+        return _this.fire('hover', _this);
+      });
+    };
+
+    DonutSegment.prototype.drawDonutArc = function(path, color) {
+      return this.raphael.path(path).attr({
+        stroke: color,
         'stroke-width': 2,
         opacity: 0
       });
-      return this.seg = r.path(this.path).attr({
-        fill: this.color,
-        stroke: 'white',
+    };
+
+    DonutSegment.prototype.drawDonutSegment = function(path, fillColor, strokeColor, hoverFunction) {
+      return this.raphael.path(path).attr({
+        fill: fillColor,
+        stroke: strokeColor,
         'stroke-width': 3
-      }).hover(function() {
-        return _this.fire('hover', _this);
-      });
+      }).hover(hoverFunction);
     };
 
     DonutSegment.prototype.select = function() {