zoom.html needed a little love.
[dygraphs.git] / tests / zoom.html
1 <html>
2 <head>
3 <title>noise</title>
4 <!--[if IE]>
5 <script type="text/javascript" src="excanvas.js"></script>
6 <![endif]-->
7 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
8 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
9 <script type="text/javascript" src="../dygraph-canvas.js"></script>
10 <script type="text/javascript" src="../dygraph.js"></script>
11 <script type="text/javascript" src="data.js"></script>
12 </head>
13 <body>
14 <h3>Click the buttons to change the zoom</h3>
15 <h4>Window coordinates (in dates and values):</h4>
16 <div id = "dimensions"></div>
17 <div id="div_g" style="width:600px; height:300px;"></div>
18
19 <p><b>Zoom operations:</b></p>
20 <p>
21 <input type="button" value="Y (3,5)" onclick="sizeGraph(1)">&nbsp;
22 <input type="button" value="Y (0,4)" onclick="sizeGraph(2)">&nbsp;
23 <input type="button" value="Y (2,4)" onclick="sizeGraph(3)">&nbsp;
24 <input type="button" value="Y (0,2)" onclick="sizeGraph(4)">&nbsp;
25 <input type="button" value="Y (1,0)" onclick="sizeGraph(5)">&nbsp;
26 <input type="button" value="Unzoom" onclick="sizeGraph(0)">&nbsp;
27 </p>
28
29
30 <script type="text/javascript">
31 g = new Dygraph(
32 document.getElementById("div_g"),
33 NoisyData, {
34 zoomCallback : function(a,b,c,d) { showDimensions(a,b,c,d); }
35 }
36 );
37
38 // TODO(konigsberg): Implement a visualization that verifies that initial
39 // displays also show correctly.
40
41 // Pull an initial value for logging.
42 var minDate = g.xAxisRange()[0];
43 var maxDate = g.xAxisRange()[1];
44 var minValue = g.yAxisRange()[0];
45 var maxValue = g.yAxisRange()[1];
46
47 showDimensions(minDate, maxDate, minValue, maxValue);
48
49 function showDimensions(minDate, maxDate, minValue, maxValue) {
50 var elem = document.getElementById("dimensions");
51 elem.innerHTML =
52 "dateWindow : [" + minDate + " , "+ maxDate + "],<br>" +
53 "valueRange : [" + minValue + " , "+ maxValue + "],";
54 }
55
56 function sizeGraph(i) {
57 switch(i) {
58 case 0: g.doUnzoom_();
59 break;
60 case 1: g.doZoomYValues_(5, 3);
61 break;
62 case 2: g.doZoomYValues_(4, 0);
63 break;
64 case 3: g.doZoomYValues_(4, 2);
65 break;
66 case 4: g.doZoomYValues_(2, 0);
67 break;
68 case 5: g.doZoomYValues_(1, 0);
69 break;
70 }
71 }
72 </script>
73
74 </body>
75 </html>