X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=sidebyside;f=tests%2Funderlay-callback.html;h=b806be804a7dcb2f9cf02367bf032501ccf016a0;hb=c84d136cf6c4dac8e61f4a976487e14b72d4541a;hp=71857eb9acaac662d5f75d6b0587aa38d8e826fc;hpb=2fc82862911aedb6cd30287a040b827c75405512;p=dygraphs.git diff --git a/tests/underlay-callback.html b/tests/underlay-callback.html index 71857eb..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,16 +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); - // 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); } } );