X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Frange-selector.html;h=9c2b1405f4ee11bfcbe58154ef3e8c7732551d33;hb=f808e16e56550f5260f4cf8c335424925e23e6b5;hp=8527b5c93b137526b809e8c875976269e4da1336;hpb=3e644ed896f7184c93bc7d16f285a33a4c2e39f2;p=dygraphs.git diff --git a/tests/range-selector.html b/tests/range-selector.html index 8527b5c..9c2b140 100644 --- a/tests/range-selector.html +++ b/tests/range-selector.html @@ -1,22 +1,34 @@ - + Temperatures with Range Selector - - - + @@ -25,8 +37,13 @@ No roll period.

+ +

Range selector options

+

Here's a view of how the various range selector options affect the display:

+ +

- Roll period of 14 timesteps, custom range selector height and plot color. + Roll period of 14 timesteps, various custom range selector options.

@@ -34,10 +51,16 @@ The default behaviour is to compute the average of all series.

+

Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).

+
+

Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.

+
+
+

Demo of range selector with stepPlot

@@ -50,7 +73,6 @@ title: 'Daily Temperatures in New York vs. San Francisco', ylabel: 'Temperature (F)', legend: 'always', - labelsDivStyles: { 'textAlign': 'right' }, showRangeSelector: true } ); @@ -64,12 +86,18 @@ title: 'Daily Temperatures in New York vs. San Francisco', ylabel: 'Temperature (F)', legend: 'always', - labelsDivStyles: { 'textAlign': 'right' }, xAxisHeight: 14, showRangeSelector: true, - rangeSelectorHeight: 30, - rangeSelectorPlotStrokeColor: 'yellow', - rangeSelectorPlotFillColor: 'lightyellow' + rangeSelectorHeight: 80, + rangeSelectorPlotStrokeColor: 'purple', + rangeSelectorPlotFillColor: 'black', + rangeSelectorBackgroundStrokeColor: 'orange', + rangeSelectorBackgroundLineWidth: 4, + rangeSelectorPlotLineWidth: 5, + rangeSelectorForegroundStrokeColor: 'brown', + rangeSelectorForegroundLineWidth: 8, + rangeSelectorAlpha: 0.5, + rangeSelectorPlotFillGradientColor: 'red' } ); g3 = new Dygraph( @@ -95,12 +123,50 @@ [[0,1],[10,1]], { xAxisHeight: 30, - drawXAxis: false, + axes : { + x : { + drawAxis : false + } + }, + labels: ['X', 'Y'], showRangeSelector: true, 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', + showRangeSelector: true, + rangeSelectorPlotFillColor: 'MediumSlateBlue', + rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)', + 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', + showRangeSelector: true, + rangeSelectorPlotFillColor: 'MediumSlateBlue', + 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" +