Dygraphs has an Annotated Range Selector!

Dygraphs now has an annotated range selector, thanks to an external contribution by Paul Felix. Inspired by Google's Annotated Time Line and other time series chart tools, you can now have easy zooming and panning of the data along the X axis. The widget is displayed at the bottom of the graph when you set the option showRangeSelector to true. Here is a simple example:

  new Dygraph(
    document.getElementById("graphdiv"),
    data,
    {showRangeSelector: true}
  );

Some other notes:

• Initially, the entire X range is shown.
• Zooming is performed by dragging one of the two zoom handles.
• Once zoomed in, panning is performed by dragging the section between the zoom handles.
• A mini plot of the data is displayed in the range selector.
• For multiple series, the mini plot is an average of the series values.

Additional range selector options are described in the Interactive Elements section of the dygraphs options reference.