X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Fzoom.html;h=a79e1418787ce114669b21c5b9e3236e9458c9f5;hb=44f29e932dcbe83c1bfaebb8735579392e27a5df;hp=c59284a0dd1f098d763d176227f599c04bb315ed;hpb=a2db51b539e5a5db661501a10e8925249218cd15;p=dygraphs.git diff --git a/tests/zoom.html b/tests/zoom.html index c59284a..a79e141 100644 --- a/tests/zoom.html +++ b/tests/zoom.html @@ -1,8 +1,10 @@ + - noise + + zoom @@ -11,19 +13,31 @@ -

Click the buttons to change the zoom

+

Click the buttons to change the zoom level or just use the normal + click-and drag. While zoom typically works by click-and-drag, the + buttons are useful for testing.

Window coordinates (in dates and values):

-
+

Zoom operations:

-   -   -   -   -   -   +   +   +   +   +   +

+   +   +   +   +

+   +

+   +   +  

@@ -31,7 +45,10 @@ g = new Dygraph( document.getElementById("div_g"), NoisyData, { - zoomCallback : function(a,b,c,d) { showDimensions(a,b,c,d); } + errorBars: true, + zoomCallback : function(minDate, maxDate, yRanges) { + showDimensions(minDate, maxDate, yRanges); + } } ); @@ -43,31 +60,46 @@ var maxDate = g.xAxisRange()[1]; var minValue = g.yAxisRange()[0]; var maxValue = g.yAxisRange()[1]; + showDimensions(minDate, maxDate, [minValue, maxValue]); - showDimensions(minDate, maxDate, minValue, maxValue); + function showDimensions(minDate, maxDate, yRanges) { + showXDimensions(minDate, maxDate); + showYDimensions(yRanges); + } + + function showXDimensions(first, second) { + var elem = document.getElementById("xdimensions"); + elem.innerHTML = "dateWindow : [" + first + ", "+ second + "]"; + } + + function showYDimensions(ranges) { + var elem = document.getElementById("ydimensions"); + elem.innerHTML = "valueRange : [" + ranges + "]"; + } + + function zoomGraphX(minDate, maxDate) { + g.updateOptions({ + dateWindow: [minDate, maxDate] + }); + showXDimensions(minDate, maxDate); + } + + function zoomGraphY(minValue, maxValue) { + g.updateOptions({ + valueRange: [minValue, maxValue] + }); + showYDimensions(g.yAxisRanges()); + } - function showDimensions(minDate, maxDate, minValue, maxValue) { - var elem = document.getElementById("dimensions"); - elem.innerHTML = - "dateWindow : [" + minDate + " , "+ maxDate + "],
" + - "valueRange : [" + minValue + " , "+ maxValue + "],"; + function unzoomGraph() { + g.updateOptions({ + dateWindow: null, + valueRange: null + }); } - function sizeGraph(i) { - switch(i) { - case 0: g.doUnzoom_(); - break; - case 1: g.doZoomYValues_(5, 3); - break; - case 2: g.doZoomYValues_(4, 0); - break; - case 3: g.doZoomYValues_(4, 2); - break; - case 4: g.doZoomYValues_(2, 0); - break; - case 5: g.doZoomYValues_(1, 0); - break; - } + function panEdgeFraction(value) { + g.updateOptions({ panEdgeFraction : value }); }