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.
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.
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.