added alignZeros

HISTORY.md

@@ -9,6 +9,9 @@ http://visjs.org
 - Implemented selection of a range of items using Shift+Click.
 - Fixed onAdd/onUpdate callbacks when using a DataView (thanks @motzel).
 
+### Graph2D
+
+- Added alignZeros option to dataAxis with default value true.
 
 ## 2014-11-14, version 3.7.0
 

dist/vis.css

@@ -396,6 +396,7 @@
 .vis.timeline .dataaxis .yAxis.major.measure{
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
+    border: 0px;
     visibility: hidden;
     width: auto;
 }
@@ -411,6 +412,7 @@
 .vis.timeline .dataaxis .yAxis.minor.measure{
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
+    border: 0px;
     visibility: hidden;
     width: auto;
 }

docs/graph2d.html

@@ -510,6 +510,13 @@ The options colored in green can also be used as options for the groups. All opt
       displayed after the decimal point.
       If undefined, trailing zeros will be removed.</td>
 </tr>
+<tr>
+    <td>dataAxis.alignZeros</td>
+    <td>Boolean</td>
+    <td>true</td>
+    <td>When using multiple axis, the right one is slaved to the left one. If you need to ensure that the zero-lines are on the same
+    height, you can turn this option on.</td>
+</tr>
 <tr>
   <td>groups.visibility</td>
   <td>Object</td>

examples/graph2d/12_customRange.html

@@ -18,6 +18,7 @@
     You can define a custom range for the Y axis. Since there are two Y axis, you can define both of them. You can also
     only define the min or max values. Since one of the Y axis is slaved to the other one (the right one is slaved to the left one),
     you cannot absolutely define the range of the slaved axis because it has to use the same lines. The values you supply are used as guidelines however.
+    If the zero-lines have to be aligned, you can use the option alignZeros. It is enabled by default.
 
 <pre class="prettyprint lang-js">
 var options = {
@@ -86,6 +87,7 @@ var options = {
         orientation:'top',
         start: '2014-06-10',
         end: '2014-06-18'
+
     };
     var graph2d = new vis.Graph2d(container, items, groups, options);
 

examples/network/01_basic_usage.html

@@ -45,6 +45,7 @@
   };
   var options = {edges:{style:'arrow-center'}};
   var network = new vis.Network(container, data, options);
+
 </script>
 
 </body>

lib/timeline/DataStep.js

@@ -24,7 +24,7 @@
  * @param {Date} [end]           The end date
  * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
  */
