For production (minified) code, use:
<script type="text/javascript" src="dygraph-combined.js"></script>
-->
- <script type="text/javascript" src="../dygraph-dev.js"></script>
+ <script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<style type="text/css">
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, 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>
The default behaviour is to compute the average of <em>all</em> series.
</p>
<div id="selectcombined" style="width:800px; height:320px;"></div>
+
<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',
- 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(
drawAxis : false
}
},
+ labels: ['X', 'Y'],
showRangeSelector: true,
rangeSelectorHeight: 30
}