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
</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>
19 <p><b>Zoom operations:
</b></p>
21 <input type=
"button" value=
"Y (3,5)" onclick=
"sizeGraph(1)">
22 <input type=
"button" value=
"Y (0,4)" onclick=
"sizeGraph(2)">
23 <input type=
"button" value=
"Y (2,4)" onclick=
"sizeGraph(3)">
24 <input type=
"button" value=
"Y (0,2)" onclick=
"sizeGraph(4)">
25 <input type=
"button" value=
"Y (1,0)" onclick=
"sizeGraph(5)">
26 <input type=
"button" value=
"Unzoom" onclick=
"sizeGraph(0)">
30 <script type=
"text/javascript">
32 document.getElementById(
"div_g"),
34 zoomCallback : function(a,b,c,d) { showDimensions(a,b,c,d); }
38 // TODO(konigsberg): Implement a visualization that verifies that initial
39 // displays also show correctly.
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];
47 showDimensions(minDate, maxDate, minValue, maxValue);
49 function showDimensions(minDate, maxDate, minValue, maxValue) {
50 var elem = document.getElementById(
"dimensions");
52 "dateWindow : [" + minDate +
" , "+ maxDate +
"],<br>" +
53 "valueRange : [" + minValue +
" , "+ maxValue +
"],";
56 function sizeGraph(i) {
58 case
0: g.doUnzoom_();
60 case
1: g.doZoomYValues_(
5,
3);
62 case
2: g.doZoomYValues_(
4,
0);
64 case
3: g.doZoomYValues_(
4,
2);
66 case
4: g.doZoomYValues_(
2,
0);
68 case
5: g.doZoomYValues_(
1,
0);