Merge branch 'master' of https://github.com/kberg/dygraphs
[dygraphs.git] / tests / underlay-callback.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>Custom underlay callback</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
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>
14 </head>
15 <body>
16 <p>Should draw a two-colored background, split horizontally at 2.25:</p>
17 <div id="div_g" style="width:600px; height:300px;"></div>
18
19 <div id="status" style="width:100%; height:200px;"></div>
20
21 <script type="text/javascript">
22 s = document.getElementById("status");
23
24 g = new Dygraph(
25 document.getElementById("div_g"),
26 NoisyData, {
27 rollPeriod: 7,
28 showRoller: true,
29 errorBars: true,
30
31 underlayCallback: function(canvas, area, g) {
32 // Selecting a date in the middle of the graph.
33 var splitDate = new Date("2006-11-19").getTime();
34 var coords = g.toDomCoords(splitDate, 2.25);
35
36 // splitX and splitY are the coordinates on the canvas for (2006-11-19, 2.25).
37 var splitX = coords[0];
38 var splitY = coords[1];
39
40 // The drawing area doesn't start at (0, 0), it starts at (area.x, area.y).
41 // That's why we subtract them from splitX and splitY. This gives us the
42 // actual distance from the upper-left hand corder of the graph itself.
43 var leftSideWidth = splitX - area.x;
44 var rightSideWidth = area.w - leftSideWidth;
45 var topHeight = splitY - area.y;
46 var bottomHeight = area.h - topHeight;
47
48 // fillRect(x, y, width, height)
49 // Top section: y = (2.25, +Infinity)
50 // left: (x < 2006-11-19)
51 canvas.fillStyle = 'lightblue';
52 canvas.fillRect(area.x, area.y, leftSideWidth, topHeight);
53
54 // right: (x > 2006-11-19)
55 canvas.fillStyle = 'orange';
56 canvas.fillRect(splitX, area.y, rightSideWidth, topHeight);
57
58 // Bottom section: y = (-Infinity, 2.25)
59 canvas.fillStyle = 'pink';
60 canvas.fillRect(area.x, splitY, area.w, bottomHeight);
61 }
62 }
63 );
64 </script>
65 </body>
66 </html>