5 <script type=
"text/javascript" src=
"excanvas.js"></script>
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>
14 <h3>Click the buttons to change the zoom level or just use the normal
16 <h4>Window coordinates (in dates and values):
</h4>
17 <div id =
"dimensions"></div>
18 <div id=
"div_g" style=
"width:600px; height:300px;"></div>
20 <p><b>Zoom operations:
</b></p>
22 <input type=
"button" value=
"Y (3,5)" onclick=
"zoomGraphY(3,5)">
23 <input type=
"button" value=
"Y (0,4)" onclick=
"zoomGraphY(0,4)">
24 <input type=
"button" value=
"Y (2,4)" onclick=
"zoomGraphY(2,4)">
25 <input type=
"button" value=
"Y (0,2)" onclick=
"zoomGraphY(0,2)">
26 <input type=
"button" value=
"Y (0,1)" onclick=
"zoomGraphY(0,1)">
28 <input type=
"button" value=
"Oct 8-13" onclick=
"zoomGraphX(1160261979962, 1163905694248)">
29 <input type=
"button" value=
"Oct 22-28" onclick=
"zoomGraphX(1161489164461 , 1162008465957)">
30 <input type=
"button" value=
"Oct 23-24" onclick=
"zoomGraphX(1161575878860, 1161660991675)">
31 <input type=
"button" value=
"Oct 26 6AM-noon" onclick=
"zoomGraphX(1161770537840, 1161792063332)">
33 <input type=
"button" value=
"Unzoom" onclick=
"unzoomGraph()">
37 <script type=
"text/javascript">
39 document.getElementById(
"div_g"),
41 zoomCallback : function(a,b,c,d) { showDimensions(a,b,c,d); }
45 // TODO(konigsberg): Implement a visualization that verifies that initial
46 // displays also show correctly.
48 // Pull an initial value for logging.
49 var minDate = g.xAxisRange()[
0];
50 var maxDate = g.xAxisRange()[
1];
51 var minValue = g.yAxisRange()[
0];
52 var maxValue = g.yAxisRange()[
1];
53 showDimensions(minDate, maxDate, minValue, maxValue);
55 function showDimensions(minDate, maxDate, minValue, maxValue) {
56 var elem = document.getElementById(
"dimensions");
58 "dateWindow : [" + minDate +
" , "+ maxDate +
"],<br>" +
59 "valueRange : [" + minValue +
" , "+ maxValue +
"],";
62 function zoomGraphX(minDate, maxDate) {
63 g.doZoomXDates_(minDate, maxDate);
66 function zoomGraphY(minValue, maxValue) {
67 g.doZoomYValues_(minValue, maxValue);
70 function unzoomGraph() {