X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=inline;f=tests%2Funderlay-callback.html;h=b806be804a7dcb2f9cf02367bf032501ccf016a0;hb=c70fe730d3e8a4ff32f9371d95a7894441f2f671;hp=bb1b144a6587cee3a09914536b02ed7b2016ab3a;hpb=481bb0e898159d097f20cd78a61931af8f8b97f5;p=dygraphs.git diff --git a/tests/underlay-callback.html b/tests/underlay-callback.html index bb1b144..b806be8 100644 --- a/tests/underlay-callback.html +++ b/tests/underlay-callback.html @@ -1,16 +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:
@@ -25,12 +31,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); } } );