Posted by & filed under Data Visualization.

This blog addresses the initial design for zooming in and out of a time series chart.  The horizontal axis of a time series chart represents a timeline.  The user may be able to change the timeframe of the chart by:

1. selecting an existing time period

2. entering a custom  time period

3. zooming in/out based on current filter options

4. zooming interactively with an optional navigation chart

Interactively zooming with the main chart will not be covered with this round of design.

 

The Proposal

TimeFilter
1. Selecting an existing time period

 

From a PatternFly perspective, we already have a pattern associated with setting the time frame filter on a dashboard card.  The proposal is to remain consistent with this design, thus placing a time frame filter drop down (A) on the top right side of the chart.  The items in the list should be ordered from the smallest to largest time frame.

When multiple charts exist on the same page, a single time frame filter component would be displayed and will affect all associated charts.

At this point, we are not suggesting a list of time periods to be included, since the time periods will differ based on the data being displayed.

2. Entering a custom time period

 

Optionally allow the user to enter a custom time period (B) in the time frame filter component.

The user should be able to set a custom time period.  In this case, the proposal is to have a “Custom” button following the time frame filter drop down.  Upon selecting the custom button, the user should be prompted to select a time frame by selecting a start and end date with the date picker.  This custom value will be added to the drop down as the first item and selected.

3. Zooming in/out based on time frame

Optionally including zoom in/out buttons ( C ) in the time frame filter component.  

These buttons are included to allow the user to quickly change the time filter with a single click.  The zoom in (+) button will change the selection in the drop down (A) to be the previous item in the list.  When the first item in the list is selected, the (+) button should be disabled.

The zoom out (-) button will change the selection in the drop down (A) to be the next item in the list.  When the last item in the list is selected, the (-) button should be disabled.

4. Zooming interactively with an optional navigation chart

Optionally provide the ability to interactively zoom with the chart via a smaller navigation chart below the main chart.  There are many useful interactions with the smaller navigation chart:

Drag it left / right to scroll through the data on the main chart

Click and drag the left and right edges to increase / decrease the amount of data shown

Click off it to get rid of it, and so show the full data set in the main chart

Click off it and drag to create a new box

Any zooming interactions with the chart will cause a custom time period to be added to the drop down list in the time frame filter component.

When multiple charts exist on the same page, a single optional navigation chart is displayed under the bottom chart and will affect all associated charts.

See a live example of the D3 brush functionality here.

Screen Shot 2016-02-29 at 10.39.53 PM
Your Feedback

We are specifically interested in finding out your thoughts on the proposals we have mentioned above.  Please leave comments in the blog about how you would expect to zoom into a time series chart as well as any other comments that you might have about the current direction.

4 Responses to “Zooming in and out of a time series chart”

  1. Mike Thompson

    Can the custom time period section be flushed out a bit more? [It is the more difficult part to determine with range selections dealing with date formats, time formats, date/time formats; and even draggable calendars for dates]

    Also, the brush selection example is a D3 example and not a C3 example.

    Reply
  2. Matt Carrano

    I like this method for zooming, but I only had one concern or comment.

    Because the navigation chart has the same width as the chart being examined, it was a bit hard to understand what I was looking at at fist glance. Felt more like two data series mapped against the same x-axis. I wonder if this would work better if the Navigation chart were a thumbnail inset or otherwise differentiated visually so the two would not be confused.

    Reply
    • Great point @Matt, I think this would be a great thing for us to get some user feedback on as well. Thanks for your comment

      Reply

Leave a Reply

(will not be published)