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();
+ });
};
/**
// 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);
};
/**
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";
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;
};
<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>