fixed align zero by rewriting that part. #728

lib/DOMutil.js

@@ -153,28 +153,29 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
     point.setAttributeNS(null, "style", 'vis-' + group.group.options.drawPoints.styles);
   }
   point.setAttributeNS(null, "class", group.className + " vis-point");
-  //handle label 
-  var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
-  if (labelObj){
-      if (labelObj.xOffset) {
-        x = x + labelObj.xOffset;
-      }
+  //handle label
 
-      if (labelObj.yOffset) {
-        y = y + labelObj.yOffset;
-      }
-      if (labelObj.content) {
-        label.textContent = labelObj.content;
-      }
 
-      if (labelObj.className) {
-        label.setAttributeNS(null, "class", labelObj.className  + " vis-label");
-      }
+  if (labelObj) {
+    var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
+    if (labelObj.xOffset) {
+      x = x + labelObj.xOffset;
+    }
 
+    if (labelObj.yOffset) {
+      y = y + labelObj.yOffset;
+    }
+    if (labelObj.content) {
+      label.textContent = labelObj.content;
+    }
 
+    if (labelObj.className) {
+      label.setAttributeNS(null, "class", labelObj.className  + " vis-label");
+    }
+    label.setAttributeNS(null, "x", x);
+    label.setAttributeNS(null, "y", y);
   }
-  label.setAttributeNS(null, "x", x);
-  label.setAttributeNS(null, "y", y);
+
   return point;
 };
 

lib/timeline/Core.js

