Custom underlay callback

X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Funderlay-callback.html;h=11b27647653d42dc1a65b05202144cdd22f31ff1;hb=ce31caf22475e3e1fd6d9fea192d61ff4fcd7fac;hp=bb1b144a6587cee3a09914536b02ed7b2016ab3a;hpb=50360fd082e74dd47cdc95b96892fef7f2067ce9;p=dygraphs.git diff --git a/tests/underlay-callback.html b/tests/underlay-callback.html index bb1b144..11b2764 100644 --- a/tests/underlay-callback.html +++ b/tests/underlay-callback.html @@ -1,16 +1,18 @@ + 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:

@@ -25,12 +27,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); } } );