X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Funderlay-callback.html;h=7eaa2e122ab54c90cd5c61b4a304645bda86122d;hb=b4202b3d4b21a30ed00c6fdfe3d4d39de3034c2b;hp=5c47582ed0942a3ddec689b8566618a28316beeb;hpb=a2b2c3a13b968bf10c9dbea58683b0f51011b547;p=dygraphs.git

diff --git a/tests/underlay-callback.html b/tests/underlay-callback.html
index 5c47582..7eaa2e1 100644
--- a/tests/underlay-callback.html
+++ b/tests/underlay-callback.html
@@ -1,5 +1,7 @@
+<!DOCTYPE html>
 <html>
   <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
     <title>Custom underlay callback</title>
     <!--[if IE]>
     <script type="text/javascript" src="../excanvas.js"></script>
@@ -26,12 +28,36 @@
               showRoller: true,
               errorBars: true,
 
-              underlayCallback: function(canvas, area, layout) {
-                var splitHeight = area.h * (layout.yscale * (2.25 - layout.minyval));
-                canvas.fillStyle = 'pink';
-                canvas.fillRect(area.x, area.y + area.h, area.w, -splitHeight);
+              underlayCallback: function(canvas, area, g) {
+                // Selecting a date in the middle of the graph. 
+                var splitDate = new Date("2006-11-19").getTime();
+                var coords = g.toDomCoords(splitDate, 2.25);
+
+                // splitX and splitY are the coordinates on the canvas for (2006-11-19, 2.25).
+                var splitX = coords[0];
+                var splitY = coords[1];
+
+                // The drawing area doesn't start at (0, 0), it starts at (area.x, area.y).
+                // That's why we subtract them from splitX and splitY. This gives us the
+                // actual distance from the upper-left hand corder of the graph itself.
+                var leftSideWidth = splitX - area.x;
+                var rightSideWidth = area.w - leftSideWidth;
+                var topHeight = splitY - area.y;
+                var bottomHeight = area.h - topHeight;
+
+                // fillRect(x, y, width, height)
+                // Top section: y = (2.25, +Infinity)
+                // left: (x < 2006-11-19)
                 canvas.fillStyle = 'lightblue';
-                canvas.fillRect(area.x, 0, area.w, area.y + area.h - splitHeight);
+                canvas.fillRect(area.x, area.y, leftSideWidth, topHeight);
+
+                // right: (x > 2006-11-19)
+                canvas.fillStyle = 'orange';
+                canvas.fillRect(splitX, area.y, rightSideWidth, topHeight);
+        
+                // Bottom section: y = (-Infinity, 2.25)
+                canvas.fillStyle = 'pink';
+                canvas.fillRect(area.x, splitY, area.w, bottomHeight);
               }
             }
           );
