gallery/range-selector.js

   1 Gallery.register(
   2   'range-selector',
   3   {
   4     name: 'Range Selector',
   5     title: 'Demo of the Range Selector',
   6     setup: function(parent) {
   7       parent.innerHTML = [
   8           "<p>No roll period.</p>",
   9           "<div id='noroll' style='width:600px; height:300px;'></div>",
  10           "",
  11           "<p>Roll period of 14 timesteps, custom range selector height and plot color.</p>",
  12           "<div id='roll14' style='width:600px; height:300px;'></div>"].join("\n");
  13     },
  14     run: function() {
  15       g1 = new Dygraph(
  16           document.getElementById("noroll"),
  17           data_temp,
  18           {
  19             customBars: true,
  20             title: 'Daily Temperatures in New York vs. San Francisco',
  21             ylabel: 'Temperature (F)',
  22             legend: 'always',
  23             labelsDivStyles: { 'textAlign': 'right' },
  24             showRangeSelector: true
  25           }
  26       );
  27       g2 = new Dygraph(
  28           document.getElementById("roll14"),
  29           data_temp,
  30           {
  31             rollPeriod: 14,
  32             showRoller: true,
  33             customBars: true,
  34             title: 'Daily Temperatures in New York vs. San Francisco',
  35             ylabel: 'Temperature (F)',
  36             legend: 'always',
  37             labelsDivStyles: { 'textAlign': 'right' },
  38             showRangeSelector: true,
  39             rangeSelectorHeight: 30,
  40             rangeSelectorPlotStrokeColor: 'yellow',
  41             rangeSelectorPlotFillColor: 'lightyellow'
  42           });
  43     }
  44   });