3 <title>Custom underlay callback
</title>
5 <script type=
"text/javascript" src=
"../excanvas.js"></script>
7 <script type=
"text/javascript" src=
"../strftime/strftime-min.js"></script>
8 <script type=
"text/javascript" src=
"../rgbcolor/rgbcolor.js"></script>
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>
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>
17 <div id=
"status" style=
"width:100%; height:200px;"></div>
19 <script type=
"text/javascript">
20 s = document.getElementById(
"status");
23 document.getElementById(
"div_g"),
29 underlayCallback: function(canvas, area, g) {
30 var splitHeight = g.toDomCoords(null,
2.25)[
1];
32 // fillRect(x, y, width, height)
33 // Bottom section: y = (-Infinity,
2.25)
34 canvas.fillStyle = 'pink';
35 canvas.fillRect(area.x, splitHeight, area.w, area.h - splitHeight);
37 // Top section: y = (
2.25, +Infinity)
38 canvas.fillStyle = 'lightblue';
39 canvas.fillRect(area.x, area.y, area.w, splitHeight - area.y);