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, custom range selector height and plot color.
  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     <p>
  38       Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
  39     </p>
  40     <div id="nochart" style="width:800px; height:30px;"></div>
  41     <div id="dark-background">
  42       <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p>
  43       <div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div>
  44       <div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div>
  45     </div>
  46     <p>Demo of range selector with stepPlot</p>
  47     <div id="stepplot" style="width:800px; height:320px;"></div>
  48
  49     <script type="text/javascript">
  50       g1 = new Dygraph(
  51           document.getElementById("noroll"),
  52           data_temp,
  53           {
  54             customBars: true,
  55             title: 'Daily Temperatures in New York vs. San Francisco',
  56             ylabel: 'Temperature (F)',
  57             legend: 'always',
  58             labelsDivStyles: { 'textAlign': 'right' },
  59             showRangeSelector: true
  60           }
  61       );
  62       g2 = new Dygraph(
  63           document.getElementById("roll14"),
  64           data_temp,
  65           {
  66             rollPeriod: 14,
  67             showRoller: true,
  68             customBars: true,
  69             title: 'Daily Temperatures in New York vs. San Francisco',
  70             ylabel: 'Temperature (F)',
  71             legend: 'always',
  72             labelsDivStyles: { 'textAlign': 'right' },
  73             xAxisHeight: 14,
  74             showRangeSelector: true,
  75             rangeSelectorHeight: 30,
  76             rangeSelectorPlotStrokeColor: 'yellow',
  77             rangeSelectorPlotFillColor: 'lightyellow'
  78           }
  79       );
  80       g3 = new Dygraph(
  81           document.getElementById("selectcombined"),
  82           [
  83             [0, 1, 4, 10],
  84             [10, 2, 8, 19],
  85             [25, 15, 4, 2],
  86             [35, 0, 3, 2]
  87           ],
  88           {
  89             title: 'Daily Temperatures in New York vs. San Francisco',
  90             ylabel: 'Temperature (F)',
  91             showRangeSelector: true,
  92             labels: ['X', 'Y1', 'Y2', 'Y3'],
  93             series: {
  94               'Y1': { showInRangeSelector: true }
  95             }
  96           }
  97       );
  98       g4 = new Dygraph(
  99           document.getElementById("nochart"),
 100           [[0,1],[10,1]],
 101           {
 102             xAxisHeight: 30,
 103             axes : {
 104               x : {
 105                 drawAxis : false
 106               }
 107             },
 108             showRangeSelector: true,
 109             rangeSelectorHeight: 30
 110           }
 111       );
 112       g5 = new Dygraph(
 113           document.getElementById("darkbg1"),
 114           data_temp,
 115           {
 116               rollPeriod: 14,
 117               showRoller: true,
 118               customBars: true,
 119               title: 'Nightly Temperatures in NY vs. SF',
 120               ylabel: 'Temperature (F)',
 121               legend: 'always',
 122               labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
 123               showRangeSelector: true,
 124               rangeSelectorPlotFillColor: 'MediumSlateBlue',
 125               rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
 126               axisLabelColor: 'white',
 127               colorValue: 0.9,
 128               fillAlpha: 0.4
 129           }
 130       );
 131       g6 = new Dygraph(
 132           document.getElementById("darkbg2"),
 133           data_temp,
 134           {
 135               rollPeriod: 14,
 136               showRoller: true,
 137               customBars: true,
 138               title: 'Nightly Temperatures in NY vs. SF',
 139               ylabel: 'Temperature (F)',
 140               legend: 'always',
 141               labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
 142               showRangeSelector: true,
 143               rangeSelectorPlotFillColor: 'MediumSlateBlue',
 144               axisLabelColor: 'white',
 145               colorValue: 0.9,
 146               fillAlpha: 0.4
 147           }
 148       );
 149       g7 = new Dygraph(document.getElementById("stepplot"),
 150                       "Date,Idle,Used\n" +
 151                       "2008-05-07,70,30\n" +
 152                       "2008-05-08,42,88\n" +
 153                       "2008-05-09,88,42\n" +
 154                       "2008-05-10,33,37\n" +
 155                       "2008-05-11,30,35\n",
 156                        {
 157                           stepPlot: true,
 158                           fillGraph: true,
 159                           stackedGraph: true,
 160                           includeZero: true,
 161                           showRangeSelector: true
 162                        });
 163     </script>
 164   </body>
 165 </html>