gallery/highlighted-region.js

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