dygraphs select region without zooming

Question

In dygraphs, by default, selecting a region of a graph will highlight it. On mousebutton release, the graph will zoom into the selected region.

If 'showRangeSelector: true' this behavior is disabled. Users cannot interact with the graph.

What I would like is for the user to be able to select a region, highlighting it. On mousebutton release, the selected region would stay highlighted and the an event would be fired with the start and end position of the highlighted region.

You could imagine a number of uses for this (e.g. print various statistics related to the data contained in the highlighted region etc).

Answer 1

Yes I implemented what you said and its working. In order to just select the area without zooming it you can include this code in "zoomCallback" event.

zoomCallback:function(minDate,maxDate,yRanges){
   this.updateOptions({
   dateWindow: null,
   valueRange: null
  });
}

Now you have minDate and maxDate so you can use "underlayCallback" event to highlight the selected area.

underlayCallback:function(canvas,area,g){
    var bottom_left = g.toDomCoords(minDate, -20);
    var top_right = g.toDomCoords(maxDate, +20);

    var left = bottom_left[0];
    var right = top_right[0];

    canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
    canvas.fillRect(left, area.y, right - left, area.h);
}

Hope it helps :)