4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>Custom underlay callback
</title>
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
9 <script type=
"text/javascript" src=
"../strftime/strftime-min.js"></script>
10 <script type=
"text/javascript" src=
"../rgbcolor/rgbcolor.js"></script>
11 <script type=
"text/javascript" src=
"../dygraph-canvas.js"></script>
12 <script type=
"text/javascript" src=
"../dygraph.js"></script>
13 <script type=
"text/javascript" src=
"data.js"></script>
16 <p>Should draw a three-colored background, split horizontally at y:
2.25, and
17 again on the top at x:
19Nov:
</p>
18 <div id=
"div_g" style=
"width:600px; height:300px;"></div>
20 <div id=
"status" style=
"width:100%; height:200px;"></div>
22 <script type=
"text/javascript">
23 s = document.getElementById(
"status");
26 document.getElementById(
"div_g"),
32 underlayCallback: function(canvas, area, g) {
33 // Selecting a date in the middle of the graph.
34 var splitDate = new Date(
"2006-11-19").getTime();
35 var coords = g.toDomCoords(splitDate,
2.25);
37 // splitX and splitY are the coordinates on the canvas for (
2006-
11-
19,
2.25).
38 var splitX = coords[
0];
39 var splitY = coords[
1];
41 // The drawing area doesn't start at (
0,
0), it starts at (area.x, area.y).
42 // That's why we subtract them from splitX and splitY. This gives us the
43 // actual distance from the upper-left hand corder of the graph itself.
44 var leftSideWidth = splitX - area.x;
45 var rightSideWidth = area.w - leftSideWidth;
46 var topHeight = splitY - area.y;
47 var bottomHeight = area.h - topHeight;
49 // fillRect(x, y, width, height)
50 // Top section: y = (
2.25, +Infinity)
51 // left: (x <
2006-
11-
19)
52 canvas.fillStyle = 'lightblue';
53 canvas.fillRect(area.x, area.y, leftSideWidth, topHeight);
55 // right: (x
> 2006-
11-
19)
56 canvas.fillStyle = 'orange';
57 canvas.fillRect(splitX, area.y, rightSideWidth, topHeight);
59 // Bottom section: y = (-Infinity,
2.25)
60 canvas.fillStyle = 'pink';
61 canvas.fillRect(area.x, splitY, area.w, bottomHeight);