auto scale yaxis

dist/vis.css

@@ -340,6 +340,16 @@
 }
 
 
+
+.vis.timeline .dataaxis .text.measure {
+    position: absolute;
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: 0;
+    margin-right: 0;
+    visibility: hidden;
+}
+
 .vis.timeline .dataaxis .yAxis.major {
     font-size:12px;
     width: 100%;

dist/vis.js

@@ -2640,7 +2640,8 @@ function Legend(body, options, linegraph) {
   this.body = body;
   this.linegraph = linegraph;
   this.defaultOptions = {
-    orientation: 'left' // left, right
+    orientation: 'left', // left, right
+    position: 'left'     // left, center, right
   }
 
   this.options = util.extend({},this.defaultOptions);
@@ -2806,7 +2807,8 @@ function DataAxis (body, options) {
     minorLinesOffset: 4,
     labelOffsetX: 9,
     labelOffsetY: -6,
-    width: '60px',
+    iconWidth: 20,
+    width: '40px',
     height: '300px'
   };
 
@@ -2869,7 +2871,17 @@ DataAxis.prototype.setOptions = function(options) {
     if (this.options.orientation != options.orientation && options.orientation !== undefined) {
       redraw = true;
     }
-    var fields = ['orientation','showMinorLabels','showMajorLabels','width','height'];
+    var fields = [
+      'orientation',
+      'showMinorLabels',
+      'showMajorLabels',
+      'majorLinesOffset',
+      'minorLinesOffset',
+      'labelOffsetX',
+      'labelOffsetY',
+      'iconWidth',
+      'width',
+      'height'];
     util.selectiveExtend(fields, this.options, options);
 
     if (redraw == true && this.dom.frame) {
@@ -2904,7 +2916,7 @@ DataAxis.prototype._create = function() {
 
 DataAxis.prototype._redrawGroupIcons = function() {
   var x;
-  var iconWidth = 20;
+  var iconWidth = this.options.iconWidth;
   var iconHeight = 15;
   var iconOffset = 4;
   var y = iconOffset + 0.5 * iconHeight;
@@ -2915,7 +2927,6 @@ DataAxis.prototype._redrawGroupIcons = function() {
     x = this.width - iconWidth - iconOffset;
   }
 
-
   for (var groupId in this.groups) {
     if (this.groups.hasOwnProperty(groupId)) {
       this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
@@ -2975,6 +2986,8 @@ DataAxis.prototype.redraw = function () {
   var props = this.props;
   var frame = this.dom.frame;
 
+
+
   // update classname
   frame.className = 'dataaxis';
 
@@ -3029,6 +3042,8 @@ DataAxis.prototype._redrawLabels = function () {
   var minimumStep = (this.props.minorCharHeight || 10); //in pixels
   var step = new DataStep(start, end, minimumStep, this.dom.frame.offsetHeight);
   this.step = step;
+  step.first();
+
 
   // Move all DOM elements to a "redundant" list, where they
   // can be picked for re-use, and clear the lists with lines and texts.
@@ -3039,7 +3054,6 @@ DataAxis.prototype._redrawLabels = function () {
   dom.lines = [];
   dom.labels = [];
 
-  step.first();
   var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
   this.stepPixels = stepPixels;
 
@@ -3063,14 +3077,15 @@ DataAxis.prototype._redrawLabels = function () {
   var max = 1;
   step.next();
 
+  this.maxLabelSize = 0;
   var y = 0;
-  while (max < amountOfSteps) {
+  while (max < Math.round(amountOfSteps)) {
     y = Math.round(max * stepPixels);
     marginStartPos = max * stepPixels;
     var isMajor = step.isMajor();
 
     if (this.options['showMinorLabels'] && isMajor == false) {
-      this._redrawLabel(y - 2, step.getLabelMinor(), orientation, 'yAxis minor');
+      this._redrawLabel(y - 2, step.current, orientation, 'yAxis minor');
     }
 
     if (isMajor && this.options['showMajorLabels']) {
@@ -3078,7 +3093,7 @@ DataAxis.prototype._redrawLabels = function () {
         if (xFirstMajorLabel == undefined) {
           xFirstMajorLabel = y;
         }
-        this._redrawLabel(y - 2, step.getLabelMajor(), orientation, 'yAxis major');
+        this._redrawLabel(y - 2, step.current, orientation, 'yAxis major');
       }
       this._redrawMajorLine(y, orientation);
     }
@@ -3090,6 +3105,16 @@ DataAxis.prototype._redrawLabels = function () {
     max++;
   }
 
+  var offset = this.drawIcons == true ? this.options.iconWidth + this.options.labelOffsetX : this.options.labelOffsetX;
+  if (this.maxLabelSize > (this.width - offset)) {
+    this.width = this.maxLabelSize + offset;
+    this.options.width = this.width + "px";
+    this.body.emitter.emit("changed");
+    this.redraw();
+    return;
+  }
+
+
   this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
 
   // Cleanup leftover DOM elements from the redundant list
@@ -3152,6 +3177,12 @@ DataAxis.prototype._redrawLabel = function (y, text, orientation, className) {
   }
 
   label.style.top = y + this.options.labelOffsetY + 'px';
+  text += '';
+
+  var largestWidth = this.props.majorCharWidth > this.props.minorCharWidth ? this.props.majorCharWidth : this.props.minorCharWidth;
+  if (this.maxLabelSize < text.length * largestWidth) {
+    this.maxLabelSize = text.length * largestWidth;
+  }
 };
 
 /**
@@ -3225,6 +3256,7 @@ DataAxis.prototype._redrawMajorLine = function (y, orientation) {
 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');
     measureCharMinor.className = 'text minor measure';
@@ -4085,6 +4117,7 @@ Linegraph.prototype._prepareData = function (dataset, options) {
   }
   for (var i = 0; i < dataset.length; i++) {
     xValue = toScreen(new Date(dataset[i].x)) + this.width;
+    console.log(dataset[i].x, new Date(dataset[i].x))
     yValue = axis.convertValue(dataset[i].y);
     extractedData.push({x: xValue, y: yValue});
   }

examples/graph2d/01_basic.html

@@ -51,7 +51,7 @@
         content: names[1],
         className: "graphGroup1",
         options: {
-            yAxisOrientation: 'right',
+//            yAxisOrientation: 'right',
             drawPoints: true, // square, circle
             shaded: {
                 orientation: 'top' // top, bottom
@@ -72,34 +72,34 @@
 
   var container = document.getElementById('visualization');
   var items = [
-    {x: '2014-06-11', y: 10000 },
-    {x: '2014-06-12', y: 25000 },
-    {x: '2014-06-13', y: 30000, group: 0},
-    {x: '2014-06-14', y: 10000, group: 0},
-    {x: '2014-06-15', y: 150000, group: 1},
-    {x: '2014-06-16', y: 300000, group: 1},
-    {x: '2014-06-17', y: 100, group: 1},
-    {x: '2014-06-18', y: 150, group: 1},
-    {x: '2014-06-19', y: 520, group: 1},
-    {x: '2014-06-20', y: 100, group: 1},
-    {x: '2014-06-21', y: 19, group: 2},
-    {x: '2014-06-22', y: 60, group: 2},
-    {x: '2014-06-23', y: 10, group: 2},
-    {x: '2014-06-24', y: 25, group: 2},
-    {x: '2014-06-25', y: 30, group: 2}
-//      {x: '2014-06-11', y: 10},
-//      {x: '2014-06-12', y: 25},
-//      {x: '2014-06-13', y: 30},
-//      {x: '2014-06-14', y: 10},
-//      {x: '2014-06-15', y: 15},
-//      {x: '2014-06-16', y: 30}
+//    {x: '2014-06-11', y: 10 },
+//    {x: '2014-06-12', y: 25 },
+//    {x: '2014-06-13', y: 30, group: 0},
+//    {x: '2014-06-14', y: 10, group: 0},
+//    {x: '2014-06-15', y: 15, group: 1},
+//    {x: '2014-06-16', y: 30, group: 1},
+//    {x: '2014-06-17', y: 100, group: 1},
+//    {x: '2014-06-18', y: 150, group: 1},
+//    {x: '2014-06-19', y: 520, group: 1},
+//    {x: '2014-06-20', y: 100, group: 1},
+//    {x: '2014-06-21', y: 19, group: 2},
+//    {x: '2014-06-22', y: 60, group: 2},
+//    {x: '2014-06-23', y: 10, group: 2},
+//    {x: '2014-06-24', y: 25, group: 2},
+//    {x: '2014-06-25', y: 30, group: 2}
+      {x: '2014-06-11', y: 10},
+      {x: '2014-06-12', y: 25},
+      {x: '2014-06-13', y: 30},
+      {x: '2014-06-14', y: 10},
+      {x: '2014-06-15', y: 15},
+      {x: '2014-06-16', y: 30}
   ];
 
   var dataset = new vis.DataSet(items);
-  var graph2d = new vis.Graph2d(container);
-    graph2d.setOptions(options);
-    graph2d.setGroups(groups);
-    graph2d.setItems(dataset);
+  var graph2d = new vis.Graph2d(container, items, {});
+//    graph2d.setOptions(options);
+//    graph2d.setGroups(groups);
+//    graph2d.setItems(items);
 
 </script>
 </body>

src/timeline/component/DataAxis.js

@@ -17,7 +17,8 @@ function DataAxis (body, options) {
     minorLinesOffset: 4,
     labelOffsetX: 9,
     labelOffsetY: -6,
-    width: '60px',
+    iconWidth: 20,
+    width: '40px',
     height: '300px'
   };
 
@@ -80,7 +81,17 @@ DataAxis.prototype.setOptions = function(options) {
     if (this.options.orientation != options.orientation && options.orientation !== undefined) {
       redraw = true;
     }
-    var fields = ['orientation','showMinorLabels','showMajorLabels','width','height'];
+    var fields = [
+      'orientation',
+      'showMinorLabels',
+      'showMajorLabels',
+      'majorLinesOffset',
+      'minorLinesOffset',
+      'labelOffsetX',
+      'labelOffsetY',
+      'iconWidth',
+      'width',
+      'height'];
     util.selectiveExtend(fields, this.options, options);
 
     if (redraw == true && this.dom.frame) {
@@ -115,7 +126,7 @@ DataAxis.prototype._create = function() {
 
 DataAxis.prototype._redrawGroupIcons = function() {
   var x;
-  var iconWidth = 20;
+  var iconWidth = this.options.iconWidth;
   var iconHeight = 15;
   var iconOffset = 4;
   var y = iconOffset + 0.5 * iconHeight;
@@ -126,7 +137,6 @@ DataAxis.prototype._redrawGroupIcons = function() {
     x = this.width - iconWidth - iconOffset;
   }
 
-
   for (var groupId in this.groups) {
     if (this.groups.hasOwnProperty(groupId)) {
       this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
@@ -186,6 +196,8 @@ DataAxis.prototype.redraw = function () {
   var props = this.props;
   var frame = this.dom.frame;
 
+
+
   // update classname
   frame.className = 'dataaxis';
 
@@ -240,6 +252,8 @@ DataAxis.prototype._redrawLabels = function () {
   var minimumStep = (this.props.minorCharHeight || 10); //in pixels
   var step = new DataStep(start, end, minimumStep, this.dom.frame.offsetHeight);
   this.step = step;
+  step.first();
+
 
   // Move all DOM elements to a "redundant" list, where they
   // can be picked for re-use, and clear the lists with lines and texts.
@@ -250,7 +264,6 @@ DataAxis.prototype._redrawLabels = function () {
   dom.lines = [];
   dom.labels = [];
 
-  step.first();
   var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
   this.stepPixels = stepPixels;
 
@@ -274,14 +287,15 @@ DataAxis.prototype._redrawLabels = function () {
   var max = 1;
   step.next();
 
+  this.maxLabelSize = 0;
   var y = 0;
-  while (max < amountOfSteps) {
+  while (max < Math.round(amountOfSteps)) {
     y = Math.round(max * stepPixels);
     marginStartPos = max * stepPixels;
     var isMajor = step.isMajor();
 
     if (this.options['showMinorLabels'] && isMajor == false) {
-      this._redrawLabel(y - 2, step.getLabelMinor(), orientation, 'yAxis minor');
+      this._redrawLabel(y - 2, step.current, orientation, 'yAxis minor');
     }
 
     if (isMajor && this.options['showMajorLabels']) {
@@ -289,7 +303,7 @@ DataAxis.prototype._redrawLabels = function () {
         if (xFirstMajorLabel == undefined) {
           xFirstMajorLabel = y;
         }
-        this._redrawLabel(y - 2, step.getLabelMajor(), orientation, 'yAxis major');
+        this._redrawLabel(y - 2, step.current, orientation, 'yAxis major');
       }
       this._redrawMajorLine(y, orientation);
     }
@@ -301,6 +315,16 @@ DataAxis.prototype._redrawLabels = function () {
     max++;
   }
 
+  var offset = this.drawIcons == true ? this.options.iconWidth + this.options.labelOffsetX : this.options.labelOffsetX;
+  if (this.maxLabelSize > (this.width - offset)) {
+    this.width = this.maxLabelSize + offset;
+    this.options.width = this.width + "px";
+    this.body.emitter.emit("changed");
+    this.redraw();
+    return;
+  }
+
+
   this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
 
   // Cleanup leftover DOM elements from the redundant list
@@ -363,6 +387,12 @@ DataAxis.prototype._redrawLabel = function (y, text, orientation, className) {
   }
 
   label.style.top = y + this.options.labelOffsetY + 'px';
+  text += '';
+
+  var largestWidth = this.props.majorCharWidth > this.props.minorCharWidth ? this.props.majorCharWidth : this.props.minorCharWidth;
+  if (this.maxLabelSize < text.length * largestWidth) {
+    this.maxLabelSize = text.length * largestWidth;
+  }
 };
 
 /**
@@ -436,6 +466,7 @@ DataAxis.prototype._redrawMajorLine = function (y, orientation) {
 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');
     measureCharMinor.className = 'text minor measure';

src/timeline/component/Legend.js

@@ -5,7 +5,8 @@ function Legend(body, options, linegraph) {
   this.body = body;
   this.linegraph = linegraph;
   this.defaultOptions = {
-    orientation: 'left' // left, right
+    orientation: 'left', // left, right
+    position: 'left'     // left, center, right
   }
 
   this.options = util.extend({},this.defaultOptions);

src/timeline/component/Linegraph.js

@@ -820,6 +820,7 @@ Linegraph.prototype._prepareData = function (dataset, options) {
   }
   for (var i = 0; i < dataset.length; i++) {
     xValue = toScreen(new Date(dataset[i].x)) + this.width;
+    console.log(dataset[i].x, new Date(dataset[i].x))
     yValue = axis.convertValue(dataset[i].y);
     extractedData.push({x: xValue, y: yValue});
   }

src/timeline/component/css/dataaxis.css

@@ -16,6 +16,16 @@
 }
 
 
+
+.vis.timeline .dataaxis .text.measure {
+    position: absolute;
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: 0;
+    margin-right: 0;
+    visibility: hidden;
+}
+
 .vis.timeline .dataaxis .yAxis.major {
     font-size:12px;
     width: 100%;