Merge branch 'master' of github.com:danvk/dygraphs

diff --git a/auto_tests/tests/range_selector.js b/auto_tests/tests/range_selector.js
index a27cad7..34e3574 100644 (file)
--- a/auto_tests/tests/range_selector.js
+++ b/auto_tests/tests/range_selector.js
@@ -318,6 +318,32 @@ RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() {
   assert(newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
 };
 
+
+RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = function() {
+  var opts = {
+    width: 480,
+    height: 100,
+    xAxisHeight: 30,
+    drawXAxis: false,
+    showRangeSelector: true,
+    rangeSelectorHeight: 30
+  };
+  var data = [
+               [0, 1],
+               [10, 1]
+             ];
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+  
+  //assert, that the range selector is at top position 70 since the 30px of the
+  // xAxis shouldn't be reserved since it isn't drawn.
+  this.assertGraphExistence(g, graph);
+  var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0];
+  assertEquals("Range selector is not at the expected position.","70px", bgcanvas.style.top);
+  var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
+  assertEquals("Range selector is not at the expected position.","70px", fgcanvas.style.top);
+};
+
 RangeSelectorTestCase.prototype.assertGraphExistence = function(g, graph) {
   assertNotNull(g);
   var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');

diff --git a/plugins/range-selector.js b/plugins/range-selector.js
index df8f867..d45a29a 100644 (file)
--- a/plugins/range-selector.js
+++ b/plugins/range-selector.js
@@ -176,7 +176,11 @@ rangeSelector.prototype.resize_ = function() {
   }
 
   var plotArea = this.dygraph_.layout_.getPlotArea();
-  var xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize'));
+  
+  var xAxisLabelHeight = 0;
+  if(this.getOption_('drawXAxis')){
+    xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize'));
+  }
   this.canvasRect_ = {
     x: plotArea.x,
     y: plotArea.y + plotArea.h + xAxisLabelHeight + 4,

diff --git a/tests/range-selector.html b/tests/range-selector.html
index 3ad6a26..74a38d6 100644 (file)
--- a/tests/range-selector.html
+++ b/tests/range-selector.html
@@ -29,6 +29,10 @@
       Roll period of 14 timesteps, custom range selector height and plot color.
     </p>
     <div id="roll14" style="width:800px; height:320px;"></div>
+    <p>
+      Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
+    </p>
+    <div id="nochart" style="width:800px; height:30px;"></div>
     <script type="text/javascript">
       g1 = new Dygraph(
           document.getElementById("noroll"),
@@ -60,6 +64,16 @@
             rangeSelectorPlotFillColor: 'lightyellow'
           }
       );
+      g3 = new Dygraph(
+          document.getElementById("nochart"),
+          [[0,1],[10,1]],
+          {
+            xAxisHeight: 30,
+            drawXAxis: false,
+            showRangeSelector: true,
+            rangeSelectorHeight: 30,
+          }
+      );
     </script>
   </body>
 </html>