Merge branch 'master' of https://github.com/kberg/dygraphs
[dygraphs.git] / tests / zoom.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>zoom</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
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>
14 </head>
15 <body>
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 id="div_g" style="width:600px; height:300px;"></div>
22
23 <p><b>Zoom operations:</b></p>
24 <p>
25 <input type="button" value="Y (3,5)" onclick="zoomGraphY(3,5)">&nbsp;
26 <input type="button" value="Y (0,4)" onclick="zoomGraphY(0,4)">&nbsp;
27 <input type="button" value="Y (2,4)" onclick="zoomGraphY(2,4)">&nbsp;
28 <input type="button" value="Y (0,2)" onclick="zoomGraphY(0,2)">&nbsp;
29 <input type="button" value="Y (0,1)" onclick="zoomGraphY(0,1)">&nbsp;
30 <br> <br>
31 <input type="button" value="Oct 8-13" onclick="zoomGraphX(1160261979962, 1163905694248)">&nbsp;
32 <input type="button" value="Oct 22-28" onclick="zoomGraphX(1161489164461 , 1162008465957)">&nbsp;
33 <input type="button" value="Oct 23-24" onclick="zoomGraphX(1161575878860, 1161660991675)">&nbsp;
34 <input type="button" value="Oct 26 6AM-noon" onclick="zoomGraphX(1161770537840, 1161792063332)">&nbsp;
35 <br> <br>
36 <input type="button" value="Unzoom" onclick="unzoomGraph()">&nbsp;
37 <br> <br>
38 <input type="button" value="pan frame 0" onclick="panEdgeFraction(0)">&nbsp;
39 <input type="button" value="pan frame 0.1" onclick="panEdgeFraction(0.1)">&nbsp;
40 <input type="button" value="pan frame 0.5" onclick="panEdgeFraction(0.5)">&nbsp;
41 </p>
42
43
44 <script type="text/javascript">
45 g = new Dygraph(
46 document.getElementById("div_g"),
47 NoisyData, {
48 errorBars: true,
49 zoomCallback : function(minDate, maxDate, yRanges) {
50 showDimensions(minDate, maxDate, yRanges);
51 }
52 }
53 );
54
55 // TODO(konigsberg): Implement a visualization that verifies that initial
56 // displays also show correctly.
57
58 // Pull an initial value for logging.
59 var minDate = g.xAxisRange()[0];
60 var maxDate = g.xAxisRange()[1];
61 var minValue = g.yAxisRange()[0];
62 var maxValue = g.yAxisRange()[1];
63 showDimensions(minDate, maxDate, [minValue, maxValue]);
64
65 function showDimensions(minDate, maxDate, yRanges) {
66 showXDimensions(minDate, maxDate);
67 showYDimensions(yRanges);
68 }
69
70 function showXDimensions(first, second) {
71 var elem = document.getElementById("xdimensions");
72 elem.innerHTML = "dateWindow : [" + first + ", "+ second + "]";
73 }
74
75 function showYDimensions(ranges) {
76 var elem = document.getElementById("ydimensions");
77 elem.innerHTML = "valueRange : [" + ranges + "]";
78 }
79
80 function zoomGraphX(minDate, maxDate) {
81 g.updateOptions({
82 dateWindow: [minDate, maxDate]
83 });
84 showXDimensions(minDate, maxDate);
85 }
86
87 function zoomGraphY(minValue, maxValue) {
88 g.updateOptions({
89 valueRange: [minValue, maxValue]
90 });
91 showYDimensions(g.yAxisRanges());
92 }
93
94 function unzoomGraph() {
95 g.updateOptions({
96 dateWindow: null,
97 valueRange: null
98 });
99 }
100
101 function panEdgeFraction(value) {
102 g.updateOptions({ panEdgeFraction : value });
103 }
104 </script>
105
106 </body>
107 </html>