X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Frange-selector.html;h=b257fe4d19721c7798fb8dcb380a1784f9672189;hb=056763ed22ccc5bdebc73355841052d0d6815a1f;hp=adc8afbd6a592c53405f7ab9847fd7d6951389eb;hpb=2cfce1c8103454bca196e57db3f23272b7ee5b6e;p=dygraphs.git diff --git a/tests/range-selector.html b/tests/range-selector.html index adc8afb..b257fe4 100644 --- a/tests/range-selector.html +++ b/tests/range-selector.html @@ -6,13 +6,17 @@ For production (minified) code, use: --> - + @@ -21,8 +25,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.

@@ -30,10 +39,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

@@ -63,9 +78,16 @@ 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( @@ -91,12 +113,54 @@ [[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', + 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" +