tests/range-selector.html

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