X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Frange-selector.html;h=7b412a01538bee3a6a244cbcd249e8dceb98bc1e;hb=77a1405a7dea7e9de770583598a50e5907e6b1a1;hp=a7d0c99ad7b60b8e43ecbece06e71645812ee5bb;hpb=a105b36aa566cc7b4198635af7ad36662ad5e30b;p=dygraphs.git

diff --git a/tests/range-selector.html b/tests/range-selector.html
index a7d0c99..7b412a0 100644
--- a/tests/range-selector.html
+++ b/tests/range-selector.html
@@ -25,6 +25,11 @@
       No roll period.
     </p>
     <div id="noroll" style="width:800px; height:320px;"></div>
+
+    <h2 id="options">Range selector options</h2>
+    <p>Here's a view of how the various <a href="../options.html#Range%20Selector">range selector options</a> affect the display:</p>
+    <img width="954" height="354" src="range-selector-anatomy.png">
+
     <p>
       Roll period of 14 timesteps, various custom range selector options.
     </p>
@@ -34,27 +39,7 @@
       The default behaviour is to compute the average of <em>all</em> series.
     </p>
     <div id="selectcombined" style="width:800px; height:320px;"></div>
-    <h2>Range selector options</h2>
-    <h3>Range selector background</h3>
-    <ul>
-      <li>rangeSelectorBackgroundStrokeColor</li>
-      <li>rangeSelectorBackgroundLineWidth</li>
-    </ul>
-    <img src="range-selector/range-selector-background.png">
-    <h3>Range selector foreground</h3>
-    <ul>
-      <li>rangeSelectorForegroundStrokeColor</li>
-      <li>rangeSelectorForegroundLineWidth</li>
-    </ul>
-    <img src="range-selector/range-selector-foreground.png">
-    <h3>Range selector plot</h3>
-    <ul>
-      <li>rangeSelectorAlpha</li>
-      <li>rangeSelectorPlotFillGradientColor</li>
-      <li>rangeSelectorPlotFillColor</li>
-      <li>rangeSelectorPlotStrokeColor</li>
-    </ul>
-    <img src="range-selector/range-selector-plot.png">
+
     <p>
       Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
     </p>
@@ -93,16 +78,16 @@
             labelsDivStyles: { 'textAlign': 'right' },
             xAxisHeight: 14,
             showRangeSelector: true,
-            rangeSelectorHeight: 30,
-            rangeSelectorPlotStrokeColor: 'yellow',
+            rangeSelectorHeight: 80,
+            rangeSelectorPlotStrokeColor: 'purple',
             rangeSelectorPlotFillColor: 'black',
-            rangeSelectorBackgroundStrokeColor: 'lightyellow',
+            rangeSelectorBackgroundStrokeColor: 'orange',
             rangeSelectorBackgroundLineWidth: 4,
-            rangeSelectorPlotLineWidth: 1.5,
+            rangeSelectorPlotLineWidth: 5,
             rangeSelectorForegroundStrokeColor: 'brown',
-            rangeSelectorForegroundLineWidth: 2,
-            rangeSelectorAlpha: 1,
-            rangeSelectorPlotFillGradientColor: 'yellow'
+            rangeSelectorForegroundLineWidth: 8,
+            rangeSelectorAlpha: 0.5,
+            rangeSelectorPlotFillGradientColor: 'red'
           }
       );
       g3 = new Dygraph(