4 <title>Highlighted Region
</title>
6 <script type=
"text/javascript" src=
"../excanvas.js"></script>
8 <script type=
"text/javascript" src=
"../strftime/strftime-min.js"></script>
9 <script type=
"text/javascript" src=
"../rgbcolor/rgbcolor.js"></script>
10 <script type=
"text/javascript" src=
"../dygraph-canvas.js"></script>
11 <script type=
"text/javascript" src=
"../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'],
41 underlayCallback: function(canvas, area, g) {
42 var bottom_left = g.toDomCoords(highlight_start, -
20);
43 var top_right = g.toDomCoords(highlight_end, +
20);
45 var left = bottom_left[
0];
46 var right = top_right[
0];
48 canvas.fillStyle =
"rgba(255, 255, 102, 1.0)";
49 canvas.fillRect(left, area.y, right - left, area.h);