4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>Custom underlay callback
</title>
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
8 <script type=
"text/javascript" src=
"data.js"></script>
11 <p>Should draw a three-colored background, split horizontally at y:
2.25, and
12 again on the top at x:
19Nov:
</p>
13 <div id=
"div_g" style=
"width:600px; height:300px;"></div>
15 <div id=
"status" style=
"width:100%; height:200px;"></div>
17 <script type=
"text/javascript">
18 s = document.getElementById(
"status");
21 document.getElementById(
"div_g"),
27 underlayCallback: function(canvas, area, g) {
28 // Selecting a date in the middle of the graph.
29 var splitDate = new Date(
"2006-11-19").getTime();
30 var coords = g.toDomCoords(splitDate,
2.25);
32 // splitX and splitY are the coordinates on the canvas for (
2006-
11-
19,
2.25).
33 var splitX = coords[
0];
34 var splitY = coords[
1];
36 // The drawing area doesn't start at (
0,
0), it starts at (area.x, area.y).
37 // That's why we subtract them from splitX and splitY. This gives us the
38 // actual distance from the upper-left hand corder of the graph itself.
39 var leftSideWidth = splitX - area.x;
40 var rightSideWidth = area.w - leftSideWidth;
41 var topHeight = splitY - area.y;
42 var bottomHeight = area.h - topHeight;
44 // fillRect(x, y, width, height)
45 // Top section: y = (
2.25, +Infinity)
46 // left: (x <
2006-
11-
19)
47 canvas.fillStyle = 'lightblue';
48 canvas.fillRect(area.x, area.y, leftSideWidth, topHeight);
50 // right: (x
> 2006-
11-
19)
51 canvas.fillStyle = 'orange';
52 canvas.fillRect(splitX, area.y, rightSideWidth, topHeight);
54 // Bottom section: y = (-Infinity,
2.25)
55 canvas.fillStyle = 'pink';
56 canvas.fillRect(area.x, splitY, area.w, bottomHeight);