projects / dygraphs.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 0987402)
Change DygraphLayout so it calculates the plot area when its requested
authorAdam Vartanian <flooey@gmail.com>
Fri, 16 Sep 2011 23:58:10 +0000 (19:58 -0400)
committerAdam Vartanian <flooey@gmail.com>
Fri, 16 Sep 2011 23:58:10 +0000 (19:58 -0400)
rather than at construction.  The layout is constructed before axis
information has been parsed, so it always assumes there's only one axis
and never learns otherwise.

Update test to show a border around the div bounding box.  Prior to the
fix, the second axis would clearly extend beyond the box.

dygraph-canvas.js patch | blob | blame | history
dygraph-layout.js patch | blob | blame | history
dygraph-range-selector.js patch | blob | blame | history
tests/two-axes.html patch | blob | blame | history

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index f4140e6..d4b088e 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -44,7 +44,7 @@ DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
   this.annotations = new Array();
   this.chartLabels = {};
 
-  this.area = layout.plotArea;
+  this.area = layout.getPlotArea();
   this.container.style.position = "relative";
   this.container.style.width = this.width + "px";
 
diff --git a/dygraph-layout.js b/dygraph-layout.js
index 915d235..5fd6e52 100644 (file)
--- a/dygraph-layout.js
+++ b/dygraph-layout.js
@@ -30,7 +30,6 @@ DygraphLayout = function(dygraph) {
   this.datasets = new Array();
   this.annotations = new Array();
   this.yAxes_ = null;
-  this.plotArea = this.computePlotArea_();
 
   // TODO(danvk): it's odd that xTicks_ and yTicks_ are inputs, but xticks and
   // yticks are outputs. Clean this up.
@@ -46,6 +45,10 @@ DygraphLayout.prototype.addDataset = function(setname, set_xy) {
   this.datasets[setname] = set_xy;
 };
 
+DygraphLayout.prototype.getPlotArea = function() {
+  return this.computePlotArea_();
+}
+
 // Compute the box which the chart should be drawn in. This is the canvas's
 // box, less space needed for axis and chart labels.
 DygraphLayout.prototype.computePlotArea_ = function() {
diff --git a/dygraph-range-selector.js b/dygraph-range-selector.js
index 05a5c65..5e0d218 100644 (file)
--- a/dygraph-range-selector.js
+++ b/dygraph-range-selector.js
@@ -77,7 +77,7 @@ DygraphRangeSelector.prototype.resize_ = function() {
     canvas.style.height = canvas.height + 'px';  // for IE
   };
 
-  var plotArea = this.layout_.plotArea;
+  var plotArea = this.layout_.getPlotArea();
   var xAxisLabelHeight = this.attr_('axisLabelFontSize') + 2 * this.attr_('axisTickSize');
   this.canvasRect_ = {
     x: plotArea.x,
diff --git a/tests/two-axes.html b/tests/two-axes.html
index d1c876b..834fd2f 100644 (file)
--- a/tests/two-axes.html
+++ b/tests/two-axes.html
@@ -16,9 +16,9 @@
   <body>
     <h2>Multiple y-axes</h2>
     <p>The same data with both one and two y-axes. Two y-axes:</p>
-    <div id="demodiv"></div>
+    <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
     <p>A single y-axis:</p>
-    <div id="demodiv_one"></div>
+    <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
 
     <script type="text/javascript">
       var data = [];
@@ -41,8 +41,6 @@
           data,
           {
             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
-            width: 640,
-            height: 350,
             'Y3': {
               axis: {
               }
@@ -64,8 +62,6 @@
           data,
           {
             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
-            width: 640,
-            height: 350,
             labelsKMB: true
           }
       );
danvk/dygraphs fork supporting touch events