From: Dan Vanderkam Date: Sat, 21 Mar 2015 17:27:54 +0000 (-0400) Subject: Anatomy of a range selector X-Git-Tag: v2.0.0~68^2 X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=refs%2Fheads%2Frange-selector-example;p=dygraphs.git Anatomy of a range selector --- diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js index d37251b..ca94dc5 100644 --- a/dygraph-options-reference.js +++ b/dygraph-options-reference.js @@ -717,73 +717,73 @@ Dygraph.OPTIONS_REFERENCE = // }, "showRangeSelector": { "default": "false", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "boolean", "description": "Show or hide the range selector widget." }, "rangeSelectorHeight": { "default": "40", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "integer", "description": "Height, in pixels, of the range selector widget. This option can only be specified at Dygraph creation time." }, "rangeSelectorPlotStrokeColor": { "default": "#808FAB", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "string", "description": "The range selector mini plot stroke color. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\". You can also specify null or \"\" to turn off stroke." }, "rangeSelectorPlotFillColor": { "default": "#A7B1C4", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "string", "description": "The range selector mini plot fill color. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\". You can also specify null or \"\" to turn off fill." }, "rangeSelectorPlotFillGradientColor": { "default": "white", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "string", "description": "The top color for the range selector mini plot fill color gradient. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"rgba(255,100,200,42)\" or \"yellow\". You can also specify null or \"\" to disable the gradient and fill with one single color." }, "rangeSelectorBackgroundStrokeColor": { "default": "gray", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "string", "description": "The color of the lines below and on both sides of the range selector mini plot. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\"." }, "rangeSelectorBackgroundLineWidth": { "default": "1", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "float", "description": "The width of the lines below and on both sides of the range selector mini plot." }, "rangeSelectorPlotLineWidth": { "default": "1.5", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "float", "description": "The width of the range selector mini plot line." }, "rangeSelectorForegroundStrokeColor": { "default": "black", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "string", "description": "The color of the lines in the interactive layer of the range selector. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\"." }, "rangeSelectorForegroundLineWidth": { "default": "1", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "float", "description": "The width the lines in the interactive layer of the range selector." }, "rangeSelectorAlpha": { "default": "0.6", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "float (0.0 - 1.0)", "description": "The transparency of the veil that is drawn over the unselected portions of the range selector mini plot. A value of 0 represents full transparency and the unselected portions of the mini plot will appear as normal. A value of 1 represents full opacity and the unselected portions of the mini plot will be hidden." }, "showInRangeSelector": { "default": "null", - "labels": ["Interactive Elements"], + "labels": ["Range Selector"], "type": "boolean", "description": "Mark this series for inclusion in the range selector. The mini plot curve will be an average of all such series. If this is not specified for any series, the default behavior is to average all the series. Setting it for one series will result in that series being charted alone in the range selector." }, @@ -847,6 +847,7 @@ Dygraph.OPTIONS_REFERENCE = // 'Error Bars', 'Grid', 'Interactive Elements', + 'Range Selector', 'Legend', 'Overall display', 'Rolling Averages', diff --git a/tests/range-selector-anatomy.png b/tests/range-selector-anatomy.png new file mode 100644 index 0000000..551b600 Binary files /dev/null and b/tests/range-selector-anatomy.png differ 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.

+ +

Range selector options

+

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

+ +

Roll period of 14 timesteps, various custom range selector options.

@@ -34,27 +39,7 @@ The default behaviour is to compute the average of all series.

-

Range selector options

-

Range selector background

-
    -
  • rangeSelectorBackgroundStrokeColor
    • -
  • rangeSelectorBackgroundLineWidth
    • -
- -

Range selector foreground

-
    -
  • rangeSelectorForegroundStrokeColor
    • -
  • rangeSelectorForegroundLineWidth
    • -
- -

Range selector plot

-
    -
  • rangeSelectorAlpha
    • -
  • rangeSelectorPlotFillGradientColor
    • -
  • rangeSelectorPlotFillColor
    • -
  • rangeSelectorPlotStrokeColor
    • -
- +

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

@@ -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( diff --git a/tests/range-selector/range-selector-background.png b/tests/range-selector/range-selector-background.png deleted file mode 100644 index 02cee89..0000000 Binary files a/tests/range-selector/range-selector-background.png and /dev/null differ diff --git a/tests/range-selector/range-selector-foreground.png b/tests/range-selector/range-selector-foreground.png deleted file mode 100644 index 2d03078..0000000 Binary files a/tests/range-selector/range-selector-foreground.png and /dev/null differ diff --git a/tests/range-selector/range-selector-plot.png b/tests/range-selector/range-selector-plot.png deleted file mode 100644 index 5ef4f11..0000000 Binary files a/tests/range-selector/range-selector-plot.png and /dev/null differ