X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=sidebyside;f=tests%2Funderlay-callback.html;h=762ed4934e3fcd8e6ef70d5d55b293ec5839edb8;hb=7aedf6fee4cad9a3fc6de49476fc176e48a090fa;hp=bb1b144a6587cee3a09914536b02ed7b2016ab3a;hpb=50360fd082e74dd47cdc95b96892fef7f2067ce9;p=dygraphs.git
diff --git a/tests/underlay-callback.html b/tests/underlay-callback.html
index bb1b144..762ed49 100644
--- a/tests/underlay-callback.html
+++ b/tests/underlay-callback.html
@@ -2,9 +2,10 @@
Custom underlay callback
-
+
+
@@ -25,12 +26,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);
}
}
);