Commit | Line | Data |
---|---|---|
e7746234 EC |
1 | <html> |
2 | <head> | |
3 | <title>Custom underlay callback</title> | |
4 | <!--[if IE]> | |
5 | <script type="text/javascript" src="excanvas.js"></script> | |
6 | <![endif]--> | |
7 | <script type="text/javascript" src="../dygraph-combined.js"></script> | |
8 | <script type="text/javascript" src="../dygraph-canvas.js"></script> | |
9 | <script type="text/javascript" src="../dygraph.js"></script> | |
10 | <script type="text/javascript" src="data.js"></script> | |
11 | </head> | |
12 | <body> | |
13 | <p>Should draw a two-colored background, split horizontally at 2.25:</p> | |
14 | <div id="div_g" style="width:600px; height:300px;"></div> | |
15 | ||
16 | <div id="status" style="width:100%; height:200px;"></div> | |
17 | ||
18 | <script type="text/javascript"> | |
19 | s = document.getElementById("status"); | |
20 | ||
21 | g = new Dygraph( | |
22 | document.getElementById("div_g"), | |
23 | NoisyData, { | |
24 | rollPeriod: 7, | |
25 | showRoller: true, | |
26 | errorBars: true, | |
27 | ||
28 | underlayCallback: function(canvas, area, layout) { | |
29 | var splitHeight = area.h * (layout.yscale * (2.25 - layout.minyval)); | |
30 | canvas.fillStyle = 'pink'; | |
31 | canvas.fillRect(area.x, area.y + area.h, area.w, -splitHeight); | |
32 | canvas.fillStyle = 'lightblue'; | |
33 | canvas.fillRect(area.x, 0, area.w, area.y + area.h - splitHeight); | |
34 | } | |
35 | } | |
36 | ); | |
37 | </script> | |
38 | </body> | |
39 | </html> |