Non-year X labels. This is controlled by new options numXLabels, xLabelFormat, and xLabelMargin.

examples/weeks.html

@@ -46,7 +46,11 @@ Morris.Line({
   data: week_data,
   xkey: 'period',
   ykeys: ['licensed', 'sorned'],
-  labels: ['Licensed', 'SORN']
+  labels: ['Licensed', 'SORN'],
+  numXLabels: 7,
+  xLabelFormat: function(x) {
+    var d = new Date(x); return (d.getMonth()+1)+'-'+d.getFullYear()
+  }
 });
 </pre>
 </body>

morris.coffee

@@ -43,6 +43,9 @@ class Morris.Line
     marginBottom: 30
     marginLeft: 25
     numLines: 5
+    numXLabels: 5
+    xLabelMargin: 50
+    xLabelFormat: (x) -> new Date(x).getFullYear()
     gridLineColor: '#aaa'
     gridTextColor: '#888'
     gridTextSize: 12
@@ -112,7 +115,7 @@ class Morris.Line
         @options.ymin = Math.min parseInt(@options.ymin[5..], 10), ymin
       else
         @options.ymin = ymin
-    
+
     # Some instance variables for later
     @pointGrow = Raphael.animation r: @options.pointSize + 3, 25, 'linear'
     @pointShrink = Raphael.animation r: @options.pointSize, 25, 'linear'
@@ -131,7 +134,7 @@ class Morris.Line
       return touch
     @el.bind 'touchstart', touchHandler
     @el.bind 'touchmove', touchHandler
-    @el.bind 'touchend', touchHandler    
+    @el.bind 'touchend', touchHandler
 
   # Do any size-related calculations
   #
@@ -160,8 +163,8 @@ class Morris.Line
               scoords.push(x: @columns[i], y: @transY(y))
         @seriesCoords.push(scoords)
       # calculate hover margins
-      @hoverMargins = $.map @columns.slice(1), (x, i) => (x + @columns[i]) / 2      
-    
+      @hoverMargins = $.map @columns.slice(1), (x, i) => (x + @columns[i]) / 2
+
   # quick translation helpers
   #
   transX: (x) =>
@@ -181,7 +184,7 @@ class Morris.Line
 
     # the raphael drawing instance
     @r = new Raphael(@el[0])
-    
+
     @calc()
     @drawGrid()
     @drawSeries()
@@ -208,31 +211,35 @@ class Morris.Line
 
     ## draw x axis labels
     prevLabelMargin = null
-    xLabelMargin = 50 # make this an option?
+    prevLabelText = null
     if @options.parseTime
-      x1 = new Date(@xmin).getFullYear()
-      x2 = new Date(@xmax).getFullYear()
+      step = (@xmax - @xmin)/(@options.numXLabels-1)
+      x1 = @xmin/step
+      x2 = @xmax/step
     else
       x1 = 0
       x2 = @columnLabels.length
     for i in [x1..x2]
       if @options.parseTime
-        xpos = new Date(i, 0, 1).getTime()
+        xpos = i*step
         if xpos < @xmin
           continue
       else
         xpos = i
-      labelText = if @options.parseTime then i else @columnLabels[@columnLabels.length-i-1]
+      labelText = if @options.parseTime then @options.xLabelFormat(xpos) else @columnLabels[@columnLabels.length-i-1]
+      if labelText == prevLabelText
+        continue
+      prevLabelText = labelText
       label = @r.text(@transX(xpos), @options.marginTop + @height + @options.marginBottom / 2, labelText)
         .attr('font-size', @options.gridTextSize)
         .attr('fill', @options.gridTextColor)
       labelBox = label.getBBox()
       # ensure a minimum of `xLabelMargin` pixels between labels
       if prevLabelMargin is null or prevLabelMargin <= labelBox.x
-        prevLabelMargin = labelBox.x + labelBox.width + xLabelMargin
+        prevLabelMargin = labelBox.x + labelBox.width + @options.xLabelMargin
       else
         label.remove()
-        
+
   # draw the data series
   #
   drawSeries: ->
