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