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 date and value windows of the chart.
</h3>
15 <h4>Window coordinates (in dates and values):
</h4>
16 <div id=
"xdimensions"></div> <div id=
"ydimensions"></div>
20 Toggle the check box below to determine the difference in operation of the zoom flags
21 when the date and value windows of the chart are changed using the arrows underneath.
23 <input id=
"noZoomFlagChange" type=
"checkbox" checked=true
>Do not change zoom
26 <div style=
"float: right">
27 <p>Zoomed:
<span id=
"zoomed">False
</span><p/>
28 <p>Zoomed X:
<span id=
"zoomedX">False
</span><p/>
29 <p>Zoomed Y:
<span id=
"zoomedY">False
</span><p/>
31 <div style=
"float: left">
32 <p><input type=
"button" value=
"↑" onclick=
"adjustTop(+1)"></p>
33 <p><input type=
"button" value=
"↓" onclick=
"adjustTop(-1)"></p>
35 <input type=
"button" value=
"←" onclick=
"adjustFirst(-100000000)">
36 <input type=
"button" value=
"→" onclick=
"adjustFirst(+100000000)">
38 <p><input type=
"button" value=
"↑" onclick=
"adjustBottom(+1)"></p>
39 <p><input type=
"button" value=
"↓" onclick=
"adjustBottom(-1)"></p>
41 <div id=
"div_g" style=
"width: 600px; height: 300px; float: left"></div>
42 <div style=
"float: left">
44 <input type=
"button" value=
"←" onclick=
"adjustLast(-100000000)">
45 <input type=
"button" value=
"→" onclick=
"adjustLast(+100000000)">
48 <script type=
"text/javascript">
50 document.getElementById(
"div_g"),
54 zoomCallback : function(minDate, maxDate, yRange) {
55 showDimensions(minDate, maxDate, yRange);
57 drawCallback: function(me, initial) {
58 document.getElementById(
"zoomed").innerHTML =
"" + me.isZoomed();
59 document.getElementById(
"zoomedX").innerHTML =
"" + me.isZoomed(
"x");
60 document.getElementById(
"zoomedY").innerHTML =
"" + me.isZoomed(
"y");
61 var x_range = me.xAxisRange()
62 var elem = document.getElementById(
"xdimensions")
63 elem.innerHTML =
"dateWindow : [" + x_range[
0] +
", "+ x_range[
1] +
"]"
68 // Pull an initial value for logging.
69 var minDate = g.xAxisRange()[
0];
70 var maxDate = g.xAxisRange()[
1];
71 var minValue = g.yAxisRange()[
0];
72 var maxValue = g.yAxisRange()[
1];
73 showDimensions(minDate, maxDate, [minValue, maxValue]);
75 function showDimensions(minDate, maxDate, yRanges) {
76 showXDimensions(minDate, maxDate);
77 showYDimensions(yRanges);
80 function getNoChange() {
82 var elem = document.getElementById(
"noZoomFlagChange")
84 options.noZoomFlagChange = true
89 function adjustTop(value) {
90 options = getNoChange()
92 options.valueRange = [minValue, maxValue]
94 g.updateOptions(options)
97 function adjustBottom(value) {
98 options = getNoChange()
100 options.valueRange = [minValue, maxValue]
102 g.updateOptions(options)
105 function adjustFirst(value) {
106 options = getNoChange()
108 options.dateWindow = [minDate, maxDate]
110 g.updateOptions(options)
113 function adjustLast(value) {
114 options = getNoChange()
116 options.dateWindow = [minDate, maxDate]
117 g.updateOptions(options)
120 function showXDimensions(first, second) {
121 var elem = document.getElementById(
"xdimensions");
122 elem.innerHTML =
"dateWindow : [" + first +
", "+ second +
"]";
125 function showYDimensions(ranges) {
126 var elem = document.getElementById(
"ydimensions");
127 elem.innerHTML =
"valueRange : [" + ranges +
"]";