- added show major/minor lines options to dataAxis and timeline

HISTORY.md

@@ -11,10 +11,12 @@ http://visjs.org
 ### Graph2d
 
 - Fixed round-off errors of zero on the y-axis.
+- added show major/minor lines options to dataAxis.
 
 ### Timeline
 
 - Support for custom date formatting of the labels on the time axis.
+- added show major/minor lines options to timeline.
 
 
 ## 2014-12-09, version 3.7.2

docs/graph2d.html

@@ -452,6 +452,18 @@ The options colored in green can also be used as options for the groups. All opt
   <td>true</td>
   <td>Toggle the drawing of the major labels on the Y axis.</td>
 </tr>
+  <tr>
+    <td>dataAxis.showMajorLines</td>
+    <td>Boolean</td>
+    <td>true</td>
+    <td>Toggle the drawing of the major lines on the Y axis.</td>
+  </tr>
+  <tr>
+    <td>dataAxis.showMinorLines</td>
+    <td>Boolean</td>
+    <td>true</td>
+    <td>Toggle the drawing of the major lines on the Y axis.</td>
+  </tr>
 <tr>
   <td>dataAxis.icons</td>
   <td>Boolean</td>
@@ -713,6 +725,22 @@ The options colored in green can also be used as options for the groups. All opt
       visible.</td>
   </tr>
 
+  <tr>
+    <td>showMajorLines</td>
+    <td>boolean</td>
+    <td>true</td>
+    <td>By default, the timeline shows both minor and major date lines on the
+      time axis. You can use this option to hide the lines from the major dates.
+  </tr>
+
+  <tr>
+    <td>showMinorLines</td>
+    <td>boolean</td>
+    <td>true</td>
+    <td>By default, the timeline shows both minor and major date lines on the
+      time axis. You can use this option to hide the lines from the minor dates.
+  </tr>
+
   <tr>
     <td>start</td>
     <td>Date | Number | String</td>

docs/timeline.html

@@ -743,6 +743,23 @@ var options = {
         visible.</td>
 </tr>
 
+
+  <tr>
+    <td>showMajorLines</td>
+    <td>boolean</td>
+    <td>true</td>
+    <td>By default, the timeline shows both minor and major date lines on the
+      time axis. You can use this option to hide the lines from the major dates.
+  </tr>
+
+  <tr>
+    <td>showMinorLines</td>
+    <td>boolean</td>
+    <td>true</td>
+    <td>By default, the timeline shows both minor and major date lines on the
+      time axis. You can use this option to hide the lines from the minor dates.
+  </tr>
+
 <tr>
     <td>stack</td>
     <td>Boolean</td>

examples/graph2d/01_basic.html

@@ -44,7 +44,7 @@
   var dataset = new vis.DataSet(items);
   var options = {
     start: '2014-06-10',
-    end: '2014-06-18'
+    end: '2014-06-18',
   };
   var graph2d = new vis.Graph2d(container, dataset, options);
 </script>

lib/timeline/component/DataAxis.js

@@ -19,6 +19,8 @@ function DataAxis (body, options, svg, linegraphOptions) {
     orientation: 'left',  // supported: 'left', 'right'
     showMinorLabels: true,
     showMajorLabels: true,
+    showMinorLines: true,
+    showMajorLines: true,
     icons: true,
     majorLinesOffset: 7,
     minorLinesOffset: 4,
@@ -118,6 +120,8 @@ DataAxis.prototype.setOptions = function (options) {
       'orientation',
       'showMinorLabels',
       'showMajorLabels',
+      'showMajorLines',
+      'showMinorLines',
       'icons',
       'majorLinesOffset',
       'minorLinesOffset',
@@ -417,9 +421,11 @@ DataAxis.prototype._redrawLabels = function () {
       if (y >= 0) {
         this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
       }
-      this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
+      if (this.options.showMajorLines == true) {
+        this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
+      }
     }
-    else {
+    else if (this.options.showMinorLines == true) {
       this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
     }
 

lib/timeline/component/LineGraph.js

@@ -50,6 +50,8 @@ function LineGraph(body, options) {
     dataAxis: {
       showMinorLabels: true,
       showMajorLabels: true,
+      showMinorLines: true,
+      showMajorLines: true,
       icons: false,
       width: '40px',
       visible: true,

lib/timeline/component/TimeAxis.js

@@ -40,6 +40,8 @@ function TimeAxis (body, options) {
     // TODO: implement timeaxis orientations 'left' and 'right'
     showMinorLabels: true,
     showMajorLabels: true,
+    showMajorLines: true,
+    showMinorLines: true,
     format: null
   };
   this.options = util.extend({}, this.defaultOptions);
@@ -65,7 +67,7 @@ TimeAxis.prototype = new Component();
 TimeAxis.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels','hiddenDates', 'format'], this.options, options);
+    util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels', 'showMinorLines', 'showMajorLines','hiddenDates', 'format'], this.options, options);
 
     // apply locale to moment.js
     // TODO: not so nice, this is applied globally to moment.js
@@ -224,9 +226,11 @@ TimeAxis.prototype._repaintLabels = function () {
         }
         this._repaintMajorText(x, step.getLabelMajor(), orientation);
       }
-      this._repaintMajorLine(x, orientation);
+      if (this.options.showMajorLines == true) {
+        this._repaintMajorLine(x, orientation);
+      }
     }
-    else {
+    else if (this.options.showMinorLines == true) {
       this._repaintMinorLine(x, orientation);
     }