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