X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Fzoom.html;h=5803af61c5ea9207ec21c93cae7f69162e7c9f48;hb=93a5bb4c827d6665f395c48b216438f95e94d76e;hp=ee6fbec8753d07a34a765d929d4f926307abbc34;hpb=447254de1d05f324f802b80c8398372e5418f3bc;p=dygraphs.git diff --git a/tests/zoom.html b/tests/zoom.html index ee6fbec..5803af6 100644 --- a/tests/zoom.html +++ b/tests/zoom.html @@ -1,23 +1,30 @@ + + 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 - butons are useful for testing.

+ buttons are useful for testing.

Window coordinates (in dates and values):

-
+
+
+

Zoomed: False

+

Zoomed X: False

+

Zoomed Y: False

+

+

Zoom operations:

  @@ -25,13 +32,17 @@       -
+

        -
+

  +

+   +   +  

@@ -39,7 +50,15 @@ 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, yRange) { + showDimensions(minDate, maxDate, yRange); + }, + drawCallback: function(me, initial) { + document.getElementById("zoomed").innerHTML = "" + me.isZoomed(); + document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x"); + document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y"); + } } ); @@ -51,25 +70,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 showDimensions(minDate, maxDate, minValue, maxValue) { - var elem = document.getElementById("dimensions"); - elem.innerHTML = - "dateWindow : [" + minDate + " , "+ maxDate + "],
" + - "valueRange : [" + minValue + " , "+ maxValue + "],"; + 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.doZoomXDates_(minDate, maxDate); + g.updateOptions({ + dateWindow: [minDate, maxDate] + }); + showXDimensions(minDate, maxDate); } function zoomGraphY(minValue, maxValue) { - g.doZoomYValues_(minValue, maxValue); + g.updateOptions({ + valueRange: [minValue, maxValue] + }); + showYDimensions(g.yAxisRanges()); } function unzoomGraph() { - g.doUnzoom_(); + g.updateOptions({ + dateWindow: null, + valueRange: null + }); + } + + function panEdgeFraction(value) { + g.updateOptions({ panEdgeFraction : value }); }