Custom underlay callback

X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Funderlay-callback.html;h=10122ed89d9674e695f5f67fa31a7de7bc8c4525;hb=fd6b8dadbaa0614671bef1508c23d6a932e25081;hp=207c41c4dda9178d9c6c1462b95544d2ef7599b0;hpb=fdcf1ce4073030579009d81f21518520c546e433;p=dygraphs.git diff --git a/tests/underlay-callback.html b/tests/underlay-callback.html index 207c41c..10122ed 100644 --- a/tests/underlay-callback.html +++ b/tests/underlay-callback.html @@ -1,17 +1,15 @@ + + Custom underlay callback - - - - - + + -

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:

@@ -29,27 +27,27 @@ 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); + var coords = g.toDomCoords(splitDate, 2.25); - // splitX and splitY are the coordinates on the canvas for (2006-11-19, 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; + // 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) + // left: (x < 2006-11-19) canvas.fillStyle = 'lightblue'; - canvas.fillRect(area.x, area.y, leftSideWidth, topHeight); + canvas.fillRect(area.x, area.y, leftSideWidth, topHeight); - // right: x > 2006-11-19) + // right: (x > 2006-11-19) canvas.fillStyle = 'orange'; canvas.fillRect(splitX, area.y, rightSideWidth, topHeight);