@@ -254,7 +261,7 @@ class Morris.Line
             .attr('stroke-width', 1)
             .attr('stroke', '#ffffff')
         @seriesPoints[i].push(circle)
-        
+
   # create a path for a data series
   #
   createPath: (all_coords, top, left, bottom, right) ->
@@ -339,7 +346,7 @@ class Morris.Line
     xloc = Math.min @left + @width - maxLabelWidth / 2 - @options.hoverPaddingX, @columns[index]
     xloc = Math.max @left + maxLabelWidth / 2 + @options.hoverPaddingX, xloc
     @hoverSet.attr 'transform', "t#{xloc},#{yloc}"
-  
+
   hideHover: ->
     @hoverSet.hide()
 
@@ -363,7 +370,7 @@ class Morris.Line
       if hoverIndex == 0 || @hoverMargins[hoverIndex - 1] > x
         @hilight hoverIndex
         break
-  
+
   measureText: (text, fontSize = 12) ->
     tt = @r.text(100, 100, text).attr('font-size', fontSize)
     ret = tt.getBBox()

morris.js

@@ -37,6 +37,11 @@
       marginBottom: 30,
       marginLeft: 25,
       numLines: 5,
+      numXLabels: 5,
+      xLabelMargin: 50,
+      xLabelFormat: function(x) {
+        return new Date(x).getFullYear();
+      },
       gridLineColor: '#aaa',
       gridTextColor: '#888',
       gridTextSize: 12,
@@ -219,7 +224,7 @@
     };
 
     Line.prototype.drawGrid = function() {
-      var firstY, i, label, labelBox, labelText, lastY, lineY, prevLabelMargin, v, x1, x2, xLabelMargin, xpos, y, yInterval, _results;
+      var firstY, i, label, labelBox, labelText, lastY, lineY, prevLabelMargin, prevLabelText, step, v, x1, x2, xpos, y, yInterval, _results;
       yInterval = (this.options.ymax - this.options.ymin) / (this.options.numLines - 1);
       firstY = Math.ceil(this.options.ymin / yInterval) * yInterval;
       lastY = Math.floor(this.options.ymax / yInterval) * yInterval;
@@ -230,10 +235,11 @@
         this.r.path("M" + this.left + "," + y + "H" + (this.left + this.width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth);
       }
       prevLabelMargin = null;
-      xLabelMargin = 50;
+      prevLabelText = null;
       if (this.options.parseTime) {
-        x1 = new Date(this.xmin).getFullYear();
-        x2 = new Date(this.xmax).getFullYear();
+        step = (this.xmax - this.xmin) / (this.options.numXLabels - 1);
+        x1 = this.xmin / step;
+        x2 = this.xmax / step;
       } else {
         x1 = 0;
         x2 = this.columnLabels.length;
@@ -241,16 +247,18 @@
       _results = [];
       for (i = x1; x1 <= x2 ? i <= x2 : i >= x2; x1 <= x2 ? i++ : i--) {
         if (this.options.parseTime) {
-          xpos = new Date(i, 0, 1).getTime();
+          xpos = i * step;
           if (xpos < this.xmin) continue;
         } else {
           xpos = i;
         }
-        labelText = this.options.parseTime ? i : this.columnLabels[this.columnLabels.length - i - 1];
+        labelText = this.options.parseTime ? this.options.xLabelFormat(xpos) : this.columnLabels[this.columnLabels.length - i - 1];
+        if (labelText === prevLabelText) continue;
+        prevLabelText = labelText;
         label = this.r.text(this.transX(xpos), this.options.marginTop + this.height + this.options.marginBottom / 2, labelText).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor);
         labelBox = label.getBBox();
         if (prevLabelMargin === null || prevLabelMargin <= labelBox.x) {
-          _results.push(prevLabelMargin = labelBox.x + labelBox.width + xLabelMargin);
+          _results.push(prevLabelMargin = labelBox.x + labelBox.width + this.options.xLabelMargin);
         } else {
           _results.push(label.remove());
         }