gallery/range-selector.js

   1 /*global Gallery,Dygraph,data */
   2 /*global data_temp */
   3 Gallery.register(
   4   'range-selector',
   5   {
   6     name: 'Range Selector',
   7     title: 'Demo of the Range Selector',
   8     setup: function(parent) {
   9       parent.innerHTML = [
  10           "<style>",
  11           "  #darkbg .dygraph-axis-label { color: white; }",
  12           "  .dygraph-legend { text-align: right; }",
  13           "  #darkbg .dygraph-legend { background-color: #101015; }",
  14           "</style>",
  15           "<p>No roll period.</p>",
  16           "<div id='noroll' style='width:600px; height:300px;'></div>",
  17           "",
  18           "<p>Roll period of 14 timesteps, custom range selector height and plot color.</p>",
  19           "<div id='roll14' style='width:600px; height:300px;'></div>",
  20           "",
  21           "<div style='background-color: #101015; color: white'>",
  22           "<p>Dark background, custom range selector gradient color.</p>",
  23           "<div id='darkbg' style='width:600px; height:300px;'></div>",
  24           "</div>"].join("\n");
  25     },
  26     run: function() {
  27       new Dygraph(
  28           document.getElementById("noroll"),
  29           data_temp,
  30           {
  31             customBars: true,
  32             title: 'Daily Temperatures in New York vs. San Francisco',
  33             ylabel: 'Temperature (F)',
  34             legend: 'always',
  35             showRangeSelector: true
  36           }
  37       );
  38       new Dygraph(
  39           document.getElementById("roll14"),
  40           data_temp,
  41           {
  42             rollPeriod: 14,
  43             showRoller: true,
  44             customBars: true,
  45             title: 'Daily Temperatures in New York vs. San Francisco',
  46             ylabel: 'Temperature (F)',
  47             legend: 'always',
  48             showRangeSelector: true,
  49             rangeSelectorHeight: 30,
  50             rangeSelectorPlotStrokeColor: 'yellow',
  51             rangeSelectorPlotFillColor: 'lightyellow'
  52           }
  53         );
  54       new Dygraph(
  55           document.getElementById("darkbg"),
  56           data_temp,
  57           {
  58               rollPeriod: 14,
  59               showRoller: true,
  60               customBars: true,
  61               title: 'Nightly Temperatures in New York vs. San Francisco',
  62               ylabel: 'Temperature (F)',
  63               legend: 'always',
  64               showRangeSelector: true,
  65               rangeSelectorPlotFillColor: 'MediumSlateBlue',
  66               rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
  67               colorValue: 0.9,
  68               fillAlpha: 0.4
  69           }
  70       );
  71     }
  72   });