X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Funderlay-callback.html;h=b806be804a7dcb2f9cf02367bf032501ccf016a0;hb=debdb88d1ccca3648f45d6cc5d49896f3014cfdd;hp=075f893738c5b1e22079ccf41880b6176657f079;hpb=0414310981ad4de3065fbb8de9cb1e9ed5b7ff8b;p=dygraphs.git diff --git a/tests/underlay-callback.html b/tests/underlay-callback.html index 075f893..b806be8 100644 --- a/tests/underlay-callback.html +++ b/tests/underlay-callback.html @@ -1,17 +1,22 @@ +
+Should draw a two-colored background, split horizontally at 2.25:
+Should draw a three-colored background, split horizontally at y:2.25, and + again on the top at x:19Nov:
@@ -27,12 +32,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); - canvas.fillStyle = 'pink'; - canvas.fillRect(area.x, area.y + area.h, area.w, -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, 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); } } );