From 9f2f93b401330492d1452b6acfe7c26af5d1b57c Mon Sep 17 00:00:00 2001 From: Jesse David Peterson Date: Wed, 14 Jan 2026 15:17:38 -0500 Subject: [PATCH] Docs: Time range pan (#115045) * docs(time-range): document panel level time range pan feature * docs(time-range-pan): include panel time range in panel viz docs pages * docs(fix): correct "x" which was probably a placeholder * Docs: Add pan panel time range (#115102) * Added content to panel-zoom shared file from panel-pan.md and deleted panel-pan.md * Renamed file * Updated overview page and shared file reference in candlestick * Updated shared file refs in other pages * Fixed a couple typos * docs(time-range-pan): reverence only one video of time range panning * docs(dashboard): amend dashboard common time range controls section --------- Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> --- .../{panel-zoom.md => panel-pan-zoom.md} | 10 +++++++-- .../dashboards/use-dashboards/index.md | 11 ++++++---- .../panel-overview/index.md | 22 +++++++++++++++---- .../visualizations/candlestick/index.md | 4 ++-- .../visualizations/heatmap/index.md | 4 ++-- .../visualizations/state-timeline/index.md | 4 ++-- .../visualizations/status-history/index.md | 4 ++-- .../visualizations/time-series/index.md | 4 ++-- 8 files changed, 43 insertions(+), 20 deletions(-) rename docs/sources/shared/visualizations/{panel-zoom.md => panel-pan-zoom.md} (65%) diff --git a/docs/sources/shared/visualizations/panel-zoom.md b/docs/sources/shared/visualizations/panel-pan-zoom.md similarity index 65% rename from docs/sources/shared/visualizations/panel-zoom.md rename to docs/sources/shared/visualizations/panel-pan-zoom.md index 281f138fc63..72b089916ae 100644 --- a/docs/sources/shared/visualizations/panel-zoom.md +++ b/docs/sources/shared/visualizations/panel-pan-zoom.md @@ -4,7 +4,8 @@ comments: | This file is used in the following visualizations: candlestick, heatmap, state timeline, status history, time series. --- -You can zoom the panel time range in and out, which in turn, changes the dashboard time range. +You can pan the panel time range left and right, and zoom it and in and out. +This, in turn, changes the dashboard time range. **Zoom in** - Click and drag on the panel to zoom in on a particular time range. @@ -16,4 +17,9 @@ For example, if the original time range is from 9:00 to 9:59, the time range cha - Next range: 8:30 - 10:29 - Next range: 7:30 - 11:29 -For screen recordings showing these interactions, refer to the [Panel overview documentation](https://grafana.com/docs/grafana//visualizations/panels-visualizations/panel-overview/#zoom-panel-time-range). +**Pan** - Click and drag the x-axis area of the panel to pan the time range. + +The time range shifts by the distance you drag. +For example, if the original time range is from 9:00 to 9:59 and you drag 30 minutes to the right, the time range changes to 9:30 to 10:29. + +For screen recordings showing these interactions, refer to the [Panel overview documentation](https://grafana.com/docs/grafana//visualizations/panels-visualizations/panel-overview/#pan-and-zoom-panel-time-range). diff --git a/docs/sources/visualizations/dashboards/use-dashboards/index.md b/docs/sources/visualizations/dashboards/use-dashboards/index.md index ca9513885bf..5c7141a22bc 100644 --- a/docs/sources/visualizations/dashboards/use-dashboards/index.md +++ b/docs/sources/visualizations/dashboards/use-dashboards/index.md @@ -317,13 +317,16 @@ Click the **Copy time range to clipboard** icon to copy the current time range t You can also copy and paste a time range using the keyboard shortcuts `t+c` and `t+v` respectively. -#### Zoom out (Cmd+Z or Ctrl+Z) +#### Zoom out -Click the **Zoom out** icon to view a larger time range in the dashboard or panel visualization. +- Click the **Zoom out** icon to view a larger time range in the dashboard or panel visualizations +- Double click on the panel graph area (time series family visualizations only) +- Type the `t-` keyboard shortcut -#### Zoom in (only applicable to graph visualizations) +#### Zoom in -Click and drag to select the time range in the visualization that you want to view. +- Click and drag horizontally in the panel graph area to select a time range (time series family visualizations only) +- Type the `t+` keyboard shortcut #### Refresh dashboard diff --git a/docs/sources/visualizations/panels-visualizations/panel-overview/index.md b/docs/sources/visualizations/panels-visualizations/panel-overview/index.md index 8f6708492a3..9f0d07367a1 100644 --- a/docs/sources/visualizations/panels-visualizations/panel-overview/index.md +++ b/docs/sources/visualizations/panels-visualizations/panel-overview/index.md @@ -175,9 +175,10 @@ By hovering over a panel with the mouse you can use some shortcuts that will tar - `pl`: Hide or show legend - `pr`: Remove Panel -## Zoom panel time range +## Pan and zoom panel time range -You can zoom the panel time range in and out, which in turn, changes the dashboard time range. +You can pan the panel time range left and right, and zoom it and in and out. +This, in turn, changes the dashboard time range. This feature is supported for the following visualizations: @@ -191,7 +192,7 @@ This feature is supported for the following visualizations: Click and drag on the panel to zoom in on a particular time range. -The following screen recordings show this interaction in the time series and x visualizations: +The following screen recordings show this interaction in the time series and candlestick visualizations: Time series @@ -211,7 +212,7 @@ For example, if the original time range is from 9:00 to 9:59, the time range cha - Next range: 8:30 - 10:29 - Next range: 7:30 - 11:29 -The following screen recordings demonstrate the preceding example in the time series and x visualizations: +The following screen recordings demonstrate the preceding example in the time series and heatmap visualizations: Time series @@ -221,6 +222,19 @@ Heatmap {{< video-embed src="/media/docs/grafana/panels-visualizations/recording-heatmap-panel-time-zoom-out-mouse.mp4" >}} +### Pan + +Click and drag the x-axis area of the panel to pan the time range. + +The time range shifts by the distance you drag. +For example, if the original time range is from 9:00 to 9:59 and you drag 30 minutes to the right, the time range changes to 9:30 to 10:29. + +The following screen recordings show this interaction in the time series visualization: + +Time series + +{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-ts-time-pan-mouse.mp4" >}} + ## Add a panel To add a panel in a new dashboard click **+ Add visualization** in the middle of the dashboard: diff --git a/docs/sources/visualizations/panels-visualizations/visualizations/candlestick/index.md b/docs/sources/visualizations/panels-visualizations/visualizations/candlestick/index.md index e5760e78199..7748dd749f1 100644 --- a/docs/sources/visualizations/panels-visualizations/visualizations/candlestick/index.md +++ b/docs/sources/visualizations/panels-visualizations/visualizations/candlestick/index.md @@ -92,9 +92,9 @@ The data is converted as follows: {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-candles-volume-v11.6.png" max-width="750px" alt="A candlestick visualization showing the price movements of specific asset." >}} -## Zoom panel time range +## Pan and zoom panel time range -{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/panel-pan-zoom.md" source="grafana" version="" >}} ## Configuration options diff --git a/docs/sources/visualizations/panels-visualizations/visualizations/heatmap/index.md b/docs/sources/visualizations/panels-visualizations/visualizations/heatmap/index.md index 56c91db0e0d..b6005c1761e 100644 --- a/docs/sources/visualizations/panels-visualizations/visualizations/heatmap/index.md +++ b/docs/sources/visualizations/panels-visualizations/visualizations/heatmap/index.md @@ -79,9 +79,9 @@ The data is converted as follows: {{< figure src="/static/img/docs/heatmap-panel/heatmap.png" max-width="1025px" alt="A heatmap visualization showing the random walk distribution over time" >}} -## Zoom panel time range +## Pan and zoom panel time range -{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/panel-pan-zoom.md" source="grafana" version="" >}} ## Configuration options diff --git a/docs/sources/visualizations/panels-visualizations/visualizations/state-timeline/index.md b/docs/sources/visualizations/panels-visualizations/visualizations/state-timeline/index.md index ef4066c2b6c..0a25b3153a1 100644 --- a/docs/sources/visualizations/panels-visualizations/visualizations/state-timeline/index.md +++ b/docs/sources/visualizations/panels-visualizations/visualizations/state-timeline/index.md @@ -93,9 +93,9 @@ You can also create a state timeline visualization using time series data. To do ![State timeline with time series](/media/docs/grafana/panels-visualizations/screenshot-state-timeline-time-series-v11.4.png) -## Zoom panel time range +## Pan and zoom panel time range -{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/panel-pan-zoom.md" source="grafana" version="" >}} ## Configuration options diff --git a/docs/sources/visualizations/panels-visualizations/visualizations/status-history/index.md b/docs/sources/visualizations/panels-visualizations/visualizations/status-history/index.md index 834f50ca733..c3ed5504ac5 100644 --- a/docs/sources/visualizations/panels-visualizations/visualizations/status-history/index.md +++ b/docs/sources/visualizations/panels-visualizations/visualizations/status-history/index.md @@ -85,9 +85,9 @@ The data is converted as follows: {{< figure src="/static/img/docs/status-history-panel/status_history.png" max-width="1025px" alt="A status history panel with two time columns showing the status of two servers" >}} -## Zoom panel time range +## Pan and zoom panel time range -{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/panel-pan-zoom.md" source="grafana" version="" >}} ## Configuration options diff --git a/docs/sources/visualizations/panels-visualizations/visualizations/time-series/index.md b/docs/sources/visualizations/panels-visualizations/visualizations/time-series/index.md index a171c88259a..86ff2290b48 100644 --- a/docs/sources/visualizations/panels-visualizations/visualizations/time-series/index.md +++ b/docs/sources/visualizations/panels-visualizations/visualizations/time-series/index.md @@ -167,9 +167,9 @@ The following example shows three series: Min, Max, and Value. The Min and Max s {{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="" leveloffset="+2" >}} -## Zoom panel time range +## Pan and zoom panel time range -{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/panel-pan-zoom.md" source="grafana" version="" >}} ## Configuration options