From ec893065a6c33b80506dc72bbfe869e47cb3369f Mon Sep 17 00:00:00 2001
From: Ludo Stellingwerff <ludo@almende.org>
Date: Thu, 21 Jan 2016 12:43:56 +0100
Subject: [PATCH] Fixed #1580: Invisible timeline/graph should not be drawn, as
 most inputs are invalid Moved initial autoscale/fit method to an handler of
 the "changed" event.

---
 HISTORY.md               |  3 +++
 lib/timeline/Core.js     |  2 +-
 lib/timeline/Timeline.js | 41 ++++++++++++++++++++++------------------
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index d83e25e8..b384777c 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -17,11 +17,14 @@ http://visjs.org
 
 ### Timeline
 
+- Moved initial autoscale/fit method to an handler of the "changed" event.
+- Fixed #1580: Invisible timeline/graph should not be drawn, as most inputs are invalid
 - Fixed #1521: Prevent items from staying stuck to the left side of the viewport.
 - Fixed #1592: Emit a "changed" event after each redraw.
 
 ### Graph2d
 
+- Fixed #1580: Invisible timeline/graph should not be drawn, as most inputs are invalid
 - Fixed #1177: Fix custom range of slaved right axis.
 - Fixed #1592: Emit a "changed" event after each redraw.
 - Cleanup of linegraph's event handling.
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 8ea54f1b..fab24763 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -631,7 +631,7 @@ Core.prototype._redraw = function() {
   var props = this.props;
   var dom = this.dom;
 
-  if (!dom) return; // when destroyed
+  if (!dom|| !dom.container || dom.container.clientWidth == 0 ) return;// when destroyed, or invisible
 
   DateUtil.updateHiddenDates(this.options.moment, this.body, this.options.hiddenDates);
 
diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index 3c919d2e..90f14504 100644
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@@ -121,6 +121,28 @@ function Timeline (container, items, groups, options) {
     me.emit('contextmenu', me.getEventProperties(event))
   };
 
+  //Single time autoscale/fit
+  this.fitDone = false;
+  this.on('changed', function (){
+    if (this.itemsData == null) return;
+    if (!me.fitDone) {
+      me.fitDone = true;
+      if (me.options.start != undefined || me.options.end != undefined) {
+        if (me.options.start == undefined || me.options.end == undefined) {
+          var range = me.getItemRange();
+        }
+
+        var start = me.options.start != undefined ? me.options.start : range.min;
+        var end = me.options.end != undefined ? me.options.end : range.max;
+
+        me.setWindow(start, end, {animation: false});
+      }
+      else {
+        me.fit({animation: false});
+      }
+    }
+  });
+
   // apply options
   if (options) {
     this.setOptions(options);
@@ -194,8 +216,6 @@ Timeline.prototype.setOptions = function (options) {
  * @param {vis.DataSet | Array | null} items
  */
 Timeline.prototype.setItems = function(items) {
-  var initialLoad = (this.itemsData == null);
-
   // convert to type DataSet when needed
   var newDataSet;
   if (!items) {
@@ -218,23 +238,8 @@ Timeline.prototype.setItems = function(items) {
   this.itemsData = newDataSet;
   this.itemSet && this.itemSet.setItems(newDataSet);
 
-  this.body.emitter.emit("_change");
+  this.body.emitter.emit('_change', {queue: true});
 
-  if (initialLoad) {
-    if (this.options.start != undefined || this.options.end != undefined) {
-      if (this.options.start == undefined || this.options.end == undefined) {
-        var range = this.getItemRange();
-      }
-
-      var start = this.options.start != undefined ? this.options.start : range.min;
-      var end   = this.options.end != undefined   ? this.options.end   : range.max;
-
-      this.setWindow(start, end, {animation: false});
-    }
-    else {
-      this.fit({animation: false});
-    }
-  }
 };
 
 /**