fix drawing logic in underlayCallback
[dygraphs.git] / tests / underlay-callback.html
CommitLineData
e7746234
EC
1<html>
2 <head>
3 <title>Custom underlay callback</title>
4 <!--[if IE]>
a2b2c3a1 5 <script type="text/javascript" src="../excanvas.js"></script>
e7746234 6 <![endif]-->
d37dca40
DV
7 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
8 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
e7746234
EC
9 <script type="text/javascript" src="../dygraph-canvas.js"></script>
10 <script type="text/javascript" src="../dygraph.js"></script>
11 <script type="text/javascript" src="data.js"></script>
12 </head>
13 <body>
14 <p>Should draw a two-colored background, split horizontally at 2.25:</p>
15 <div id="div_g" style="width:600px; height:300px;"></div>
16
17 <div id="status" style="width:100%; height:200px;"></div>
18
19 <script type="text/javascript">
20 s = document.getElementById("status");
21
22 g = new Dygraph(
23 document.getElementById("div_g"),
24 NoisyData, {
25 rollPeriod: 7,
26 showRoller: true,
27 errorBars: true,
28
04143109
DV
29 underlayCallback: function(canvas, area, g) {
30 var splitHeight = g.toDomCoords(null, 2.25)[1];
31
2fc82862
DV
32 // fillRect(x, y, width, height)
33 // Bottom section: y = (-Infinity, 2.25)
e7746234 34 canvas.fillStyle = 'pink';
2fc82862
DV
35 canvas.fillRect(area.x, splitHeight, area.w, area.h - splitHeight);
36
37 // Top section: y = (2.25, +Infinity)
e7746234 38 canvas.fillStyle = 'lightblue';
2fc82862 39 canvas.fillRect(area.x, area.y, area.w, splitHeight - area.y);
e7746234
EC
40 }
41 }
42 );
43 </script>
44 </body>
45</html>