@@ -141,7 +141,6 @@ Core.prototype._create = function (container) {
 
   // emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
   hammerUtil.onTouch(this.hammer, function (event) {
-    console.log('touch', event)
     me.emit('touch', event);
   }.bind(this));
 

lib/timeline/DataStep.js

@@ -60,13 +60,12 @@ function DataStep(start, end, minimumStep, containerHeight, customRange, alignZe
 DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, customRange) {
   this._start = customRange.min === undefined ? start : customRange.min;
   this._end = customRange.max === undefined ? end : customRange.max;
-
-  if (this._start == this._end) {
-    this._start -= 0.75;
-    this._end += 1;
+  if (this._start === this._end) {
+    this._start = customRange.min === undefined ? this._start - 0.75 : this._start;
+    this._end = customRange.max === undefined ? this._end + 1 : this._end;;
   }
 
-  if (this.autoScale == true) {
+  if (this.autoScale === true) {
     this.setMinimumStep(minimumStep, containerHeight);
   }
 
@@ -75,14 +74,14 @@ DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight,
 
 /**
  * Automatically determine the scale that bests fits the provided minimum step
- * @param {Number} [minimumStep]  The minimum step size in milliseconds
+ * @param {Number} [minimumStep]  The minimum step size in pixels
  */
 DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
   // round to floor
-  var size = this._end - this._start;
-  var safeSize = size * 1.2;
-  var minimumStepValue = minimumStep * (safeSize / containerHeight);
-  var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
+  var range = this._end - this._start;
+  var safeRange = range * 1.2;
+  var minimumStepValue = minimumStep * (safeRange / containerHeight);
+  var orderOfMagnitude = Math.round(Math.log(safeRange)/Math.LN10);
 
   var minorStepIdx = -1;
   var magnitudefactor = Math.pow(10,orderOfMagnitude);
@@ -103,7 +102,7 @@ DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
         break;
       }
     }
-    if (solutionFound == true) {
+    if (solutionFound === true) {
       break;
     }
   }
@@ -130,14 +129,13 @@ DataStep.prototype.setFirst = function(customRange) {
   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) {
+  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;
 };
 
@@ -168,7 +166,7 @@ DataStep.prototype.next = function() {
   this.current -= this.step;
 
   // safety mechanism: if current time is still unchanged, move to the end
-  if (this.current == prev) {
+  if (this.current === prev) {
     this.current = this._end;
   }
 };
@@ -234,10 +232,10 @@ DataStep.prototype.getCurrent = function(decimals) {
     if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) {
       // If no decimal is specified, and there are decimal places, remove trailing zeros
       for (var i = toPrecision.length - 1; i > 0; i--) {
-        if (toPrecision[i] == "0") {
+        if (toPrecision[i] === "0") {
           toPrecision = toPrecision.slice(0, i);
         }
-        else if (toPrecision[i] == "." || toPrecision[i] == ",") {
+        else if (toPrecision[i] === "." || toPrecision[i] === ",") {
           toPrecision = toPrecision.slice(0, i);
           break;
         }
@@ -257,7 +255,21 @@ DataStep.prototype.getCurrent = function(decimals) {
  * @return {boolean} true if current date is major, else false.
  */
 DataStep.prototype.isMajor = function() {
-  return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
+  return (this.current % (this.scale * this.majorSteps[this.stepIndex]) === 0);
 };
 
+
+DataStep.prototype.shift = function(steps) {
+  if (steps < 0) {
+    for (let i = 0; i < -steps; i++) {
+      this.previous();
+    }
+  }
+  else if (steps > 0) {
+    for (let i = 0; i < steps; i++) {
+      this.next();
+    }
+  }
+}
+
 module.exports = DataStep;

lib/timeline/component/DataAxis.js

@@ -67,6 +67,7 @@ function DataAxis (body, options, svg, linegraphOptions) {
   this.stepPixels = 25;
   this.stepPixelsForced = 25;
   this.zeroCrossing = -1;
+  this.amountOfSteps = -1;
 
   this.lineOffset = 0;
   this.master = true;
@@ -135,7 +136,7 @@ DataAxis.prototype.setOptions = function (options) {
 
     this.minWidth = Number(('' + this.options.width).replace("px",""));
 
-    if (redraw == true && this.dom.frame) {
+    if (redraw === true && this.dom.frame) {
       this.hide();
       this.show();
     }
@@ -175,19 +176,23 @@ DataAxis.prototype._redrawGroupIcons = function () {
   var iconOffset = 4;
   var y = iconOffset + 0.5 * iconHeight;
 
-  if (this.options.orientation == 'left') {
+  if (this.options.orientation === 'left') {
     x = iconOffset;
   }
   else {
     x = this.width - iconWidth - iconOffset;
   }
 
-  for (var groupId in this.groups) {
-    if (this.groups.hasOwnProperty(groupId)) {
-      if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
-        this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
-        y += iconHeight + iconOffset;
-      }
+  var groupArray = Object.keys(this.groups);
+  groupArray.sort(function (a,b) {
+    return (a < b ? -1 : 1);
+  })
+
+  for (var i = 0; i < groupArray.length; i++) {
+    var groupId = groupArray[i];
+    if (this.groups[groupId].visible === true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] === true)) {
+      this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+      y += iconHeight + iconOffset;
     }
   }
 
@@ -196,7 +201,7 @@ DataAxis.prototype._redrawGroupIcons = function () {
 };
 
 DataAxis.prototype._cleanupIcons = function() {
-  if (this.iconsRemoved == false) {
+  if (this.iconsRemoved === false) {
     DOMutil.prepareElements(this.svgElements);
     DOMutil.cleanupElements(this.svgElements);
     this.iconsRemoved = true;
@@ -209,7 +214,7 @@ DataAxis.prototype._cleanupIcons = function() {
 DataAxis.prototype.show = function() {
   this.hidden = false;
   if (!this.dom.frame.parentNode) {
-    if (this.options.orientation == 'left') {
+    if (this.options.orientation === 'left') {
       this.body.dom.left.appendChild(this.dom.frame);
     }
     else {
@@ -243,7 +248,7 @@ DataAxis.prototype.hide = function() {
  * @param end
  */
 DataAxis.prototype.setRange = function (start, end) {
-  if (this.master == false && this.options.alignZeros == true && this.zeroCrossing != -1) {
+  if (this.master === false && this.options.alignZeros === true && this.zeroCrossing != -1) {
     if (start > 0) {
       start = 0;
     }
@@ -265,12 +270,12 @@ DataAxis.prototype.redraw = function () {
 
   for (var groupId in this.groups) {
     if (this.groups.hasOwnProperty(groupId)) {
-      if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+      if (this.groups[groupId].visible === true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] === true)) {
         activeGroups++;
       }
     }
   }
-  if (this.amountOfGroups == 0 || activeGroups == 0) {
+  if (this.amountOfGroups === 0 || activeGroups === 0) {
     this.hide();
   }
   else {
@@ -279,7 +284,7 @@ DataAxis.prototype.redraw = function () {
 
     // svg offsetheight did not work in firefox and explorer...
     this.dom.lineContainer.style.height = this.height + 'px';
-    this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
+    this.width = this.options.visible === true ? Number(('' + this.options.width).replace("px","")) : 0;
 
     var props = this.props;
     var frame = this.dom.frame;
@@ -304,7 +309,7 @@ DataAxis.prototype.redraw = function () {
     props.majorLineHeight = 1;
 
     //  take frame offline while updating (is almost twice as fast)
-    if (orientation == 'left') {
+    if (orientation === 'left') {
       frame.style.top = '0';
       frame.style.left = '0';
       frame.style.bottom = '';
@@ -326,7 +331,7 @@ DataAxis.prototype.redraw = function () {
     resized = this._redrawLabels();
     resized = this._isResized() || resized;
 
-    if (this.options.icons == true) {
+    if (this.options.icons === true) {
       this._redrawGroupIcons();
     }
     else {
@@ -346,60 +351,64 @@ DataAxis.prototype._redrawLabels = function () {
   var resized = false;
   DOMutil.prepareElements(this.DOMelements.lines);
   DOMutil.prepareElements(this.DOMelements.labels);
-
   var orientation = this.options['orientation'];
 
-  // 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;
+  // get the range for the slaved axis
+  var step;
+  if (this.master === false) {
+    var stepSize, rangeStart, rangeEnd, minimumStep;
+    if (this.zeroCrossing !== -1 && this.options.alignZeros === true) {
+      if (this.range.end > 0) {
+        stepSize = this.range.end / this.zeroCrossing; // size of one step
+        rangeStart = this.range.end - this.amountOfSteps * stepSize;
+        rangeEnd = this.range.end;
+      }
+      else {
+        // all of the range (including start) has to be done before the zero crossing.
+        stepSize = -1 * this.range.start / (this.amountOfSteps - this.zeroCrossing); // absolute size of a step
+        rangeStart = this.range.start;
+        rangeEnd = this.range.start + stepSize * this.amountOfSteps;
+      }
+    }
+    else {
+      rangeStart = this.range.start;
+      rangeEnd = this.range.end;
+    }
+    minimumStep = this.stepPixels;
+  }
+  else {
+    // calculate range and step (step such that we have space for 7 characters per label)
+    minimumStep = this.props.majorCharHeight;
+    rangeStart = this.range.start;
+    rangeEnd = this.range.end;
+  }
 
-  var step = new DataStep(
-    this.range.start,
-    this.range.end,
+  this.step = step = new DataStep(
+    rangeStart,
+    rangeEnd,
     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.master === false && this.options.alignZeros       // does 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);
-    for (var i = 0; i < 0.5 * stepDifference; i++) {
-      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();}
-      }
-    }
+  if (this.master === true) {
+    this.stepPixels = ((this.dom.frame.offsetHeight) / step.marginRange) * step.step;
+    this.amountOfSteps = Math.ceil(this.dom.frame.offsetHeight / this.stepPixels);
   }
   else {
-    amountOfSteps += 0.25;
+    // align with zero
+    if (this.options.alignZeros === true && this.zeroCrossing !== -1) {
+      // distance is the amount of steps away from the zero crossing we are.
+      let distance = (step.current - this.zeroCrossing * step.step) / step.step;
+      this.step.shift(distance);
+    }
   }
 
-
-  this.valueAtZero = step.marginEnd;
-  var marginStartPos = 0;
-
-  // do not draw the first label
-  var max = 1;
+  // value at the bottom of the SVG
+  this.valueAtBottom = step.marginEnd;
 
   // Get the number of decimal places
   var decimals;
@@ -408,51 +417,55 @@ DataAxis.prototype._redrawLabels = function () {
   }
 
   this.maxLabelSize = 0;
-  var y = 0;
-  while (max < Math.round(amountOfSteps)) {
-    step.next();
-    y = Math.round(max * stepPixels);
-    marginStartPos = max * stepPixels;
-    var isMajor = step.isMajor();
-
-    if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
-      this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
-    }
+  var y = 0;            // init value
+  var stepIndex = 0;    // init value
+  var isMajor = false;  // init value
+  while (stepIndex < this.amountOfSteps) {
+    y = Math.round(stepIndex * this.stepPixels);
+    isMajor = step.isMajor();
+
+    if (stepIndex > 0 && stepIndex !== this.amountOfSteps) {
+      if (this.options['showMinorLabels'] && isMajor === false || this.master === false && this.options['showMinorLabels'] === true) {
+        this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
+      }
 
-    if (isMajor && this.options['showMajorLabels'] && this.master == true ||
-        this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
-      if (y >= 0) {
-        this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
+      if (isMajor && this.options['showMajorLabels'] && this.master === true ||
+        this.options['showMinorLabels'] === false && this.master === false && isMajor === true) {
+        if (y >= 0) {
+          this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
+        }
+        this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
+      }
+      else {
+        this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
       }
-      this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
-    }
-    else {
-      this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
     }
 
-    if (this.master == true && step.current == 0) {
-      this.zeroCrossing = max;
+    // get zero crossing
+    if (this.master === true && step.current === 0) {
+      this.zeroCrossing = stepIndex;
     }
 
-    max++;
+    step.next();
+    stepIndex += 1;
   }
 
-  if (this.master == false) {
-    this.conversionFactor = y / (this.valueAtZero - step.current);
-  }
-  else {
-    this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
+  // get zero crossing if it's the last step
+  if (this.master === true && step.current === 0) {
+    this.zeroCrossing = stepIndex;
   }
 
+  this.conversionFactor = this.stepPixels / step.step;
+
   // Note that title is rotated, so we're using the height, not width!
   var titleWidth = 0;
   if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
     titleWidth = this.props.titleCharHeight;
   }
-  var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
+  var offset = this.options.icons === true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
 
   // this will resize the yAxis to accommodate the labels.
-  if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
+  if (this.maxLabelSize > (this.width - offset) && this.options.visible === true) {
     this.width = this.maxLabelSize + offset;
     this.options.width = this.width + "px";
     DOMutil.cleanupElements(this.DOMelements.lines);
@@ -461,7 +474,7 @@ DataAxis.prototype._redrawLabels = function () {
     resized = true;
   }
   // this will resize the yAxis if it is too big for the labels.
-  else if (this.maxLabelSize < (this.width - offset) && this.options.visible == true && this.width > this.minWidth) {
+  else if (this.maxLabelSize < (this.width - offset) && this.options.visible === true && this.width > this.minWidth) {
     this.width = Math.max(this.minWidth,this.maxLabelSize + offset);
     this.options.width = this.width + "px";
     DOMutil.cleanupElements(this.DOMelements.lines);
@@ -479,13 +492,13 @@ DataAxis.prototype._redrawLabels = function () {
 };
 
 DataAxis.prototype.convertValue = function (value) {
-  var invertedValue = this.valueAtZero - value;
+  var invertedValue = this.valueAtBottom - value;
   var convertedValue = invertedValue * this.conversionFactor;
   return convertedValue;
 };
 
 DataAxis.prototype.screenToValue = function (x) {
-  return this.valueAtZero - (x / this.conversionFactor);
+  return this.valueAtBottom - (x / this.conversionFactor);
 };
 
 /**
@@ -502,7 +515,7 @@ DataAxis.prototype._redrawLabel = function (y, text, orientation, className, cha
   var label = DOMutil.getDOMElement('div',this.DOMelements.labels, this.dom.frame); //this.dom.redundant.labels.shift();
   label.className = className;
   label.innerHTML = text;
-  if (orientation == 'left') {
+  if (orientation === 'left') {
     label.style.left = '-' + this.options.labelOffsetX + 'px';
     label.style.textAlign = "right";
   }
@@ -530,12 +543,12 @@ DataAxis.prototype._redrawLabel = function (y, text, orientation, className, cha
  * @param width
  */
 DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
-  if (this.master == true) {
+  if (this.master === true) {
     var line = DOMutil.getDOMElement('div',this.DOMelements.lines, this.dom.lineContainer);//this.dom.redundant.lines.shift();
     line.className = className;
     line.innerHTML = '';
 
-    if (orientation == 'left') {
+    if (orientation === 'left') {
       line.style.left = (this.width - offset) + 'px';
     }
     else {
@@ -566,7 +579,7 @@ DataAxis.prototype._redrawTitle = function (orientation) {
       util.addCssText(title, this.options.title[orientation].style);
     }
 
-    if (orientation == 'left') {
+    if (orientation === 'left') {
       title.style.left = this.props.titleCharHeight + 'px';
     }
     else {

lib/timeline/component/Legend.js

@@ -110,11 +110,15 @@ Legend.prototype.setOptions = function(options) {
 
 Legend.prototype.redraw = function() {
   var activeGroups = 0;
-  for (var groupId in this.groups) {
-    if (this.groups.hasOwnProperty(groupId)) {
-      if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
-        activeGroups++;
-      }
+  var groupArray = Object.keys(this.groups);
+  groupArray.sort(function (a,b) {
+    return (a < b ? -1 : 1);
+  })
+
+  for (var i = 0; i < groupArray.length; i++) {
+    var groupId = groupArray[i];
+    if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+      activeGroups++;
     }
   }
 
@@ -164,11 +168,10 @@ Legend.prototype.redraw = function() {
     }
 
     var content = '';
-    for (var groupId in this.groups) {
-      if (this.groups.hasOwnProperty(groupId)) {
-        if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
-          content += this.groups[groupId].content + '<br />';
-        }
+    for (var i = 0; i < groupArray.length; i++) {
+      var groupId = groupArray[i];
+      if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+        content += this.groups[groupId].content + '<br />';
       }
     }
     this.dom.textArea.innerHTML = content;
@@ -178,6 +181,11 @@ Legend.prototype.redraw = function() {
 
 Legend.prototype.drawLegendIcons = function() {
   if (this.dom.frame.parentNode) {
+    var groupArray = Object.keys(this.groups);
+    groupArray.sort(function (a,b) {
+      return (a < b ? -1 : 1);
+    })
+
     DOMutil.prepareElements(this.svgElements);
     var padding = window.getComputedStyle(this.dom.frame).paddingTop;
     var iconOffset = Number(padding.replace('px',''));
@@ -188,12 +196,11 @@ Legend.prototype.drawLegendIcons = function() {
 
     this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
 
-    for (var groupId in this.groups) {
-      if (this.groups.hasOwnProperty(groupId)) {
-        if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
-          this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
-          y += iconHeight + this.options.iconSpacing;
-        }
+    for (var i = 0; i < groupArray.length; i++) {
+      var groupId = groupArray[i];
+      if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+        this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+        y += iconHeight + this.options.iconSpacing;
       }
     }
 

lib/timeline/component/LineGraph.js

@@ -575,6 +575,7 @@ LineGraph.prototype.redraw = function(forceGraphUpdate) {
 
   // update the height of the graph on each redraw of the graph.
   if (this.updateSVGheight == true) {
+    console.log(this.options.graphHeight, this.body.domProps.centerContainer.height)
     if (this.options.graphHeight != this.body.domProps.centerContainer.height + 'px') {
       this.options.graphHeight = this.body.domProps.centerContainer.height + 'px';
       this.svg.style.height = this.body.domProps.centerContainer.height + 'px';
@@ -890,8 +891,9 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
     else                        {this.yAxisLeft.lineOffset = 0;}
 
     resized = this.yAxisLeft.redraw() || resized;
-    this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
+    this.yAxisRight.stepPixels = this.yAxisLeft.stepPixels;
     this.yAxisRight.zeroCrossing = this.yAxisLeft.zeroCrossing;
+    this.yAxisRight.amountOfSteps = this.yAxisLeft.amountOfSteps;
     resized = this.yAxisRight.redraw() || resized;
   }
   else {

lib/timeline/component/graph2d_types/bar.js

@@ -49,8 +49,8 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
   // combine all barchart data
   for (i = 0; i < groupIds.length; i++) {
     group = framework.groups[groupIds[i]];
-    if (group.options.style == 'bar') {
-      if (group.visible == true && (framework.options.groups.visibility[groupIds[i]] === undefined || framework.options.groups.visibility[groupIds[i]] == true)) {
+    if (group.options.style === 'bar') {
+      if (group.visible === true && (framework.options.groups.visibility[groupIds[i]] === undefined || framework.options.groups.visibility[groupIds[i]] === true)) {
         for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
           combinedData.push({
             x: processedGroupData[groupIds[i]][j].x,
@@ -64,13 +64,14 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
     }
   }
 
-  if (barPoints == 0) {return;}
+  if (barPoints === 0) {return;}
 
   // sort by time and by group
   combinedData.sort(function (a, b) {
-    if (a.x == b.x) {
-      return a.groupId - b.groupId;
-    } else {
+    if (a.x === b.x) {
+      return a.groupId < b.groupId ? -1 : 1;
+    }
+    else {
       return a.x - b.x;
     }
   });
@@ -98,20 +99,20 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
       drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
       intersections[key].resolved += 1;
 
-      if (group.options.barChart.handleOverlap == 'stack') {
+      if (group.options.barChart.handleOverlap === 'stack') {
         heightOffset = intersections[key].accumulated;
         intersections[key].accumulated += group.zeroPosition - combinedData[i].y;
       }
-      else if (group.options.barChart.handleOverlap == 'sideBySide') {
+      else if (group.options.barChart.handleOverlap === 'sideBySide') {
         drawData.width = drawData.width / intersections[key].amount;
         drawData.offset += (intersections[key].resolved) * drawData.width - (0.5*drawData.width * (intersections[key].amount+1));
-        if (group.options.barChart.align == 'left')       {drawData.offset -= 0.5*drawData.width;}
-        else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
+        if (group.options.barChart.align === 'left')       {drawData.offset -= 0.5*drawData.width;}
+        else if (group.options.barChart.align === 'right') {drawData.offset += 0.5*drawData.width;}
       }
     }
     DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' vis-bar', framework.svgElements, framework.svg);
     // draw points
-    if (group.options.drawPoints.enabled == true) {
+    if (group.options.drawPoints.enabled === true) {
       Points.draw([combinedData[i]], group, framework, drawData.offset);
       //DOMutil.drawPoint(combinedData[i].x + drawData.offset, combinedData[i].y, group, framework.svgElements, framework.svg);
     }
@@ -135,7 +136,7 @@ Bargraph._getDataIntersections = function (intersections, combinedData) {
     if (i > 0) {
       coreDistance = Math.min(coreDistance, Math.abs(combinedData[i - 1].x - combinedData[i].x));
     }
-    if (coreDistance == 0) {
+    if (coreDistance === 0) {
       if (intersections[combinedData[i].x] === undefined) {
         intersections[combinedData[i].x] = {amount: 0, resolved: 0, accumulated: 0};
       }
@@ -160,10 +161,10 @@ Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) {
     width = coreDistance < minWidth ? minWidth : coreDistance;
 
     offset = 0; // recalculate offset with the new width;
-    if (group.options.barChart.align == 'left') {
+    if (group.options.barChart.align === 'left') {
       offset -= 0.5 * coreDistance;
     }
-    else if (group.options.barChart.align == 'right') {
+    else if (group.options.barChart.align === 'right') {
       offset += 0.5 * coreDistance;
     }
   }
@@ -171,10 +172,10 @@ Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) {
     // default settings
     width = group.options.barChart.width;
     offset = 0;
-    if (group.options.barChart.align == 'left') {
+    if (group.options.barChart.align === 'left') {
       offset -= 0.5 * group.options.barChart.width;
     }
-    else if (group.options.barChart.align == 'right') {
+    else if (group.options.barChart.align === 'right') {
       offset += 0.5 * group.options.barChart.width;
     }
   }
@@ -186,9 +187,10 @@ Bargraph.getStackedBarYRange = function(barCombinedData, groupRanges, groupIds,
   if (barCombinedData.length > 0) {
     // sort by time and by group
     barCombinedData.sort(function (a, b) {
-      if (a.x == b.x) {
-        return a.groupId - b.groupId;
-      } else {
+      if (a.x === b.x) {
+        return a.groupId < b.groupId ? -1 : 1;
+      } 
+      else {
         return a.x - b.x;
       }
     });