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