<!DOCTYPE html>
<html>
<head>
+ <link rel="stylesheet" href="../css/dygraph.css">
<title>Temperatures with Range Selector</title>
<!--
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">
background-color: #101015;
color: white;
}
+ #darkbg1 .dygraph-axis-label, #darkbg2 .dygraph-axis-label {
+ color: white;
+ }
+ #noroll .dygraph-legend,
+ #roll14 .dygraph-legend,
+ #darkbg1 .dygraph-legend,
+ #darkbg2 .dygraph-legend {
+ text-align: right;
+ }
+ #darkbg1 .dygraph-legend {
+ background-color: #101015;
+ }
+ #darkbg2 .dygraph-legend {
+ background-color: #101015;
+ }
</style>
</head>
<body>
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>
title: 'Daily Temperatures in New York vs. San Francisco',
ylabel: 'Temperature (F)',
legend: 'always',
- labelsDivStyles: { 'textAlign': 'right' },
showRangeSelector: true
}
);
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',
+ 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(
drawAxis : false
}
},
+ labels: ['X', 'Y'],
showRangeSelector: true,
rangeSelectorHeight: 30
}
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
}
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
}