4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
5 <title>Highlighted Region
</title>
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
12 <script type=
"text/javascript" src=
"data.js"></script>
15 <p>Should draw a time series with an unusual region highlighted:
</p>
16 <div id=
"div_g" style=
"width:600px; height:300px;"></div>
18 <p>When you zoom/pan, the region should remain highlighted.
</p>
20 <script type=
"text/javascript">
21 // A basic sinusoidal data series.
23 for (var i =
0; i <
1000; i++) {
24 var base =
10 * Math.sin(i /
90.0);
25 data.push([i, base, base + Math.sin(i /
2.0)]);
28 // Shift one portion out of line.
29 var highlight_start =
450;
30 var highlight_end =
500;
31 for (var i = highlight_start; i <= highlight_end; i++) {
37 document.getElementById(
"div_g"),
40 labels: ['X', 'Est.', 'Actual'],
42 underlayCallback: function(canvas, area, g) {
43 var bottom_left = g.toDomCoords(highlight_start, -
20);
44 var top_right = g.toDomCoords(highlight_end, +
20);
46 var left = bottom_left[
0];
47 var right = top_right[
0];
49 canvas.fillStyle =
"rgba(255, 255, 102, 1.0)";
50 canvas.fillRect(left, area.y, right - left, area.h);