gallery/highlighted-region.js

   1 /*global Gallery,Dygraph,data */
   2 Gallery.register(
   3   'highlighted-region',
   4   {
   5     name: 'Highlighted Region',
   6     title: 'Draws a time series with an unusual region 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 region remains highlighted.</p>"].join("\n");
  11     },
  12     run: function() {
  13       // A basic sinusoidal data series.
  14       var data = [];
  15       for (var i = 0; i < 1000; i++) {
  16         var base = 10 * Math.sin(i / 90.0);
  17         data.push([i, base, base + Math.sin(i / 2.0)]);
  18       }
  19
  20       // Shift one portion out of line.
  21       var highlight_start = 450;
  22       var highlight_end = 500;
  23       for (var i = highlight_start; i <= highlight_end; i++) {
  24         data[i][2] += 5.0;
  25       }
  26
  27       new Dygraph(
  28           document.getElementById("div_g"),
  29           data,
  30           {
  31             labels: ['X', 'Est.', 'Actual'],
  32             animatedZooms: true,
  33             underlayCallback: function(canvas, area, g) {
  34               var bottom_left = g.toDomCoords(highlight_start, -20);
  35               var top_right = g.toDomCoords(highlight_end, +20);
  36
  37               var left = bottom_left[0];
  38               var right = top_right[0];
  39
  40               canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
  41               canvas.fillRect(left, area.y, right - left, area.h);
  42             }
  43
  44           }
  45       );
  46     }
  47   });