gallery/highlighted-weekends.js

   1 Gallery.register(
   2   'highlighted-weekends',
   3   {
   4     name: 'Highlighted Weekends',
   5     title: 'Draws a time series with weekends highlighted',
   6     setup: function(parent) {
   7       parent.innerHTML = [
   8         "<div id='div_g' style='width:600px; height:300px;'></div>",
   9         "<p>When you zoom and pan, the weekend regions remain highlighted.</p>"].join("\n");
  10     },
  11     run: function() {
  12       // Some sample data
  13       var data = "2011-01-01," + Math.random()*100 + "\n"
  14         + "2011-01-02," + Math.random()*100 + "\n"
  15         + "2011-01-03," + Math.random()*100 + "\n"
  16         + "2011-01-04," + Math.random()*100 + "\n"
  17         + "2011-01-05," + Math.random()*100 + "\n"
  18         + "2011-01-06," + Math.random()*100 + "\n"
  19         + "2011-01-07," + Math.random()*100 + "\n"
  20         + "2011-01-08," + Math.random()*100 + "\n"
  21         + "2011-01-09," + Math.random()*100 + "\n"
  22         + "2011-01-10," + Math.random()*100 + "\n"
  23         + "2011-01-11," + Math.random()*100 + "\n"
  24         + "2011-01-12," + Math.random()*100 + "\n"
  25         + "2011-01-13," + Math.random()*100 + "\n"
  26         + "2011-01-14," + Math.random()*100 + "\n"
  27         + "2011-01-15," + Math.random()*100 + "\n"
  28         + "2011-01-16," + Math.random()*100 + "\n"
  29         + "2011-01-17," + Math.random()*100 + "\n"
  30         + "2011-01-18," + Math.random()*100 + "\n"
  31         + "2011-01-19," + Math.random()*100 + "\n"
  32         + "2011-01-20," + Math.random()*100 + "\n"
  33         + "2011-01-21," + Math.random()*100 + "\n"
  34         + "2011-01-22," + Math.random()*100 + "\n"
  35         + "2011-01-23," + Math.random()*100 + "\n"
  36         + "2011-01-24," + Math.random()*100 + "\n"
  37         + "2011-01-25," + Math.random()*100 + "\n"
  38         + "2011-01-26," + Math.random()*100 + "\n"
  39         + "2011-01-27," + Math.random()*100 + "\n"
  40         + "2011-01-28," + Math.random()*100 + "\n"
  41         + "2011-01-29," + Math.random()*100 + "\n"
  42         + "2011-01-30," + Math.random()*100 + "\n"
  43         + "2011-01-31," + Math.random()*100 + "\n"
  44         ;
  45
  46       var g = new Dygraph(
  47         document.getElementById("div_g"),
  48         data,
  49         {
  50           labels: ['Date','Value'],
  51           underlayCallback: function(canvas, area, g) {
  52
  53             canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
  54
  55             function highlight_period(x_start, x_end) {
  56               var canvas_left_x = g.toDomXCoord(x_start);
  57               var canvas_right_x = g.toDomXCoord(x_end);
  58               var canvas_width = canvas_right_x - canvas_left_x;
  59               canvas.fillRect(canvas_left_x, area.y, canvas_width, area.h);
  60             }
  61
  62             var min_data_x = g.getValue(0,0);
  63             var max_data_x = g.getValue(g.numRows()-1,0);
  64
  65             // get day of week
  66             var d = new Date(min_data_x);
  67             var dow = d.getUTCDay();
  68             var ds = d.toUTCString();
  69
  70             var w = min_data_x;
  71             // starting on Sunday is a special case
  72             if (dow == 0) {
  73               highlight_period(w,w+12*3600*1000);
  74             }
  75             // find first saturday
  76             while (dow != 6) {
  77               w += 24*3600*1000;
  78               d = new Date(w);
  79               dow = d.getUTCDay();
  80             }
  81             // shift back 1/2 day to center highlight around the point for the day
  82             w -= 12*3600*1000;
  83             while (w < max_data_x) {
  84               var start_x_highlight = w;
  85               var end_x_highlight = w + 2*24*3600*1000;
  86               // make sure we don't try to plot outside the graph
  87               if (start_x_highlight < min_data_x) {
  88                 start_x_highlight = min_data_x;
  89               }
  90               if (end_x_highlight > max_data_x) {
  91                 end_x_highlight = max_data_x;
  92               }
  93               highlight_period(start_x_highlight,end_x_highlight);
  94               // calculate start of highlight for next Saturday
  95               w += 7*24*3600*1000;
  96             }
  97           }
  98         });
  99     }
 100   });