diff --git a/docs/sources/shared/visualizations/panel-zoom.md b/docs/sources/shared/visualizations/panel-zoom.md new file mode 100644 index 00000000000..281f138fc63 --- /dev/null +++ b/docs/sources/shared/visualizations/panel-zoom.md @@ -0,0 +1,19 @@ +--- +title: Panel mouse time zoom +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. + +**Zoom in** - Click and drag on the panel to zoom in on a particular time range. + +**Zoom out** - Double-click anywhere on the panel to zoom out the time range. + +When you zoom out, the range doubles with each double-click, adding equal time to each side of the range. +For example, if the original time range is from 9:00 to 9:59, the time range changes as follow with each double-click: + +- 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). diff --git a/docs/sources/visualizations/panels-visualizations/panel-overview/index.md b/docs/sources/visualizations/panels-visualizations/panel-overview/index.md index 299f3963e30..8f6708492a3 100644 --- a/docs/sources/visualizations/panels-visualizations/panel-overview/index.md +++ b/docs/sources/visualizations/panels-visualizations/panel-overview/index.md @@ -175,6 +175,52 @@ 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 + +You can zoom the panel time range in and out, which in turn, changes the dashboard time range. + +This feature is supported for the following visualizations: + +- Candlestick +- Heatmap +- State timeline +- Status history +- Time series + +### Zoom in + +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: + +Time series + +{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-ts-time-zoom-in-mouse.mp4" >}} + +Candlestick + +{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-candle-panel-time-zoom-in-mouse.mp4" >}} + +### Zoom out + +Double-click anywhere on the panel to zoom out the time range. + +The range doubles with each double-click, adding equal time to each side of the range. +For example, if the original time range is from 9:00 to 9:59, the time range changes as follows with each double-click: + +- 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: + +Time series + +{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-ts-time-zoom-out-mouse.mp4" >}} + +Heatmap + +{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-heatmap-panel-time-zoom-out-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 bc07d805000..e5760e78199 100644 --- a/docs/sources/visualizations/panels-visualizations/visualizations/candlestick/index.md +++ b/docs/sources/visualizations/panels-visualizations/visualizations/candlestick/index.md @@ -92,6 +92,10 @@ 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 + +{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="" >}} + ## Configuration options {{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="" >}} diff --git a/docs/sources/visualizations/panels-visualizations/visualizations/heatmap/index.md b/docs/sources/visualizations/panels-visualizations/visualizations/heatmap/index.md index 31ffb8295dc..56c91db0e0d 100644 --- a/docs/sources/visualizations/panels-visualizations/visualizations/heatmap/index.md +++ b/docs/sources/visualizations/panels-visualizations/visualizations/heatmap/index.md @@ -79,6 +79,10 @@ 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 + +{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="" >}} + ## Configuration options {{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="" >}} 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 c5840be810d..ef4066c2b6c 100644 --- a/docs/sources/visualizations/panels-visualizations/visualizations/state-timeline/index.md +++ b/docs/sources/visualizations/panels-visualizations/visualizations/state-timeline/index.md @@ -93,6 +93,10 @@ 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 + +{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="" >}} + ## Configuration options {{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="" >}} 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 4b30df76171..834f50ca733 100644 --- a/docs/sources/visualizations/panels-visualizations/visualizations/status-history/index.md +++ b/docs/sources/visualizations/panels-visualizations/visualizations/status-history/index.md @@ -85,6 +85,10 @@ 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 + +{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="" >}} + ## Configuration options {{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="" >}} 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 e7c51fb74cf..a171c88259a 100644 --- a/docs/sources/visualizations/panels-visualizations/visualizations/time-series/index.md +++ b/docs/sources/visualizations/panels-visualizations/visualizations/time-series/index.md @@ -167,6 +167,10 @@ 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 + +{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="" >}} + ## Configuration options {{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="" >}}