Thursday, September 22, 2011

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.

8 comments:

  1. Fantastic! This is really a great graphing tool, keep up the good work!

    ReplyDelete
  2. great .. and it will be even more cool if we can specify the series to use for the mini plot instead of avg series :)

    ReplyDelete
  3. Great I will subit a patch ;)
    I have also noticed that the mini plot does not correctly handles series with null values (detected has multiple values due to a simple type check)
    But dygraphs is still a real good lib and i'm thinking of completly replacing gviz by dygraphs

    ReplyDelete
  4. What about zooming on the Y axis with the range selector turned on?

    ReplyDelete
  5. Bernat,

    Sorry, no y axis support at this time. Like the x axis selector, we welcome contributions!

    ReplyDelete
  6. Is there a way of rendering the range selector as a step plot?

    ReplyDelete
  7. Hi All,

    Is there some way to capture the start and end point of the window being selected?

    ReplyDelete