Fixed #665, fixed #149: Implemented orientation option `'both'`, displaying a time axis both on top and bottom.

HISTORY.md

@@ -18,6 +18,8 @@ http://visjs.org
 
 ### Timeline
 
+- Implemented orientation option `'both'`, displaying a time axis both on top
+  and bottom (#665).
 - Fixed not property initializing with a DataView for groups.
 - Merged add custom timebar functionality, thanks @aytech!
 - Fixed #664: end of item not restored when canceling a move event.

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 3.10.1-SNAPSHOT
- * @date    2015-03-02
+ * @date    2015-03-03
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -6504,7 +6504,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
       autoResize: true,
 
-      orientation: 'bottom',
+      orientation: 'bottom', // 'bottom', 'top', or 'both'
       width: null,
       height: null,
       maxHeight: null,
@@ -6549,6 +6549,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
     // time axis
     this.timeAxis = new TimeAxis(this.body);
+    this.timeAxis2 = null; // used in case of orientation option 'both'
     this.components.push(this.timeAxis);
 
     // current time bar
@@ -22503,6 +22504,7 @@ return /******/ (function(modules) { // webpackBootstrap
   var DataView = __webpack_require__(4);
   var Range = __webpack_require__(17);
   var ItemSet = __webpack_require__(32);
+  var TimeAxis = __webpack_require__(35);
   var Activator = __webpack_require__(53);
   var DateUtil = __webpack_require__(15);
   var CustomTime = __webpack_require__(27);
@@ -22690,6 +22692,28 @@ return /******/ (function(modules) { // webpackBootstrap
       var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes', 'hiddenDates'];
       util.selectiveExtend(fields, this.options, options);
 
+      if (this.options.orientation === 'both') {
+        if (!this.timeAxis2) {
+          var timeAxis2 = this.timeAxis2 = new TimeAxis(this.body);
+          timeAxis2.setOptions = function (options) {
+            var _options = options ? util.extend({}, options) : {};
+            _options.orientation = 'top'; // override the orientation option, always top
+            TimeAxis.prototype.setOptions.call(timeAxis2, _options);
+          };
+          this.components.push(timeAxis2);
+        }
+      }
+      else {
+        if (this.timeAxis2) {
+          var index = this.components.indexOf(this.timeAxis2);
+          if (index !== -1) {
+            this.components.splice(index, 1);
+          }
+          this.timeAxis2.destroy();
+          this.timeAxis2 = null;
+        }
+      }
+
       if ('hiddenDates' in this.options) {
         DateUtil.convertHiddenOptions(this.body, this.options.hiddenDates);
       }

docs/graph2d.html

@@ -678,7 +678,7 @@ The options colored in green can also be used as options for the groups. All opt
     <td>orientation</td>
     <td>String</td>
     <td>'bottom'</td>
-    <td>Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top.</td>
+    <td>Orientation of the timeline: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
   </tr>
 
   <tr>

docs/timeline.html

@@ -681,7 +681,7 @@ var options = {
     <td>orientation</td>
     <td>String</td>
     <td>'bottom'</td>
-    <td>Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top.</td>
+    <td>Orientation of the timeline: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
 </tr>
 
 <tr>

lib/timeline/Core.js

@@ -5,6 +5,7 @@ var DataSet = require('../DataSet');
 var DataView = require('../DataView');
 var Range = require('./Range');
 var ItemSet = require('./component/ItemSet');
+var TimeAxis = require('./component/TimeAxis');
 var Activator = require('../shared/Activator');
 var DateUtil = require('./DateUtil');
 var CustomTime = require('./component/CustomTime');
@@ -192,6 +193,28 @@ Core.prototype.setOptions = function (options) {
     var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes', 'hiddenDates'];
     util.selectiveExtend(fields, this.options, options);
 
+    if (this.options.orientation === 'both') {
+      if (!this.timeAxis2) {
+        var timeAxis2 = this.timeAxis2 = new TimeAxis(this.body);
+        timeAxis2.setOptions = function (options) {
+          var _options = options ? util.extend({}, options) : {};
+          _options.orientation = 'top'; // override the orientation option, always top
+          TimeAxis.prototype.setOptions.call(timeAxis2, _options);
+        };
+        this.components.push(timeAxis2);
+      }
+    }
+    else {
+      if (this.timeAxis2) {
+        var index = this.components.indexOf(this.timeAxis2);
+        if (index !== -1) {
+          this.components.splice(index, 1);
+        }
+        this.timeAxis2.destroy();
+        this.timeAxis2 = null;
+      }
+    }
+
     if ('hiddenDates' in this.options) {
       DateUtil.convertHiddenOptions(this.body, this.options.hiddenDates);
     }

lib/timeline/Timeline.js

@@ -38,7 +38,7 @@ function Timeline (container, items, groups, options) {
 
     autoResize: true,
 
-    orientation: 'bottom',
+    orientation: 'bottom', // 'bottom', 'top', or 'both'
     width: null,
     height: null,
     maxHeight: null,
@@ -83,6 +83,7 @@ function Timeline (container, items, groups, options) {
 
   // time axis
   this.timeAxis = new TimeAxis(this.body);
+  this.timeAxis2 = null; // used in case of orientation option 'both'
   this.components.push(this.timeAxis);
 
   // current time bar

test/timeline.html

@@ -102,6 +102,7 @@
   var options = {
     editable: true,
     //orientation: 'top',
+    orientation: 'both',
     start: now.clone().add(-7, 'days'),
     end: now.clone().add(7, 'days'),
     //maxHeight: 200,