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>
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>
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(