Added ticks and tickValues in options (issue #121)

README.md

@@ -45,9 +45,9 @@ Options must be an object with a series array. It should look like this :
 ```js
 $scope.options = {
   axes: {
-    x: {key: 'x', labelFunction: function(value) {return value;}, type: 'linear', min: 0, max: 10},
-    y: {type: 'linear', min: 0, max: 1},
-    y2: {type: 'linear', min: 0, max: 1}
+    x: {key: 'x', labelFunction: function(value) {return value;}, type: 'linear', min: 0, max: 10, ticks: 2},
+    y: {type: 'linear', min: 0, max: 1, ticks: 5},
+    y2: {type: 'linear', min: 0, max: 1, ticks: [1, 2, 3, 4]}
   },
   series: [
     {y: 'value', color: 'steelblue', thickness: '2px', type: 'area', striped: true, label: 'Pouet'},
@@ -69,6 +69,7 @@ The `axes` keys can be undefined. Otherwise, it can contain an `x̀` key with th
  + `labelFunction` : optional, allows to format the axis' ticklabels. Must be a function that accepts a single argument and returns a string.
  + `min` : optional, forces the axis minimum value (default is computed from data)
  + `max` : optional, forces the axis maximum value (default is computed from data)
+ + `ticks` : optional, configures the axis' ticks (can be either a number or an array, more on this [here][3])
 
 It can also contain, according to your series configuration, a `y` and a `y2` key with the following properties :
 
@@ -162,3 +163,4 @@ It has a good coverage rate (above 95%), let's keep it this way.
 
   [1]: https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate
   [2]: https://github.com/n3-charts/line-chart/issues/44
+  [3]: http://stackoverflow.com/a/11661725

dist/line-chart.coffee

@@ -1,5 +1,5 @@
 ###
-line-chart - v1.1.3 - 14 October 2014
+line-chart - v1.1.3 - 17 October 2014
 https://github.com/n3-charts/line-chart
 Copyright (c) 2014 n3-charts
 ###
@@ -982,6 +982,10 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc
 
         this.sanitizeExtrema(options)
 
+        if options.ticks and options.ticks instanceof Array
+          options.tickValues = options.ticks
+          delete options.ticks
+
         return options
 
 # ----
@@ -1019,9 +1023,9 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc
         y.clamp(true)
         y2.clamp(true)
 
-        xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(axesOptions.x.labelFunction)
-        yAxis = d3.svg.axis().scale(y).orient('left').tickFormat(axesOptions.y.labelFunction)
-        y2Axis = d3.svg.axis().scale(y2).orient('right').tickFormat(axesOptions.y2?.labelFunction)
+        xAxis = this.createAxis(x, 'x', axesOptions)
+        yAxis = this.createAxis(y, 'y', axesOptions)
+        y2Axis = this.createAxis(y2, 'y2', axesOptions)
 
         style = (group) ->
           group.style(
@@ -1077,6 +1081,24 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc
             }
           }
 
+      createAxis: (scale, key, options) ->
+        sides =
+          x: 'bottom'
+          y: 'left'
+          y2: 'right'
+
+        o = options[key]
+
+        axis = d3.svg.axis()
+          .scale(scale)
+          .orient(sides[key])
+          .tickFormat(o?.labelFunction)
+
+        axis.ticks(o?.ticks) if o?.ticks?
+        axis.tickValues(o?.tickValues) if o?.tickValues?
+
+        return axis
+
       setScalesDomain: (scales, data, series, svg, options) ->
         this.setXScale(scales.xScale, data, series, options.axes)
 
@@ -1093,6 +1115,9 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc
       getVerticalDomain: (options, data, series, key) ->
         return [] unless o = options.axes[key]
 
+        if o?.tickValues?
+          return [o.tickValues[0], o.tickValues[o.tickValues.length - 1]]
+
         domain = this.yExtent(
           series.filter (s) -> s.axis is key and s.visible isnt false
           data

dist/line-chart.js

@@ -1,6 +1,6 @@
 
 /*
-line-chart - v1.1.3 - 14 October 2014
+line-chart - v1.1.3 - 17 October 2014
 https://github.com/n3-charts/line-chart
 Copyright (c) 2014 n3-charts
  */
@@ -1076,10 +1076,14 @@ mod.factory('n3utils', [
         }
         options.type || (options.type = 'linear');
         this.sanitizeExtrema(options);
+        if (options.ticks && options.ticks instanceof Array) {
+          options.tickValues = options.ticks;
+          delete options.ticks;
+        }
         return options;
       },
       createAxes: function(svg, dimensions, axesOptions) {
-        var drawY2Axis, height, style, that, width, x, xAxis, y, y2, y2Axis, yAxis, _ref;
+        var drawY2Axis, height, style, that, width, x, xAxis, y, y2, y2Axis, yAxis;
         drawY2Axis = axesOptions.y2 != null;
         width = dimensions.width;
         height = dimensions.height;
@@ -1105,9 +1109,9 @@ mod.factory('n3utils', [
         }
         y.clamp(true);
         y2.clamp(true);
-        xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(axesOptions.x.labelFunction);
-        yAxis = d3.svg.axis().scale(y).orient('left').tickFormat(axesOptions.y.labelFunction);
-        y2Axis = d3.svg.axis().scale(y2).orient('right').tickFormat((_ref = axesOptions.y2) != null ? _ref.labelFunction : void 0);
+        xAxis = this.createAxis(x, 'x', axesOptions);
+        yAxis = this.createAxis(y, 'y', axesOptions);
+        y2Axis = this.createAxis(y2, 'y2', axesOptions);
         style = function(group) {
           group.style({
             'font': '10px Courier',
@@ -1145,6 +1149,23 @@ mod.factory('n3utils', [
           }
         };
       },
+      createAxis: function(scale, key, options) {
+        var axis, o, sides;
+        sides = {
+          x: 'bottom',
+          y: 'left',
+          y2: 'right'
+        };
+        o = options[key];
+        axis = d3.svg.axis().scale(scale).orient(sides[key]).tickFormat(o != null ? o.labelFunction : void 0);
+        if ((o != null ? o.ticks : void 0) != null) {
+          axis.ticks(o != null ? o.ticks : void 0);
+        }
+        if ((o != null ? o.tickValues : void 0) != null) {
+          axis.tickValues(o != null ? o.tickValues : void 0);
+        }
+        return axis;
+      },
       setScalesDomain: function(scales, data, series, svg, options) {
         var y2Domain, yDomain;
         this.setXScale(scales.xScale, data, series, options.axes);
@@ -1161,6 +1182,9 @@ mod.factory('n3utils', [
         if (!(o = options.axes[key])) {
           return [];
         }
+        if ((o != null ? o.tickValues : void 0) != null) {
+          return [o.tickValues[0], o.tickValues[o.tickValues.length - 1]];
+        }
         domain = this.yExtent(series.filter(function(s) {
           return s.axis === key && s.visible !== false;
         }), data, options.stacks.filter(function(stack) {

lib/utils/options.coffee

@@ -155,4 +155,8 @@
 
         this.sanitizeExtrema(options)
 
+        if options.ticks and options.ticks instanceof Array
+          options.tickValues = options.ticks
+          delete options.ticks
+
         return options

lib/utils/scales.coffee

@@ -29,9 +29,9 @@
         y.clamp(true)
         y2.clamp(true)
 
-        xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(axesOptions.x.labelFunction)
-        yAxis = d3.svg.axis().scale(y).orient('left').tickFormat(axesOptions.y.labelFunction)
-        y2Axis = d3.svg.axis().scale(y2).orient('right').tickFormat(axesOptions.y2?.labelFunction)
+        xAxis = this.createAxis(x, 'x', axesOptions)
+        yAxis = this.createAxis(y, 'y', axesOptions)
+        y2Axis = this.createAxis(y2, 'y2', axesOptions)
 
         style = (group) ->
           group.style(
@@ -87,6 +87,24 @@
             }
           }
 
+      createAxis: (scale, key, options) ->
+        sides =
+          x: 'bottom'
+          y: 'left'
+          y2: 'right'
+
+        o = options[key]
+
+        axis = d3.svg.axis()
+          .scale(scale)
+          .orient(sides[key])
+          .tickFormat(o?.labelFunction)
+
+        axis.ticks(o?.ticks) if o?.ticks?
+        axis.tickValues(o?.tickValues) if o?.tickValues?
+
+        return axis
+
       setScalesDomain: (scales, data, series, svg, options) ->
         this.setXScale(scales.xScale, data, series, options.axes)
 
@@ -103,6 +121,9 @@
       getVerticalDomain: (options, data, series, key) ->
         return [] unless o = options.axes[key]
 
+        if o?.tickValues?
+          return [o.tickValues[0], o.tickValues[o.tickValues.length - 1]]
+
         domain = this.yExtent(
           series.filter (s) -> s.axis is key and s.visible isnt false
           data

test/unit/options.mocha.coffee

@@ -89,7 +89,6 @@ describe 'options', ->
           y:
             type: 'linear'
 
-
     it 'should set default axes and empty series', ->
       o = n3utils.sanitizeOptions({})
       expect(o.axes).to.eql
@@ -128,7 +127,6 @@ describe 'options', ->
         y:
           type: 'linear'
 
-
     it 'should allow x axis configuration', ->
       expect(n3utils.sanitizeOptions(
         tooltip: {mode: 'axes', interpolate: false}
@@ -164,6 +162,45 @@ describe 'options', ->
 
       expect(computed).to.eql(expected)
 
+    it 'should pass the ticks property, whatever it is', ->
+      expected =
+        x:
+          type: 'linear'
+          key: 'x'
+          ticks: 2
+        y:
+          type: 'linear'
+          ticks: 5
+
+      computed = n3utils.sanitizeOptions(
+        axes:
+          x:
+            ticks: 2
+          y:
+            ticks: 5
+      ).axes
+
+      expect(computed).to.eql(expected)
+
+    it 'should pass the tick values property, whatever it is', ->
+      expected =
+        x:
+          type: 'linear'
+          key: 'x'
+          tickValues: [2]
+        y:
+          type: 'linear'
+          tickValues: [5]
+
+      computed = n3utils.sanitizeOptions(
+        axes:
+          x:
+            ticks: [2]
+          y:
+            ticks: [5]
+      ).axes
+
+      expect(computed).to.eql(expected)
 
     it 'should allow y axes extrema configuration', ->
       expected =
@@ -337,7 +374,6 @@ describe 'options', ->
         }
       ]
 
-
     it 'should set y as the default axis', ->
       f = n3utils.sanitizeSeriesOptions
       expect(f([

test/unit/scales.mocha.coffee

@@ -53,6 +53,60 @@ describe 'scales', ->
 
         expect(n3utils.yExtent(series, data, [{series: ['id0', 'id1']}])).to.eql([1, 21])
 
+  describe 'tick count', ->
+    beforeEach ->
+      outerScope.$apply ->
+        outerScope.data = [
+          {x: 0, value: 4}
+          {x: 1, value: 8}
+        ]
+        outerScope.options =
+          axes:
+            x: {ticks: 2}
+            y: {ticks: 3}
+          series: [
+            {y: 'value', color: '#4682b4', label: 'toto'}
+            {y: 'value', axis: 'y2', color: '#4682b4', type: 'column'}
+          ]
+
+    it 'should work for vertical axes', ->
+      yticks = element.childByClass('y axis').children('text')
+      computedYTicks = yticks.map (t) -> t.domElement.textContent
+
+      expect(computedYTicks).to.eql(['4', '6', '8'])
+
+    it 'should work for horizontal axis', ->
+      xticks = element.childByClass('x axis').children('text')
+      computedXTicks = xticks.map (t) -> t.domElement.textContent
+      expect(computedXTicks).to.eql(['0', '2'])
+
+  describe 'tick values', ->
+    beforeEach ->
+      outerScope.$apply ->
+        outerScope.data = [
+          {x: 0, value: 4}
+          {x: 1, value: 8}
+        ]
+        outerScope.options =
+          axes:
+            x: {ticks: [-1, 0, 1]}
+            y: {ticks: [1, 2, 3]}
+          series: [
+            {y: 'value', color: '#4682b4', label: 'toto'}
+            {y: 'value', axis: 'y2', color: '#4682b4', type: 'column'}
+          ]
+
+    it 'should work for horizontal axis', ->
+      xticks = element.childByClass('x axis').children('text')
+      computedXTicks = xticks.map (t) -> t.domElement.textContent
+
+      expect(computedXTicks).to.eql(['-1.0', '0.0', '1.0'])
+
+    it 'should work for vertical axes', ->
+      yticks = element.childByClass('y axis').children('text')
+      computedYTicks = yticks.map (t) -> t.domElement.textContent
+
+      expect(computedYTicks).to.eql(['1.0', '2.0', '3.0'])
 
   describe 'min and max', ->
     beforeEach ->
@@ -63,6 +117,7 @@ describe 'scales', ->
         ]
         outerScope.options =
           axes:
+            x: {min: -5, max: 6}
             y: {min: 5, max: 6}
           series: [
             {y: 'value', color: '#4682b4', label: 'toto'}
@@ -76,6 +131,15 @@ describe 'scales', ->
         ['5.0', '5.1', '5.2', '5.3', '5.4', '5.5', '5.6', '5.7', '5.8', '5.9', '6.0']
       )
 
+    it 'should work for horizontal axis', ->
+      xticks = element.childByClass('x axis').children('text')
+      computedXTicks = xticks.map (t) -> t.domElement.textContent
+
+      # for some reason this is not sorted...
+      expect(computedXTicks).to.eql(
+        ['0', '1', '-5', '-4', '-3', '-2', '-1', '2', '3', '4', '5', '6']
+      )
+
   describe 'logarithmic y axes', ->
     beforeEach ->
       outerScope.$apply ->

test/visual/test_cases/ticks_count/desc

@@ -0,0 +1 @@
+Chart abscissas axis should allow ticks configuration on axes

test/visual/test_cases/ticks_count/html

@@ -0,0 +1,3 @@
+<div ng-controller='ExampleCtrl' style="width:600px;">
+  <linechart data="data" options="options"></linechart>
+</div>