Merge branch 'master' into kberg-work
[dygraphs.git] / tests / underlay-callback.html
CommitLineData
54425b14 1<!DOCTYPE html>
e7746234
EC
2<html>
3 <head>
4 <title>Custom underlay callback</title>
7e5ddc94
DV
5 <!--
6 For production (minified) code, use:
7 <script type="text/javascript" src="dygraph-combined.js"></script>
8 -->
9 <script type="text/javascript" src="../dygraph-dev.js"></script>
10
e7746234
EC
11 <script type="text/javascript" src="data.js"></script>
12 </head>
13 <body>
c7371f01
RK
14 <p>Should draw a three-colored background, split horizontally at y:2.25, and
15 again on the top at x:19Nov:</p>
e7746234
EC
16 <div id="div_g" style="width:600px; height:300px;"></div>
17
18 <div id="status" style="width:100%; height:200px;"></div>
19
20 <script type="text/javascript">
21 s = document.getElementById("status");
22
23 g = new Dygraph(
24 document.getElementById("div_g"),
25 NoisyData, {
26 rollPeriod: 7,
27 showRoller: true,
28 errorBars: true,
29
04143109 30 underlayCallback: function(canvas, area, g) {
fdcf1ce4
RK
31 // Selecting a date in the middle of the graph.
32 var splitDate = new Date("2006-11-19").getTime();
5879c20d 33 var coords = g.toDomCoords(splitDate, 2.25);
04143109 34
5879c20d 35 // splitX and splitY are the coordinates on the canvas for (2006-11-19, 2.25).
fdcf1ce4
RK
36 var splitX = coords[0];
37 var splitY = coords[1];
38
5879c20d
RK
39 // The drawing area doesn't start at (0, 0), it starts at (area.x, area.y).
40 // That's why we subtract them from splitX and splitY. This gives us the
41 // actual distance from the upper-left hand corder of the graph itself.
42 var leftSideWidth = splitX - area.x;
43 var rightSideWidth = area.w - leftSideWidth;
44 var topHeight = splitY - area.y;
45 var bottomHeight = area.h - topHeight;
2fc82862 46
fdcf1ce4 47 // fillRect(x, y, width, height)
2fc82862 48 // Top section: y = (2.25, +Infinity)
5879c20d 49 // left: (x < 2006-11-19)
e7746234 50 canvas.fillStyle = 'lightblue';
5879c20d 51 canvas.fillRect(area.x, area.y, leftSideWidth, topHeight);
fdcf1ce4 52
5879c20d 53 // right: (x > 2006-11-19)
fdcf1ce4
RK
54 canvas.fillStyle = 'orange';
55 canvas.fillRect(splitX, area.y, rightSideWidth, topHeight);
56
57 // Bottom section: y = (-Infinity, 2.25)
58 canvas.fillStyle = 'pink';
59 canvas.fillRect(area.x, splitY, area.w, bottomHeight);
e7746234
EC
60 }
61 }
62 );
63 </script>
64 </body>
65</html>