Updating datasets.

Use setData() function to update dataset.

morris.coffee

@@ -26,8 +26,32 @@ class Morris.Line
     if @options.data is undefined or @options.data.length is 0
       return
     @el.addClass 'graph-initialised'
-    @precalc()
+
-    @redraw()
+    # the raphael drawing instance
+    @r = new Raphael(@el[0])
+
+    # Some instance variables for later
+    @pointGrow = Raphael.animation r: @options.pointSize + 3, 25, 'linear'
+    @pointShrink = Raphael.animation r: @options.pointSize, 25, 'linear'
+    @elementWidth = null
+    @elementHeight = null
+    @dirty = false
+    # column hilight events
+    @prevHilight = null
+    @el.mousemove (evt) =>
+      @updateHilight evt.pageX
+    if @options.hideHover
+      @el.mouseout (evt) =>
+        @hilight null
+    touchHandler = (evt) =>
+      touch = evt.originalEvent.touches[0] or evt.originalEvent.changedTouches[0]
+      @updateHilight touch.pageX
+      return touch
+    @el.bind 'touchstart', touchHandler
+    @el.bind 'touchmove', touchHandler
+    @el.bind 'touchend', touchHandler
+
+    @setData(@options.data)
 
   # Default configuration
   #
@@ -72,11 +96,11 @@ class Morris.Line
     xLabels: 'auto'
     xLabelFormat: null
 
-  # Do any necessary pre-processing for a new dataset
+  # Pre-process data
   #
-  precalc: ->
+  setData: (data, redraw = true) ->
     # shallow copy & sort data
-    @options.data = @options.data.slice(0)
+    @options.data = data.slice(0)
     @options.data.sort (a, b) => (a[@options.xkey] < b[@options.xkey]) - (b[@options.xkey] < a[@options.xkey])
     # extract labels
     @columnLabels = $.map @options.data, (d) => d[@options.xkey]
@@ -133,25 +157,8 @@ class Morris.Line
     else
         @precision = 0
 
-    # Some instance variables for later
+    @dirty = true
-    @pointGrow = Raphael.animation r: @options.pointSize + 3, 25, 'linear'
+    @redraw() if redraw
-    @pointShrink = Raphael.animation r: @options.pointSize, 25, 'linear'
-    @elementWidth = null
-    @elementHeight = null
-    # column hilight events
-    @prevHilight = null
-    @el.mousemove (evt) =>
-      @updateHilight evt.pageX
-    if @options.hideHover
-      @el.mouseout (evt) =>
-        @hilight null
-    touchHandler = (evt) =>
-      touch = evt.originalEvent.touches[0] or evt.originalEvent.changedTouches[0]
-      @updateHilight touch.pageX
-      return touch
-    @el.bind 'touchstart', touchHandler
-    @el.bind 'touchmove', touchHandler
-    @el.bind 'touchend', touchHandler
 
   # Do any size-related calculations
   #
@@ -159,7 +166,10 @@ class Morris.Line
     w = @el.width()
     h = @el.height()
 
-    if @elementWidth != w or @elementHeight != h
+    if @elementWidth != w or @elementHeight != h or @dirty
+      @elementWidth = w
+      @elementHeight = h
+      @dirty = false
       # calculate grid dimensions
       @maxYLabelWidth = Math.max(
         @measureText(@yLabelFormat(@options.ymin), @options.gridTextSize).width,
@@ -197,12 +207,7 @@ class Morris.Line
   # Clear and redraw the graph
   #
   redraw: ->
-    # remove child elements (get rid of old drawings)
+    @r.clear()
-    @el.empty()
-
-    # the raphael drawing instance
-    @r = new Raphael(@el[0])
-
     @calc()
     @drawGrid()
     @drawSeries()

morris.js

@@ -19,6 +19,9 @@
       this.transY = __bind(this.transY, this);
 
       this.transX = __bind(this.transX, this);
+
+      var touchHandler,
+        _this = this;
       if (!(this instanceof Morris.Line)) {
         return new Morris.Line(options);
       }
@@ -38,8 +41,35 @@
         return;
       }
       this.el.addClass('graph-initialised');
-      this.precalc();
+      this.r = new Raphael(this.el[0]);
-      this.redraw();
+      this.pointGrow = Raphael.animation({
+        r: this.options.pointSize + 3
+      }, 25, 'linear');
+      this.pointShrink = Raphael.animation({
+        r: this.options.pointSize
+      }, 25, 'linear');
+      this.elementWidth = null;
+      this.elementHeight = null;
+      this.dirty = false;
+      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);
+        });
+      }
+      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);
+      this.el.bind('touchend', touchHandler);
+      this.setData(this.options.data);
     }
 
     Line.prototype.defaults = {
@@ -78,10 +108,13 @@
       xLabelFormat: null
     };
 
-    Line.prototype.precalc = function() {
+    Line.prototype.setData = function(data, redraw) {
-      var d, series_data, touchHandler, ykey, ymax, ymin, _i, _j, _k, _len, _len1, _ref, _ref1, _ref2, _results,
+      var d, series_data, ykey, ymax, ymin, _i, _j, _k, _len, _len1, _ref, _ref1, _ref2, _results,
         _this = this;
-      this.options.data = this.options.data.slice(0);
+      if (redraw == null) {
+        redraw = true;
+      }
+      this.options.data = data.slice(0);
       this.options.data.sort(function(a, b) {
         return (a[_this.options.xkey] < b[_this.options.xkey]) - (b[_this.options.xkey] < a[_this.options.xkey]);
       });
@@ -158,32 +191,10 @@
       } else {
         this.precision = 0;
       }
-      this.pointGrow = Raphael.animation({
+      this.dirty = true;
-        r: this.options.pointSize + 3
+      if (redraw) {
-      }, 25, 'linear');
+        return this.redraw();
-      this.pointShrink = Raphael.animation({
-        r: this.options.pointSize
-      }, 25, 'linear');
-      this.elementWidth = null;
-      this.elementHeight = null;
-      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);
-        });
       }
-      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.calc = function() {
@@ -191,7 +202,10 @@
         _this = this;
       w = this.el.width();
       h = this.el.height();
-      if (this.elementWidth !== w || this.elementHeight !== h) {
+      if (this.elementWidth !== w || this.elementHeight !== h || this.dirty) {
+        this.elementWidth = w;
+        this.elementHeight = h;
+        this.dirty = false;
         this.maxYLabelWidth = Math.max(this.measureText(this.yLabelFormat(this.options.ymin), this.options.gridTextSize).width, this.measureText(this.yLabelFormat(this.options.ymax), this.options.gridTextSize).width);
         this.left = this.maxYLabelWidth + this.options.marginLeft;
         this.width = this.el.width() - this.left - this.options.marginRight;
@@ -244,8 +258,7 @@
     };
 
     Line.prototype.redraw = function() {
-      this.el.empty();
+      this.r.clear();
-      this.r = new Raphael(this.el[0]);
       this.calc();
       this.drawGrid();
       this.drawSeries();