Custom dateFormat for string x-values. #90

lib/morris.line.coffee

@@ -90,22 +90,20 @@ class Morris.Line
     parseTime: true
     preUnits: ''
     postUnits: ''
-    dateFormat: (x) -> new Date(x).toString()
+    dateFormat: null
     xLabels: 'auto'
     xLabelFormat: null
 
   # Update the data series and redraw the chart.
   #
   setData: (data, redraw = true) ->
-    # shallow copy & sort data
+    # shallow copy & sort data (if required)
     @options.data = data.slice(0)
     if @options.parseTime
       @options.data.sort (a, b) =>
         (a[@options.xkey] < b[@options.xkey]) - (b[@options.xkey] < a[@options.xkey])
     else
       @options.data.reverse()
-    # extract labels
-    @columnLabels = $.map @options.data, (d) => d[@options.xkey]
 
     # extract series data
     @series = []
@@ -118,19 +116,25 @@ class Morris.Line
           else null
       @series.push(series_data)
 
+    # extract labels
+    @columnLabels = $.map @options.data, (d) => d[@options.xkey]
+
     # translate x labels into nominal dates
-    # note: currently using decimal years to specify dates
     if @options.parseTime
       @xvals = $.map @columnLabels, (x) -> Morris.parseDate x
     else
       @xvals = [(@columnLabels.length-1)..0]
-    # translate column labels, if they're timestamps
+
+    # format column labels
     if @options.parseTime
-      @columnLabels = $.map @columnLabels, (d) =>
-        if typeof d is 'number'
-          @options.dateFormat(d)
-        else
-          d
+      if @options.dateFormat
+        @columnLabels = $.map @xvals, (d) => @options.dateFormat(d)
+      else
+        @columnLabels = $.map @columnLabels, (d) =>
+          # default formatter for numeric timestamp labels
+          if typeof d is 'number' then new Date(d).toString() else d
+
+    # calculate horizontal range of the graph
     @xmin = Math.min.apply null, @xvals
     @xmax = Math.max.apply null, @xvals
     if @xmin is @xmax

morris.js

@@ -381,9 +381,7 @@
       parseTime: true,
       preUnits: '',
       postUnits: '',
-      dateFormat: function(x) {
-        return new Date(x).toString();
-      },
+      dateFormat: null,
       xLabels: 'auto',
       xLabelFormat: null
     };
@@ -402,9 +400,6 @@
       } else {
         this.options.data.reverse();
       }
-      this.columnLabels = $.map(this.options.data, function(d) {
-        return d[_this.options.xkey];
-      });
       this.series = [];
       _ref = this.options.ykeys;
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@@ -426,6 +421,9 @@
         }
         this.series.push(series_data);
       }
+      this.columnLabels = $.map(this.options.data, function(d) {
+        return d[_this.options.xkey];
+      });
       if (this.options.parseTime) {
         this.xvals = $.map(this.columnLabels, function(x) {
           return Morris.parseDate(x);
@@ -438,13 +436,19 @@
         }).apply(this);
       }
       if (this.options.parseTime) {
-        this.columnLabels = $.map(this.columnLabels, function(d) {
-          if (typeof d === 'number') {
+        if (this.options.dateFormat) {
+          this.columnLabels = $.map(this.xvals, function(d) {
             return _this.options.dateFormat(d);
-          } else {
-            return d;
-          }
-        });
+          });
+        } else {
+          this.columnLabels = $.map(this.columnLabels, function(d) {
+            if (typeof d === 'number') {
+              return new Date(d).toString();
+            } else {
+              return d;
+            }
+          });
+        }
       }
       this.xmin = Math.min.apply(null, this.xvals);
       this.xmax = Math.max.apply(null, this.xvals);

spec/lib/line_spec.coffee

@@ -49,4 +49,39 @@ describe 'Morris.Line', ->
     chart.strokeForSeries(1).should.equal blue
     (null == chart.pointFillColorForSeries(0)).should.be
     (chart.pointFillColorForSeries(0) || chart.colorForSeries(0)).should.equal chart.colorForSeries(0)
-    chart.pointFillColorForSeries(1).should.equal red
+    chart.pointFillColorForSeries(1).should.equal red
+
+  describe 'generating column labels', ->
+
+    it 'should use user-supplied x value strings by default', ->
+      chart = Morris.Line
+        element: 'graph'
+        data: [{x: '2012 Q1', y: 1}, {x: '2012 Q2', y: 1}]
+        xkey: 'x'
+        ykeys: ['y']
+        labels: ['dontcare']
+      chart.columnLabels.should == ['2012 Q1', '2012 Q2']
+
+    it 'should use a default format for timestamp x-values', ->
+      d1 = new Date(2012, 0, 1)
+      d2 = new Date(2012, 0, 2)
+      chart = Morris.Line
+        element: 'graph'
+        data: [{x: d1.getTime(), y: 1}, {x: d2.getTime(), y: 1}]
+        xkey: 'x'
+        ykeys: ['y']
+        labels: ['dontcare']
+      chart.columnLabels.should == [d2.toString(), d1.toString()]
+
+    it 'should use user-defined formatters', ->
+      d = new Date(2012, 0, 1)
+      chart = Morris.Line
+        element: 'graph'
+        data: [{x: d.getTime(), y: 1}, {x: '2012-01-02', y: 1}]
+        xkey: 'x'
+        ykeys: ['y']
+        labels: ['dontcare']
+        dateFormat: (d) ->
+          x = new Date(d)
+          "#{x.getYear()}/#{x.getMonth()+1}/#{x.getDay()}"
+      chart.columnLabels.should == ['2012/1/1', '2012/1/2']