gallery/highlighted-weekends.js

   1 /*global Gallery,Dygraph,data */
   2 Gallery.register(
   3   'highlighted-weekends',
   4   {
   5     name: 'Highlighted Weekends',
   6     title: 'Draws a time series with weekends highlighted',
   7     setup: function(parent) {
   8       parent.innerHTML = [
   9         "<div id='div_g' style='width:600px; height:300px;'></div>",
  10         "<p>When you zoom and pan, the weekend regions remain highlighted.</p>"].join("\n");
  11     },
  12     run: function() {
  13       // Some sample data
  14       var data = "2011-01-01," + Math.random()*100 + "\n" +
  15         "2011-01-02," + Math.random()*100 + "\n" +
  16         "2011-01-03," + Math.random()*100 + "\n" +
  17         "2011-01-04," + Math.random()*100 + "\n" +
  18         "2011-01-05," + Math.random()*100 + "\n" +
  19         "2011-01-06," + Math.random()*100 + "\n" +
  20         "2011-01-07," + Math.random()*100 + "\n" +
  21         "2011-01-08," + Math.random()*100 + "\n" +
  22         "2011-01-09," + Math.random()*100 + "\n" +
  23         "2011-01-10," + Math.random()*100 + "\n" +
  24         "2011-01-11," + Math.random()*100 + "\n" +
  25         "2011-01-12," + Math.random()*100 + "\n" +
  26         "2011-01-13," + Math.random()*100 + "\n" +
  27         "2011-01-14," + Math.random()*100 + "\n" +
  28         "2011-01-15," + Math.random()*100 + "\n" +
  29         "2011-01-16," + Math.random()*100 + "\n" +
  30         "2011-01-17," + Math.random()*100 + "\n" +
  31         "2011-01-18," + Math.random()*100 + "\n" +
  32         "2011-01-19," + Math.random()*100 + "\n" +
  33         "2011-01-20," + Math.random()*100 + "\n" +
  34         "2011-01-21," + Math.random()*100 + "\n" +
  35         "2011-01-22," + Math.random()*100 + "\n" +
  36         "2011-01-23," + Math.random()*100 + "\n" +
  37         "2011-01-24," + Math.random()*100 + "\n" +
  38         "2011-01-25," + Math.random()*100 + "\n" +
  39         "2011-01-26," + Math.random()*100 + "\n" +
  40         "2011-01-27," + Math.random()*100 + "\n" +
  41         "2011-01-28," + Math.random()*100 + "\n" +
  42         "2011-01-29," + Math.random()*100 + "\n" +
  43         "2011-01-30," + Math.random()*100 + "\n" +
  44         "2011-01-31," + Math.random()*100 + "\n";
  45
  46       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
  69             var w = min_data_x;
  70             // starting on Sunday is a special case
  71             if (dow === 0) {
  72               highlight_period(w,w+12*3600*1000);
  73             }
  74             // find first saturday
  75             while (dow != 6) {
  76               w += 24*3600*1000;
  77               d = new Date(w);
  78               dow = d.getUTCDay();
  79             }
  80             // shift back 1/2 day to center highlight around the point for the day
  81             w -= 12*3600*1000;
  82             while (w < max_data_x) {
  83               var start_x_highlight = w;
  84               var end_x_highlight = w + 2*24*3600*1000;
  85               // make sure we don't try to plot outside the graph
  86               if (start_x_highlight < min_data_x) {
  87                 start_x_highlight = min_data_x;
  88               }
  89               if (end_x_highlight > max_data_x) {
  90                 end_x_highlight = max_data_x;
  91               }
  92               highlight_period(start_x_highlight,end_x_highlight);
  93               // calculate start of highlight for next Saturday
  94               w += 7*24*3600*1000;
  95             }
  96           }
  97         });
  98     }
  99   });