4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
9 <script type=
"text/javascript" src=
"../strftime/strftime-min.js"></script>
10 <script type=
"text/javascript" src=
"../rgbcolor/rgbcolor.js"></script>
11 <script type=
"text/javascript" src=
"../dygraph-canvas.js"></script>
12 <script type=
"text/javascript" src=
"../dygraph.js"></script>
13 <script type=
"text/javascript" src=
"data.js"></script>
16 <h3>Click the buttons to change the zoom level or just use the normal
17 click-and drag. While zoom typically works by click-and-drag, the
18 buttons are useful for testing.
</h3>
19 <h4>Window coordinates (in dates and values):
</h4>
20 <div id=
"xdimensions"></div> <div id=
"ydimensions"></div>
21 <div style=
"float: right">
22 <p>Zoomed:
<span id=
"zoomed">False
</span><p/>
23 <p>Zoomed X:
<span id=
"zoomedX">False
</span><p/>
24 <p>Zoomed Y:
<span id=
"zoomedY">False
</span><p/>
26 <div id=
"div_g" style=
"width:600px; height:300px;"></div>
29 <p><b>Zoom operations:
</b></p>
31 <input type=
"button" value=
"Y (3,5)" onclick=
"zoomGraphY(3,5)">
32 <input type=
"button" value=
"Y (0,4)" onclick=
"zoomGraphY(0,4)">
33 <input type=
"button" value=
"Y (2,4)" onclick=
"zoomGraphY(2,4)">
34 <input type=
"button" value=
"Y (0,2)" onclick=
"zoomGraphY(0,2)">
35 <input type=
"button" value=
"Y (0,1)" onclick=
"zoomGraphY(0,1)">
37 <input type=
"button" value=
"Oct 8-13" onclick=
"zoomGraphX(1160261979962, 1163905694248)">
38 <input type=
"button" value=
"Oct 22-28" onclick=
"zoomGraphX(1161489164461 , 1162008465957)">
39 <input type=
"button" value=
"Oct 23-24" onclick=
"zoomGraphX(1161575878860, 1161660991675)">
40 <input type=
"button" value=
"Oct 26 6AM-noon" onclick=
"zoomGraphX(1161770537840, 1161792063332)">
42 <input type=
"button" value=
"Unzoom" onclick=
"unzoomGraph()">
44 <input type=
"button" value=
"pan frame null" onclick=
"panEdgeFraction(null)">
45 <input type=
"button" value=
"pan frame 0.1" onclick=
"panEdgeFraction(0.1)">
46 <input type=
"button" value=
"pan frame 0.5" onclick=
"panEdgeFraction(0.5)">
50 <script type=
"text/javascript">
52 document.getElementById(
"div_g"),
55 zoomCallback : function(minDate, maxDate, yRange) {
56 showDimensions(minDate, maxDate, yRange);
58 drawCallback: function(me, initial) {
59 document.getElementById(
"zoomed").innerHTML =
"" + me.isZoomed();
60 document.getElementById(
"zoomedX").innerHTML =
"" + me.isZoomed(
"x");
61 document.getElementById(
"zoomedY").innerHTML =
"" + me.isZoomed(
"y");
66 // TODO(konigsberg): Implement a visualization that verifies that initial
67 // displays also show correctly.
69 // Pull an initial value for logging.
70 var minDate = g.xAxisRange()[
0];
71 var maxDate = g.xAxisRange()[
1];
72 var minValue = g.yAxisRange()[
0];
73 var maxValue = g.yAxisRange()[
1];
74 showDimensions(minDate, maxDate, [minValue, maxValue]);
76 function showDimensions(minDate, maxDate, yRanges) {
77 showXDimensions(minDate, maxDate);
78 showYDimensions(yRanges);
81 function showXDimensions(first, second) {
82 var elem = document.getElementById(
"xdimensions");
83 elem.innerHTML =
"dateWindow : [" + first +
", "+ second +
"]";
86 function showYDimensions(ranges) {
87 var elem = document.getElementById(
"ydimensions");
88 elem.innerHTML =
"valueRange : [" + ranges +
"]";
91 function zoomGraphX(minDate, maxDate) {
93 dateWindow: [minDate, maxDate]
95 showXDimensions(minDate, maxDate);
98 function zoomGraphY(minValue, maxValue) {
100 valueRange: [minValue, maxValue]
102 showYDimensions(g.yAxisRanges());
105 function unzoomGraph() {
112 function panEdgeFraction(value) {
113 g.updateOptions({ panEdgeFraction : value });