Added customRange for graph2d Y axis

10 years ago · f62fa6d76e
--- a/HISTORY.md
+++ b/HISTORY.md
@ -20,6 +20,7 @@ http://visjs.org
 - Added 'slots' for groups when using barCharts.
 - Added 'allowOverlap' option for barCharts.
 - Added two examples showing the two additions above.
 - Added 'customRange' for the Y axis and an example showing how it works.


 ## 2014-08-14, version 3.2.0
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/dist/vis.map
+++ b/dist/vis.map
--- a/dist/vis.min.js
+++ b/dist/vis.min.js
--- a/examples/graph2d/12_customRange.html
+++ b/examples/graph2d/12_customRange.html
@ -0,0 +1,94 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Graph2d | Bar Graph Example</title>

    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }
    </style>

    <script src="../../dist/vis.js"></script>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Custom axis range</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
    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.

 <pre class="prettyprint lang-js">
 var options = {
    dataAxis: {
        customRange: {
            left: {
                min:-5, max:30
            },
            right: {
                min:-5
            }
        },
    }
 };
 </pre>
 </div>
 <br />

 <div id="visualization"></div>

 <script type="text/javascript">

    var container = document.getElementById('visualization');
    var groups = new vis.DataSet();
    groups.add({id: 0, content: "group0", options: {slots:{slot:1,total:3}}})
    groups.add({id: 1, content: "group1", options: {slots:{slot:2,total:3}}})
    groups.add({id: 2, content: "group2", options: {slots:{slot:3,total:3}, yAxisOrientation:'right'}})

    var items = [
        {x: '2014-06-11', y: 10, group:0},
        {x: '2014-06-12', y: 25, group:0},
        {x: '2014-06-13', y: 30, group:0},
        {x: '2014-06-14', y: 10, group:0},
        {x: '2014-06-15', y: 15, group:0},
        {x: '2014-06-16', y: 30, group:0},
        {x: '2014-06-11', y: 12, group:1},
        {x: '2014-06-12', y: 15, group:1},
        {x: '2014-06-13', y: 34, group:1},
        {x: '2014-06-14', y: 24, group:1},
        {x: '2014-06-15', y: 5, group:1},
        {x: '2014-06-16', y: 12, group:1},
        {x: '2014-06-11', y: 22, group:2},
        {x: '2014-06-12', y: 14, group:2},
        {x: '2014-06-13', y: 24, group:2},
        {x: '2014-06-14', y: 21, group:2},
        {x: '2014-06-15', y: 30, group:2},
        {x: '2014-06-16', y: 18, group:2}
    ];

    var dataset = new vis.DataSet(items);
    var options = {
        style:'bar',
        barChart: {width:50, align:'center'}, // align: left, center, right
        drawPoints: true,
        dataAxis: {
            customRange: {
                left: {
                    min:-5, max:30
                },
                right: {
                    min:-5
                }
            },
            icons:true
        },
        orientation:'top',
        start: '2014-06-10',
        end: '2014-06-18'
    };
    var graph2d = new vis.Graph2d(container, items, options,groups);

 </script>
 </body>
 </html>
--- a/examples/graph2d/index.html
+++ b/examples/graph2d/index.html
@ -18,6 +18,7 @@
  <p><a href="09_external_legend.html">09_external_legend.html</a></p>
  <p><a href="10_barsSideBySide.html">10_barsSideBySide.html</a></p>
  <p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p>
  <p><a href="12_customRange.html">12_customRange.html</a></p>

 </div>
 </body>
