Fixed #590: implemented options to set a fixed scale

HISTORY.md

@@ -9,6 +9,11 @@ http://visjs.org
 - Added property `length` holding the total number of items to the `DataSet`
   and `DataView`.
 
+### Timeline
+
+- Implemented option `timeAxis: {scale: string, step: number}` to set a
+  fixed scale.
+
 
 ## 2015-01-16, version 3.9.1
 

docs/graph2d.html

@@ -737,6 +737,22 @@ The options colored in green can also be used as options for the groups. All opt
       If not provided, the earliest date present in the events is taken as start date.</td>
   </tr>
 
+  <tr>
+    <td>timeAxis.scale</td>
+    <td>string</td>
+    <td>none</td>
+    <td>Set a fixed scale for the time axis of the Timeline. Choose from <code>'millisecond'</code>, <code>'second'</code>, <code>'minute'</code>, <code>'hour'</code>, <code>'weekday'</code>, <code>'day'</code>, <code>'month'</code>, <code>'year'</code>.</td>
+  </tr>
+
+  <tr>
+    <td>timeAxis.step</td>
+    <td>number</td>
+    <td>1</td>
+    <td>
+      Set a fixed step size for the time axis. Only applicable when used together with <code>timeAxis.scale</code>.
+      Choose for example 1, 2, 5, or 10.</td>
+  </tr>
+
   <tr>
     <td>width</td>
     <td>String</td>

docs/timeline.html

@@ -764,6 +764,26 @@ var options = {
     <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
 </tr>
 
+<tr>
+  <td>timeAxis.scale</td>
+  <td>string</td>
+  <td>none</td>
+  <td>Set a fixed scale for the time axis of the Timeline. Choose from <code>'millisecond'</code>, <code>'second'</code>, <code>'minute'</code>, <code>'hour'</code>, <code>'weekday'</code>, <code>'day'</code>, <code>'month'</code>, <code>'year'</code>. Example usage:
+  <pre class="prettyprint lang-js">var options = {
+  timeAxis: {scale: 'minute', step: 5}
+}</pre>
+  </td>
+</tr>
+
+<tr>
+    <td>timeAxis.step</td>
+    <td>number</td>
+    <td>1</td>
+    <td>
+      Set a fixed step size for the time axis. Only applicable when used together with <code>timeAxis.scale</code>.
+      Choose for example 1, 2, 5, or 10.</td>
+</tr>
+
 <tr>
     <td>type</td>
     <td>String</td>

lib/timeline/TimeStep.js

@@ -240,23 +240,22 @@ TimeStep.prototype.getCurrent = function() {
 
 /**
  * Set a custom scale. Autoscaling will be disabled.
- * For example setScale(SCALE.MINUTES, 5) will result
+ * For example setScale('minute', 5) will result
  * in minor steps of 5 minutes, and major steps of an hour.
  *
- * @param {string} newScale
- *                               A scale. Choose from 'millisecond, 'second,
- *                               'minute', 'hour', 'weekday, 'day, 'month, 'year'.
- * @param {Number}     newStep   A step size, by default 1. Choose for
- *                               example 1, 2, 5, or 10.
+ * @param {{scale: string, step: number}} params
+ *                               An object containing two properties:
+ *                               - A string 'scale'. Choose from 'millisecond', 'second',
+ *                                 'minute', 'hour', 'weekday, 'day, 'month, 'year'.
+ *                               - A number 'step'. A step size, by default 1.
+ *                                 Choose for example 1, 2, 5, or 10.
  */
-TimeStep.prototype.setScale = function(newScale, newStep) {
-  this.scale = newScale;
-
-  if (newStep > 0) {
-    this.step = newStep;
+TimeStep.prototype.setScale = function(params) {
+  if (params && typeof params.scale == 'string') {
+    this.scale = params.scale;
+    this.step = params.step > 0 ? params.step : 1;
+    this.autoScale = false;
   }
-
-  this.autoScale = false;
 };
 
 /**

lib/timeline/component/TimeAxis.js

@@ -38,7 +38,8 @@ function TimeAxis (body, options) {
     // TODO: implement timeaxis orientations 'left' and 'right'
     showMinorLabels: true,
     showMajorLabels: true,
-    format: null
+    format: null,
+    timeAxis: null
   };
   this.options = util.extend({}, this.defaultOptions);
 
@@ -68,7 +69,8 @@ TimeAxis.prototype.setOptions = function(options) {
       'showMinorLabels',
       'showMajorLabels',
       'hiddenDates',
-      'format'
+      'format',
+      'timeAxis'
     ], this.options, options);
 
     // apply locale to moment.js
@@ -190,6 +192,9 @@ TimeAxis.prototype._repaintLabels = function () {
   if (this.options.format) {
     step.setFormat(this.options.format);
   }
+  if (this.options.timeAxis) {
+    step.setScale(this.options.timeAxis);
+  }
   this.step = step;
 
   // Move all DOM elements to a "redundant" list, where they

test/timeline.html

@@ -118,6 +118,10 @@
         'hour':       'dddd D MMMM'
       }
     }
+//    timeAxis: {
+//      scale: 'hour',
+//      step: 2
+//    }
     //clickToUse: true,
     //min: moment('2013-01-01'),
     //max: moment('2013-12-31'),