+<!DOCTYPE html>
<html>
<head>
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Highlighted Region</title>
- <!--[if IE]>
- <script type="text/javascript" src="excanvas.js"></script>
- <![endif]-->
- <script type="text/javascript" src="../strftime/strftime-min.js"></script>
- <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
- <script type="text/javascript" src="../dygraph-canvas.js"></script>
- <script type="text/javascript" src="../dygraph.js"></script>
+ <script type="text/javascript" src="../dist/dygraph.js"></script>
+
<script type="text/javascript" src="data.js"></script>
</head>
<body>
}
- new Dygraph(
+ var g = new Dygraph(
document.getElementById("div_g"),
data,
{
labels: ['X', 'Est.', 'Actual'],
- underlayCallback: function(canvas, area, layout, g) {
+ animatedZooms: true,
+ underlayCallback: function(canvas, area, g) {
var bottom_left = g.toDomCoords(highlight_start, -20);
var top_right = g.toDomCoords(highlight_end, +20);
var left = bottom_left[0];
var right = top_right[0];
- canvas.fillStyle = "rgba(255, 255, 102, 0.5)";
+ canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
canvas.fillRect(left, area.y, right - left, area.h);
}