--- a/lib/timeline/DataStep.js
+++ b/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, forcedStepSize) {
 function DataStep(start, end, minimumStep, containerHeight, customRange) {
  // variables
  this.current = 0;

@ -35,11 +35,12 @@ function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {

  this.marginStart;
  this.marginEnd;
  this.deadSpace = 0;

  this.majorSteps = [1,     2,    5,  10];
  this.minorSteps = [0.25,  0.5,  1,  2];

  this.setRange(start, end, minimumStep, containerHeight, forcedStepSize);
  this.setRange(start, end, minimumStep, containerHeight, customRange);
 }


@ -54,9 +55,9 @@ function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
 * @param {Number} [end]        The end date and time.
 * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
 */
 DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, forcedStepSize) {
  this._start = start;
  this._end = end;
 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 (start == end) {
    this._start = start - 0.75;
@ -64,9 +65,9 @@ DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight,
  }

  if (this.autoScale) {
    this.setMinimumStep(minimumStep, containerHeight, forcedStepSize);
    this.setMinimumStep(minimumStep, containerHeight);
  }
  this.setFirst();
  this.setFirst(customRange);
 };

 /**
@ -76,7 +77,7 @@ DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight,
 DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
  // round to floor
  var size = this._end - this._start;
  var safeSize = size * 1.1;
  var safeSize = size * 1.2;
  var minimumStepValue = minimumStep * (safeSize / containerHeight);
  var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);

@ -109,23 +110,21 @@ DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
 };


 /**
 * Set the range iterator to the start date.
 */
 DataStep.prototype.first = function() {
  this.setFirst();
 };

 /**
 * Round the current date to the first minor date value
 * This must be executed once when the current date is set to start Date
 */
 DataStep.prototype.setFirst = function() {
  var niceStart = this._start - (this.scale * this.minorSteps[this.stepIndex]);
  var niceEnd = this._end + (this.scale * this.minorSteps[this.stepIndex]);
 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 = this.roundToMinor(niceEnd);
  this.marginStart = this.roundToMinor(niceStart);
  this.marginEnd = customRange.max === undefined ? this.roundToMinor(niceEnd) : customRange.max;
  this.marginStart = customRange.min === undefined ? this.roundToMinor(niceStart) : customRange.min;
  this.deadSpace = this.roundToMinor(niceEnd) - niceEnd + this.roundToMinor(niceStart) - niceStart;
  this.marginRange = this.marginEnd - this.marginStart;

  this.current = this.marginEnd;
--- a/lib/timeline/component/DataAxis.js
+++ b/lib/timeline/component/DataAxis.js
@ -26,7 +26,11 @@ function DataAxis (body, options, svg) {
    labelOffsetY: 2,
    iconWidth: 20,
    width: '40px',
    visible: true
    visible: true,
    customRange: {
      left: {min:undefined, max:undefined},
      right: {min:undefined, max:undefined}
    }
  };

  this.linegraphSVG = svg;
@ -102,7 +106,9 @@ DataAxis.prototype.setOptions = function (options) {
      'labelOffsetY',
      'iconWidth',
      'width',
      'visible'];
      'visible',
      'customRange'
    ];
    util.selectiveExtend(fields, this.options, options);

    this.minWidth = Number(('' + this.options.width).replace("px",""));
@ -289,11 +295,11 @@ 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);
  var step = new DataStep(this.range.start, this.range.end, minimumStep, this.dom.frame.offsetHeight, this.options.customRange[this.options.orientation]);
  this.step = step;
  step.first();
  // get the distance in pixels for a step
  var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
  // 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;
@ -301,12 +307,15 @@ DataAxis.prototype._redrawLabels = function () {

  if (this.master == false) {
    stepPixels = this.stepPixelsForced;
    stepDifference = Math.round((this.height / stepPixels) - amountOfSteps);
    stepDifference = Math.round((this.dom.frame.offsetHeight / stepPixels) - amountOfSteps);
    for (var i = 0; i < 0.5 * stepDifference; i++) {
      step.previous();
    }
    amountOfSteps = this.height / stepPixels;
  }
  else {
    amountOfSteps += 0.25;
  }


  this.valueAtZero = step.marginEnd;
@ -314,12 +323,11 @@ DataAxis.prototype._redrawLabels = function () {

  // do not draw the first label
  var max = 1;
  step.next();

  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();
@ -339,11 +347,15 @@ DataAxis.prototype._redrawLabels = function () {
      this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
    }

    step.next();
    max++;
  }

  this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
  if (this.master == false) {
    this.conversionFactor = y / (this.valueAtZero - step.current);
  }
  else {
    this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
  }

  var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
  // this will resize the yAxis to accomodate the labels.
@ -371,6 +383,12 @@ DataAxis.prototype._redrawLabels = function () {
  }
 };

 DataAxis.prototype.convertValue = function (value) {
  var invertedValue = this.valueAtZero - value;
  var convertedValue = invertedValue * this.conversionFactor;
  return convertedValue;
 };

 /**
 * Create a label for the axis at position x
 * @private
@ -431,11 +449,7 @@ DataAxis.prototype._redrawLine = function (y, orientation, className, offset, wi
 };


 DataAxis.prototype.convertValue = function (value) {
  var invertedValue = this.valueAtZero - value;
  var convertedValue = invertedValue * this.conversionFactor;
  return convertedValue; // the -2 is to compensate for the borders
 };



 /**
--- a/lib/timeline/component/LineGraph.js
+++ b/lib/timeline/component/LineGraph.js
@ -51,7 +51,11 @@ function LineGraph(body, options) {
      showMajorLabels: true,
      icons: false,
      width: '40px',
      visible: true
      visible: true,
      customRange: {
        left: {min:undefined, max:undefined},
        right: {min:undefined, max:undefined}
      }
    },
    legend: {
      enabled: false,