resize automatically
authorDan Vanderkam <dan@dygraphs.com>
Wed, 27 Jul 2011 07:14:43 +0000 (03:14 -0400)
committerDan Vanderkam <dan@dygraphs.com>
Wed, 27 Jul 2011 07:14:43 +0000 (03:14 -0400)
dygraph.js
tests/resize.html

index a1f8c1c..dcc555c 100644 (file)
@@ -656,6 +656,12 @@ Dygraph.prototype.createInterface_ = function() {
 
   this.createStatusMessage_();
   this.createDragInterface_();
+
+  // Update when the window is resized.
+  // TODO(danvk): drop frames depending on complexity of the chart.
+  Dygraph.addEvent(window, 'resize', function(e) {
+    dygraph.resize();
+  });
 };
 
 /**
@@ -1904,6 +1910,10 @@ Dygraph.prototype.predraw_ = function() {
 
   // If the data or options have changed, then we'd better redraw.
   this.drawGraph_();
+
+  // This is used to determine whether to do various animations.
+  var end = new Date();
+  this.drawingTimeMs_ = (end - start);
 };
 
 /**
@@ -2990,9 +3000,8 @@ Dygraph.prototype.resize = function(width, height) {
     width = height = null;
   }
 
-  // TODO(danvk): there should be a clear() method.
-  this.maindiv_.innerHTML = "";
-  this.attrs_.labelsDiv = null;
+  var old_width = this.width_;
+  var old_height = this.height_;
 
   if (width) {
     this.maindiv_.style.width = width + "px";
@@ -3004,8 +3013,13 @@ Dygraph.prototype.resize = function(width, height) {
     this.height_ = this.maindiv_.offsetHeight;
   }
 
-  this.createInterface_();
-  this.predraw_();
+  if (old_width != this.width_ || old_height != this.height_) {
+    // TODO(danvk): there should be a clear() method.
+    this.maindiv_.innerHTML = "";
+    this.attrs_.labelsDiv = null;
+    this.createInterface_();
+    this.predraw_();
+  }
 
   this.resize_lock = false;
 };
index 2d2a02e..562fa9c 100644 (file)
 
     <script type="text/javascript" src="data.js"></script>
     <style type="text/css">
-    html, body {
-      height: 100%;
+    #div_g {
+      position: absolute;
+      left: 10px;
+      right: 10px;
+      top: 40px;
+      bottom: 10px;
     }
     </style>
   </head>
   <body>
-    <div id="div_g" style="width:95%; height:95%"></div>
+    <p>Resize the window. The dygraph will resize with it.</p>
+    <div id="div_g"></div>
 
     <script type="text/javascript">
       g = new Dygraph(
               errorBars: true
             }
           );
-
-      window.onresize = function() {
-        g.resize();
-      }
     </script>
   </body>
 </html>