From: Robert Konigsberg <konigsberg@google.com>
Date: Tue, 16 Nov 2010 00:04:39 +0000 (-0500)
Subject: Added a second region for underlay-callback that helps clarify
X-Git-Tag: v1.0.0~602
X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;ds=sidebyside;h=fdcf1ce4073030579009d81f21518520c546e433;p=dygraphs.git

Added a second region for underlay-callback that helps clarify
toDomCoords.
---

diff --git a/tests/underlay-callback.html b/tests/underlay-callback.html
index 71857eb..207c41c 100644
--- a/tests/underlay-callback.html
+++ b/tests/underlay-callback.html
@@ -27,16 +27,35 @@
               errorBars: true,
 
               underlayCallback: function(canvas, area, g) {
-                var splitHeight = g.toDomCoords(null, 2.25)[1];
+                // Selecting a date in the middle of the graph. 
+                var splitDate = new Date("2006-11-19").getTime();
+		var coords = g.toDomCoords(splitDate, 2.25);
 
-                // fillRect(x, y, width, height)
-                // Bottom section: y = (-Infinity, 2.25)
-                canvas.fillStyle = 'pink';
-                canvas.fillRect(area.x, splitHeight, area.w, area.h - splitHeight);
+                // 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, area.y, area.w, splitHeight - area.y);
+		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);
               }
             }
           );