tests/underlay-callback.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>Custom underlay callback</title>
   6     <!--[if IE]>
   7     <script type="text/javascript" src="../excanvas.js"></script>
   8     <![endif]-->
   9     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
  10     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
  11     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  12     <script type="text/javascript" src="../dygraph.js"></script>
  13     <script type="text/javascript" src="data.js"></script>
  14   </head>
  15   <body>
  16     <p>Should draw a three-colored background, split horizontally at y:2.25, and
  17     again on the top at x:19Nov:</p>
  18     <div id="div_g" style="width:600px; height:300px;"></div>
  19
  20     <div id="status" style="width:100%; height:200px;"></div>
  21
  22     <script type="text/javascript">
  23       s = document.getElementById("status");
  24
  25       g = new Dygraph(
  26             document.getElementById("div_g"),
  27             NoisyData, {
  28               rollPeriod: 7,
  29               showRoller: true,
  30               errorBars: true,
  31
  32               underlayCallback: function(canvas, area, g) {
  33                 // Selecting a date in the middle of the graph.
  34                 var splitDate = new Date("2006-11-19").getTime();
  35                 var coords = g.toDomCoords(splitDate, 2.25);
  36
  37                 // splitX and splitY are the coordinates on the canvas for (2006-11-19, 2.25).
  38                 var splitX = coords[0];
  39                 var splitY = coords[1];
  40
  41                 // The drawing area doesn't start at (0, 0), it starts at (area.x, area.y).
  42                 // That's why we subtract them from splitX and splitY. This gives us the
  43                 // actual distance from the upper-left hand corder of the graph itself.
  44                 var leftSideWidth = splitX - area.x;
  45                 var rightSideWidth = area.w - leftSideWidth;
  46                 var topHeight = splitY - area.y;
  47                 var bottomHeight = area.h - topHeight;
  48
  49                 // fillRect(x, y, width, height)
  50                 // Top section: y = (2.25, +Infinity)
  51                 // left: (x < 2006-11-19)
  52                 canvas.fillStyle = 'lightblue';
  53                 canvas.fillRect(area.x, area.y, leftSideWidth, topHeight);
  54
  55                 // right: (x > 2006-11-19)
  56                 canvas.fillStyle = 'orange';
  57                 canvas.fillRect(splitX, area.y, rightSideWidth, topHeight);
  58
  59                 // Bottom section: y = (-Infinity, 2.25)
  60                 canvas.fillStyle = 'pink';
  61                 canvas.fillRect(area.x, splitY, area.w, bottomHeight);
  62               }
  63             }
  64           );
  65     </script>
  66   </body>
  67 </html>