Merge pull request #548 from blcook223/range_sel_options

[dygraphs.git] / tests / range-selector.html
diff --git a/tests/range-selector.html b/tests/range-selector.html

index 24a7acf..a7d0c99 100644 (file)
--- a/tests/range-selector.html
+++ b/tests/range-selector.html
@@ -13,6 +13,10 @@
      #bordered {
        border: 1px solid red;
      }
+    #dark-background {
+      background-color: #101015;
+      color: white;
+    }
      </style>
    </head>
    <body>
@@ -22,7 +26,7 @@
      </p>
      <div id="noroll" style="width:800px; height:320px;"></div>
      <p>
-      Roll period of 14 timesteps, custom range selector height and plot color.
+      Roll period of 14 timesteps, various custom range selector options.
      </p>
      <div id="roll14" style="width:800px; height:320px;"></div>
      <p>
@@ -30,10 +34,36 @@
        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>
      <div id="nochart" style="width:800px; height:30px;"></div>
+    <div id="dark-background">
+      <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p>
+      <div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div>
+      <div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div>
+    </div>
      <p>Demo of range selector with stepPlot</p>
      <div id="stepplot" style="width:800px; height:320px;"></div>
  
@@ -65,7 +95,14 @@
              showRangeSelector: true,
              rangeSelectorHeight: 30,
              rangeSelectorPlotStrokeColor: 'yellow',
-            rangeSelectorPlotFillColor: 'lightyellow'
+            rangeSelectorPlotFillColor: 'black',
+            rangeSelectorBackgroundStrokeColor: 'lightyellow',
+            rangeSelectorBackgroundLineWidth: 4,
+            rangeSelectorPlotLineWidth: 1.5,
+            rangeSelectorForegroundStrokeColor: 'brown',
+            rangeSelectorForegroundLineWidth: 2,
+            rangeSelectorAlpha: 1,
+            rangeSelectorPlotFillGradientColor: 'yellow'
            }
        );
        g3 = new Dygraph(
@@ -100,7 +137,44 @@
              rangeSelectorHeight: 30
            }
        );
-      g5 = new Dygraph(document.getElementById("stepplot"),
+      g5 = new Dygraph(
+          document.getElementById("darkbg1"),
+          data_temp,
+          {
+              rollPeriod: 14,
+              showRoller: true,
+              customBars: true,
+              title: 'Nightly Temperatures in NY vs. SF',
+              ylabel: 'Temperature (F)',
+              legend: 'always',
+              labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
+              showRangeSelector: true,
+              rangeSelectorPlotFillColor: 'MediumSlateBlue',
+              rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
+              axisLabelColor: 'white',
+              colorValue: 0.9,
+              fillAlpha: 0.4
+          }
+      );
+      g6 = new Dygraph(
+          document.getElementById("darkbg2"),
+          data_temp,
+          {
+              rollPeriod: 14,
+              showRoller: true,
+              customBars: true,
+              title: 'Nightly Temperatures in NY vs. SF',
+              ylabel: 'Temperature (F)',
+              legend: 'always',
+              labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
+              showRangeSelector: true,
+              rangeSelectorPlotFillColor: 'MediumSlateBlue',
+              axisLabelColor: 'white',
+              colorValue: 0.9,
+              fillAlpha: 0.4
+          }
+      );
+      g7 = new Dygraph(document.getElementById("stepplot"),
                        "Date,Idle,Used\n" +
                        "2008-05-07,70,30\n" +
                        "2008-05-08,42,88\n" +