-function DataStep(start, end, minimumStep, containerHeight, customRange) {
+function DataStep(start, end, minimumStep, containerHeight, customRange, alignZeros) {
   // variables
   this.current = 0;
 
@@ -40,6 +40,8 @@ function DataStep(start, end, minimumStep, containerHeight, customRange) {
   this.majorSteps = [1,     2,    5,  10];
   this.minorSteps = [0.25,  0.5,  1,  2];
 
+  this.alignZeros = alignZeros;
+
   this.setRange(start, end, minimumStep, containerHeight, customRange);
 }
 
@@ -64,9 +66,10 @@ DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight,
     this._end += 1;
   }
 
-  if (this.autoScale) {
+  if (this.autoScale == true) {
     this.setMinimumStep(minimumStep, containerHeight);
   }
+
   this.setFirst(customRange);
 };
 
@@ -119,16 +122,23 @@ DataStep.prototype.setFirst = function(customRange) {
   if (customRange === undefined) {
     customRange = {};
   }
+
   var niceStart = customRange.min === undefined ? this._start - (this.scale * 2 * this.minorSteps[this.stepIndex]) : customRange.min;
   var niceEnd = customRange.max === undefined ? this._end + (this.scale * this.minorSteps[this.stepIndex]) : customRange.max;
 
   this.marginEnd = customRange.max === undefined ? this.roundToMinor(niceEnd) : customRange.max;
   this.marginStart = customRange.min === undefined ? this.roundToMinor(niceStart) : customRange.min;
+
+  // if we need to align the zero's we need to make sure that there is a zero to use.
+  if (this.alignZeros == true && (this.marginEnd - this.marginStart) % this.step != 0) {
+    this.marginEnd += this.marginEnd % this.step;
+  }
+
   this.deadSpace = this.roundToMinor(niceEnd) - niceEnd + this.roundToMinor(niceStart) - niceStart;
   this.marginRange = this.marginEnd - this.marginStart;
 
-  this.current = this.marginEnd;
 
+  this.current = this.marginEnd;
 };
 
 DataStep.prototype.roundToMinor = function(value) {

lib/timeline/component/DataAxis.js

@@ -27,6 +27,7 @@ function DataAxis (body, options, svg, linegraphOptions) {
     iconWidth: 20,
     width: '40px',
     visible: true,
+    alignZeros: true,
     customRange: {
       left: {min:undefined, max:undefined},
       right: {min:undefined, max:undefined}
@@ -64,6 +65,8 @@ function DataAxis (body, options, svg, linegraphOptions) {
 
   this.stepPixels = 25;
   this.stepPixelsForced = 25;
+  this.zeroCrossing = -1;
+
   this.lineOffset = 0;
   this.master = true;
   this.svgElements = {};
@@ -125,7 +128,8 @@ DataAxis.prototype.setOptions = function (options) {
       'visible',
       'customRange',
       'title',
-      'format'
+      'format',
+      'alignZeros'
     ];
     util.selectiveExtend(fields, this.options, options);
 
@@ -237,6 +241,11 @@ DataAxis.prototype.hide = function() {
  * @param end
  */
 DataAxis.prototype.setRange = function (start, end) {
+  if (this.master == false && this.options.alignZeros == true && this.zeroCrossing != -1) {
+    if (start > 0) {
+      start = 0;
+    }
+  }
   this.range.start = start;
   this.range.end = end;
 };
@@ -334,16 +343,26 @@ DataAxis.prototype._redrawLabels = function () {
   // calculate range and step (step such that we have space for 7 characters per label)
   var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced;
 
-  var step = new DataStep(this.range.start, this.range.end, minimumStep, this.dom.frame.offsetHeight, this.options.customRange[this.options.orientation]);
+  var step = new DataStep(
+    this.range.start,
+    this.range.end,
+    minimumStep,
+    this.dom.frame.offsetHeight,
+    this.options.customRange[this.options.orientation],
+    this.master == false && this.options.alignZeros       // doess the step have to align zeros? only if not master and the options is on
+  );
+
   this.step = step;
   // get the distance in pixels for a step
   // dead space is space that is "left over" after a step
   var stepPixels = (this.dom.frame.offsetHeight - (step.deadSpace * (this.dom.frame.offsetHeight / step.marginRange))) / (((step.marginRange - step.deadSpace) / step.step));
+
   this.stepPixels = stepPixels;
 
   var amountOfSteps = this.height / stepPixels;
   var stepDifference = 0;
 
+  // the slave axis needs to use the same horizontal lines as the master axis.
   if (this.master == false) {
     stepPixels = this.stepPixelsForced;
     stepDifference = Math.round((this.dom.frame.offsetHeight / stepPixels) - amountOfSteps);
@@ -351,6 +370,16 @@ DataAxis.prototype._redrawLabels = function () {
       step.previous();
     }
     amountOfSteps = this.height / stepPixels;
+
+    if (this.zeroCrossing != -1 && this.options.alignZeros == true) {
+      var zeroStepDifference = (step.marginEnd / step.step) - this.zeroCrossing;
+      if (zeroStepDifference > 0) {
+        for (var i = 0; i < zeroStepDifference; i++) {step.next();}
+      }
+      else if (zeroStepDifference < 0) {
+        for (var i = 0; i < -zeroStepDifference; i++) {step.previous();}
+      }
+    }
   }
   else {
     amountOfSteps += 0.25;
@@ -392,6 +421,10 @@ DataAxis.prototype._redrawLabels = function () {
       this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
     }
 
+    if (this.master == true && step.current == 0) {
+      this.zeroCrossing = max;
+    }
+
     max++;
   }
 
@@ -544,7 +577,7 @@ DataAxis.prototype._calculateCharSize = function () {
   // determine the char width and height on the minor axis
   if (!('minorCharHeight' in this.props)) {
     var textMinor = document.createTextNode('0');
-    var measureCharMinor = document.createElement('DIV');
+    var measureCharMinor = document.createElement('div');
     measureCharMinor.className = 'yAxis minor measure';
     measureCharMinor.appendChild(textMinor);
     this.dom.frame.appendChild(measureCharMinor);
@@ -557,7 +590,7 @@ DataAxis.prototype._calculateCharSize = function () {
 
   if (!('majorCharHeight' in this.props)) {
     var textMajor = document.createTextNode('0');
-    var measureCharMajor = document.createElement('DIV');
+    var measureCharMajor = document.createElement('div');
     measureCharMajor.className = 'yAxis major measure';
     measureCharMajor.appendChild(textMajor);
     this.dom.frame.appendChild(measureCharMajor);
@@ -570,7 +603,7 @@ DataAxis.prototype._calculateCharSize = function () {
 
   if (!('titleCharHeight' in this.props)) {
     var textTitle = document.createTextNode('0');
-    var measureCharTitle = document.createElement('DIV');
+    var measureCharTitle = document.createElement('div');
     measureCharTitle.className = 'yAxis title measure';
     measureCharTitle.appendChild(textTitle);
     this.dom.frame.appendChild(measureCharTitle);

lib/timeline/component/LineGraph.js

@@ -53,6 +53,7 @@ function LineGraph(body, options) {
       icons: false,
       width: '40px',
       visible: true,
+      alignZeros: true,
       customRange: {
         left: {min:undefined, max:undefined},
         right: {min:undefined, max:undefined}
@@ -854,6 +855,7 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
 
     changeCalled = this.yAxisLeft.redraw() || changeCalled;
     this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
+    this.yAxisRight.zeroCrossing = this.yAxisLeft.zeroCrossing;
     changeCalled = this.yAxisRight.redraw() || changeCalled;
   }
   else {

lib/timeline/component/css/dataaxis.css

@@ -25,6 +25,7 @@
 .vis.timeline .dataaxis .yAxis.major.measure{
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
+    border: 0px;
     visibility: hidden;
     width: auto;
 }
@@ -40,6 +41,7 @@
 .vis.timeline .dataaxis .yAxis.minor.measure{
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
+    border: 0px;
     visibility: hidden;
     width: auto;
 }