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 +28,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); } } );