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>"].join("\n");
  15     },
  16     run: function() {
  17       new Dygraph(
  18           document.getElementById("noroll"),
  19           data_temp,
  20           {
  21             customBars: true,
  22             title: 'Daily Temperatures in New York vs. San Francisco',
  23             ylabel: 'Temperature (F)',
  24             legend: 'always',
  25             labelsDivStyles: { 'textAlign': 'right' },
  26             showRangeSelector: true
  27           }
  28       );
  29       new Dygraph(
  30           document.getElementById("roll14"),
  31           data_temp,
  32           {
  33             rollPeriod: 14,
  34             showRoller: true,
  35             customBars: true,
  36             title: 'Daily Temperatures in New York vs. San Francisco',
  37             ylabel: 'Temperature (F)',
  38             legend: 'always',
  39             labelsDivStyles: { 'textAlign': 'right' },
  40             showRangeSelector: true,
  41             rangeSelectorHeight: 30,
  42             rangeSelectorPlotStrokeColor: 'yellow',
  43             rangeSelectorPlotFillColor: 'lightyellow'
  44           });
  45     }
  46   });