Merge branch 'master' of git://github.com/danvk/dygraphs
[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
29 underlayCallback: function(canvas, area, layout) {
30 var splitHeight = area.h * (layout.yscale * (2.25 - layout.minyval));
31 canvas.fillStyle = 'pink';
32 canvas.fillRect(area.x, area.y + area.h, area.w, -splitHeight);
33 canvas.fillStyle = 'lightblue';
34 canvas.fillRect(area.x, 0, area.w, area.y + area.h - splitHeight);
35 }
36 }
37 );
38 </script>
39 </body>
40</html>