projects / dygraphs.git / blame
| Commit | Line | Data |
|---|---|---|
| 54425b14 | 1 | <!DOCTYPE html> |
| d9e6fa47 DV |
2 | <html> |
| 3 | <head> | |
| fd6b8dad | 4 | <link rel="stylesheet" href="../dist/dygraph.css"> |
| d9e6fa47 | 5 | <title>Highlighted Region</title> |
| fbd6834a | 6 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
| 7e5ddc94 | 7 | |
| d9e6fa47 DV |
8 | <script type="text/javascript" src="data.js"></script> |
| 9 | </head> | |
| 10 | <body> | |
| 11 | <p>Should draw a time series with an unusual region highlighted:</p> | |
| 12 | <div id="div_g" style="width:600px; height:300px;"></div> | |
| 13 | ||
| 14 | <p>When you zoom/pan, the region should remain highlighted.</p> | |
| 15 | ||
| 16 | <script type="text/javascript"> | |
| 17 | // A basic sinusoidal data series. | |
| 18 | var data = []; | |
| 19 | for (var i = 0; i < 1000; i++) { | |
| 20 | var base = 10 * Math.sin(i / 90.0); | |
| 21 | data.push([i, base, base + Math.sin(i / 2.0)]); | |
| 22 | } | |
| 23 | ||
| 24 | // Shift one portion out of line. | |
| 25 | var highlight_start = 450; | |
| 26 | var highlight_end = 500; | |
| 27 | for (var i = highlight_start; i <= highlight_end; i++) { | |
| 28 | data[i][2] += 5.0; | |
| 29 | } | |
| 30 | ||
| 31 | ||
| f6fbf9e0 | 32 | var g = new Dygraph( |
| d9e6fa47 DV |
33 | document.getElementById("div_g"), |
| 34 | data, | |
| 35 | { | |
| 36 | labels: ['X', 'Est.', 'Actual'], | |
| b1a3b195 | 37 | animatedZooms: true, |
| 04143109 | 38 | underlayCallback: function(canvas, area, g) { |
| d9e6fa47 DV |
39 | var bottom_left = g.toDomCoords(highlight_start, -20); |
| 40 | var top_right = g.toDomCoords(highlight_end, +20); | |
| 41 | ||
| 42 | var left = bottom_left[0]; | |
| 43 | var right = top_right[0]; | |
| 44 | ||
| eb7bf005 | 45 | canvas.fillStyle = "rgba(255, 255, 102, 1.0)"; |
| d9e6fa47 DV |
46 | canvas.fillRect(left, area.y, right - left, area.h); |
| 47 | } | |
| 48 | ||
| 49 | } | |
| 50 | ); | |
| 51 | </script> | |
| 52 | </body> | |
| 53 | </html> |