tests/range-selector.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Temperatures with Range Selector</title>
   5     <!--
   6     For production (minified) code, use:
   7     <script type="text/javascript" src="dygraph-combined.js"></script>
   8     -->
   9     <script type="text/javascript" src="../dist/dygraph.js"></script>
  10
  11     <script type="text/javascript" src="data.js"></script>
  12     <style type="text/css">
  13     #bordered {
  14       border: 1px solid red;
  15     }
  16     #dark-background {
  17       background-color: #101015;
  18       color: white;
  19     }
  20     </style>
  21   </head>
  22   <body>
  23     <p>Demo of a graph with the range selector.</p>
  24     <p>
  25       No roll period.
  26     </p>
  27     <div id="noroll" style="width:800px; height:320px;"></div>
  28
  29     <h2 id="options">Range selector options</h2>
  30     <p>Here's a view of how the various <a href="../options.html#Range%20Selector">range selector options</a> affect the display:</p>
  31     <img width="954" height="354" src="range-selector-anatomy.png">
  32
  33     <p>
  34       Roll period of 14 timesteps, various custom range selector options.
  35     </p>
  36     <div id="roll14" style="width:800px; height:320px;"></div>
  37     <p>
  38       Use the average of a specific subset of series to draw the mini plot (only the first series is used in this test).
  39       The default behaviour is to compute the average of <em>all</em> series.
  40     </p>
  41     <div id="selectcombined" style="width:800px; height:320px;"></div>
  42
  43     <p>
  44       Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
  45     </p>
  46     <div id="nochart" style="width:800px; height:30px;"></div>
  47     <div id="dark-background">
  48       <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p>
  49       <div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div>
  50       <div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div>
  51     </div>
  52     <p>Demo of range selector with stepPlot</p>
  53     <div id="stepplot" style="width:800px; height:320px;"></div>
  54
  55     <script type="text/javascript">
  56       g1 = new Dygraph(
  57           document.getElementById("noroll"),
  58           data_temp,
  59           {
  60             customBars: true,
  61             title: 'Daily Temperatures in New York vs. San Francisco',
  62             ylabel: 'Temperature (F)',
  63             legend: 'always',
  64             labelsDivStyles: { 'textAlign': 'right' },
  65             showRangeSelector: true
  66           }
  67       );
  68       g2 = new Dygraph(
  69           document.getElementById("roll14"),
  70           data_temp,
  71           {
  72             rollPeriod: 14,
  73             showRoller: true,
  74             customBars: true,
  75             title: 'Daily Temperatures in New York vs. San Francisco',
  76             ylabel: 'Temperature (F)',
  77             legend: 'always',
  78             labelsDivStyles: { 'textAlign': 'right' },
  79             xAxisHeight: 14,
  80             showRangeSelector: true,
  81             rangeSelectorHeight: 80,
  82             rangeSelectorPlotStrokeColor: 'purple',
  83             rangeSelectorPlotFillColor: 'black',
  84             rangeSelectorBackgroundStrokeColor: 'orange',
  85             rangeSelectorBackgroundLineWidth: 4,
  86             rangeSelectorPlotLineWidth: 5,
  87             rangeSelectorForegroundStrokeColor: 'brown',
  88             rangeSelectorForegroundLineWidth: 8,
  89             rangeSelectorAlpha: 0.5,
  90             rangeSelectorPlotFillGradientColor: 'red'
  91           }
  92       );
  93       g3 = new Dygraph(
  94           document.getElementById("selectcombined"),
  95           [
  96             [0, 1, 4, 10],
  97             [10, 2, 8, 19],
  98             [25, 15, 4, 2],
  99             [35, 0, 3, 2]
 100           ],
 101           {
 102             title: 'Daily Temperatures in New York vs. San Francisco',
 103             ylabel: 'Temperature (F)',
 104             showRangeSelector: true,
 105             labels: ['X', 'Y1', 'Y2', 'Y3'],
 106             series: {
 107               'Y1': { showInRangeSelector: true }
 108             }
 109           }
 110       );
 111       g4 = new Dygraph(
 112           document.getElementById("nochart"),
 113           [[0,1],[10,1]],
 114           {
 115             xAxisHeight: 30,
 116             axes : {
 117               x : {
 118                 drawAxis : false
 119               }
 120             },
 121             labels: ['X', 'Y'],
 122             showRangeSelector: true,
 123             rangeSelectorHeight: 30
 124           }
 125       );
 126       g5 = new Dygraph(
 127           document.getElementById("darkbg1"),
 128           data_temp,
 129           {
 130               rollPeriod: 14,
 131               showRoller: true,
 132               customBars: true,
 133               title: 'Nightly Temperatures in NY vs. SF',
 134               ylabel: 'Temperature (F)',
 135               legend: 'always',
 136               labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
 137               showRangeSelector: true,
 138               rangeSelectorPlotFillColor: 'MediumSlateBlue',
 139               rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
 140               axisLabelColor: 'white',
 141               colorValue: 0.9,
 142               fillAlpha: 0.4
 143           }
 144       );
 145       g6 = new Dygraph(
 146           document.getElementById("darkbg2"),
 147           data_temp,
 148           {
 149               rollPeriod: 14,
 150               showRoller: true,
 151               customBars: true,
 152               title: 'Nightly Temperatures in NY vs. SF',
 153               ylabel: 'Temperature (F)',
 154               legend: 'always',
 155               labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
 156               showRangeSelector: true,
 157               rangeSelectorPlotFillColor: 'MediumSlateBlue',
 158               axisLabelColor: 'white',
 159               colorValue: 0.9,
 160               fillAlpha: 0.4
 161           }
 162       );
 163       g7 = new Dygraph(document.getElementById("stepplot"),
 164                       "Date,Idle,Used\n" +
 165                       "2008-05-07,70,30\n" +
 166                       "2008-05-08,42,88\n" +
 167                       "2008-05-09,88,42\n" +
 168                       "2008-05-10,33,37\n" +
 169                       "2008-05-11,30,35\n",
 170                        {
 171                           stepPlot: true,
 172                           fillGraph: true,
 173                           stackedGraph: true,
 174                           includeZero: true,
 175                           showRangeSelector: true
 176                        });
 177     </script>
 178   </body>
 179 </html>