Jesse David PetersonandIsabel Matwawana
9f2f93b401
* 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>
263 lines
13 KiB
Markdown
263 lines
13 KiB
Markdown
---
|
|
keywords:
|
|
- transform
|
|
- query
|
|
- panel
|
|
- dashboard
|
|
- rows
|
|
- dynamic
|
|
- add
|
|
labels:
|
|
products:
|
|
- cloud
|
|
- enterprise
|
|
- oss
|
|
menuTitle: Panel overview
|
|
title: Panel overview
|
|
description: Learn about the features of the panel
|
|
weight: 15
|
|
refs:
|
|
configure-panel-options:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-panel-options/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-panel-options/
|
|
configure-standard-options:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/
|
|
data-sources:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/connect-externally-hosted/data-sources/
|
|
configure-data-links:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-data-links/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-data-links/
|
|
visualization:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/
|
|
legend:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-legend/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-legend/
|
|
create:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/alerting/alerting-rules/create-grafana-managed-rule/#create-alerts-from-panels
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/alerting-and-irm/alerting/alerting-rules/create-grafana-managed-rule/#create-alerts-from-panels
|
|
share:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/share-query/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/share-query/
|
|
tooltips:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-tooltips/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-tooltips/
|
|
ai:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
|
configure-value-mappings:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-value-mappings/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-value-mappings/
|
|
configure-field-overrides:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/
|
|
query:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/
|
|
panel-links:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/manage-dashboard-links/#panel-links
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/manage-dashboard-links/#panel-links
|
|
data-source-management:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/administration/data-source-management/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/administration/data-source-management/
|
|
transformations:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/transform-data/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/transform-data/
|
|
configure-thresholds:
|
|
- pattern: /docs/grafana/
|
|
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-thresholds/
|
|
- pattern: /docs/grafana-cloud/
|
|
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-thresholds/
|
|
aliases:
|
|
- ../../panels-visualizations/panel-overview/ # /docs/grafana/next/panels-visualizations/panel-overview/
|
|
---
|
|
|
|
# Panel overview
|
|
|
|
A Grafana panel is a visual representation of data composed of a [query](ref:query) and a [visualization](ref:visualization). Within panels, you can apply [transformations](ref:transformations), which process the results of a query before they're passed on for visualization. You can also further customize a panel by formatting data and configuring visualization options.
|
|
|
|
Each panel has a query editor specific to the data source selected in the panel. The query editor allows you to build a query that returns the data you want to visualize.
|
|
|
|
Panels offer a wide variety of formatting and styling options, from applying colors based on field values to creating custom units. Each visualization also comes with options specific to it that give you further control over how your data is displayed. Panels can also be dragged, dropped, and resized to rearrange them on the dashboard.
|
|
|
|
To get started adding panels, ensure that you have configured a data source:
|
|
|
|
- For details about using data sources, refer to [Data sources](ref:data-sources).
|
|
- For more information about managing data sources as an administrator, refer to [Data source management](ref:data-source-management).
|
|
|
|
{{< admonition type="note" >}}
|
|
[Data source management](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/administration/data-source-management/) is only available in [Grafana Enterprise](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/introduction/grafana-enterprise/) and [Grafana Cloud](https://grafana.com/docs/grafana-cloud/).
|
|
{{< /admonition >}}
|
|
|
|
## Panel feature overview
|
|
|
|
The following image and descriptions highlight the panel features:
|
|
|
|
|
|
|
|
1. **Panel title** - You can create your own panel titles or have Grafana create them for you using [generative AI features](ref:ai).
|
|
1. **Panel description** - You can create your own panel descriptions or have Grafana create them for you using [generative AI features](ref:ai)
|
|
1. **Links** - Add [panel links](ref:panel-links) to other dashboards, panels, or external sites.
|
|
1. **Panel menu** - In the [panel menu](#panel-menu), access actions such as **View**, **Edit**, **Inspect**, and **Remove**.
|
|
1. **Legend** - Change series colors, y-axis, and series visibility directly from the [legend](ref:legend).
|
|
1. **Tooltips** - View [tooltips](ref:tooltips) to get more information about data points.
|
|
|
|
## Panel menu
|
|
|
|
To access the panel editor, hover over the top-right corner of any panel. Click the panel menu icon that appears and select **Edit**. The panel menu gives you access to the following actions:
|
|
|
|
- **View**: View the panel in full screen.
|
|
- **Edit**: Open the panel editor to edit panel and visualization options.
|
|
- **Share**: Share the panel as a link, embed, or snapshot.
|
|
- **Explore**: Open the panel in **Explore**, where you can focus on your query.
|
|
- **Inspect**: Open the **Inspect** drawer, where you can review the panel data, stats, metadata, JSON, and query.
|
|
- **Data**: Open the **Inspect** drawer in the **Data** tab.
|
|
- **Query**: Open the **Inspect** drawer in the **Query** tab.
|
|
- **Panel JSON**: Open the **Inspect** drawer in the **JSON** tab.
|
|
- **Extensions**: Access other actions provided by installed applications, such as declaring an incident. Note that this option doesn't appear unless you have app plugins installed which contribute an [extension](https://grafana.com/developers/plugin-tools/key-concepts/ui-extensions) to the panel menu.
|
|
- **More**: Access other panel actions.
|
|
- **Duplicate**: Make a copy of the panel. Duplicated panels query data separately from the original panel. You can use the special `Dashboard` data source to [share the same query results across panels](ref:share) instead.
|
|
- **Copy**: Copy the panel to the clipboard.
|
|
- **New library panel**: Create a panel that can be imported into other dashboards.
|
|
- **New alert rule**: Open the alert rule configuration page in **Alerting**, where you can [create a Grafana-managed alert](ref:create) based on the panel queries.
|
|
- **Hide legend**: Hide the panel legend.
|
|
- **Get help**: Send a snapshot or panel data to Grafana Labs Technical Support.
|
|
- **Remove**: Remove the panel from the dashboard.
|
|
|
|
## Keyboard shortcuts
|
|
|
|
Grafana has a number of keyboard shortcuts available specifically for panels. Press `?` on your keyboard to display all keyboard shortcuts available in your version of Grafana.
|
|
|
|
By hovering over a panel with the mouse you can use some shortcuts that will target that panel.
|
|
|
|
- `e`: Toggle panel edit view
|
|
- `v`: Toggle panel fullscreen view
|
|
- `pu`: Share link
|
|
- `pe`: Share embed
|
|
- `ps`: Share snapshot
|
|
- `px`: Open panel in **Explore**
|
|
- `pd`: Duplicate Panel
|
|
- `i`: Inspect
|
|
- `pl`: Hide or show legend
|
|
- `pr`: Remove Panel
|
|
|
|
## Pan and zoom panel 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:
|
|
|
|
- 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 candlestick 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 heatmap 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" >}}
|
|
|
|
### 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:
|
|
|
|
|
|
|
|
To add a panel to an existing dashboard, follow these steps:
|
|
|
|
1. Click **Edit** in the top-right corner of the dashboard.
|
|
1. Click the **Add** drop-down and select **Visualization**:
|
|
|
|
|
|
|
|
## Panel configuration
|
|
|
|
To configure panels, refer to the following subtopics:
|
|
|
|
- [Configure panel options](ref:configure-panel-options)
|
|
- [Configure standard options](ref:configure-standard-options)
|
|
- [Configure a legend](ref:legend)
|
|
- [Configure tooltips](ref:tooltips)
|
|
- [Configure data links](ref:configure-data-links)
|
|
- [Configure value mappings](ref:configure-value-mappings)
|
|
- [Configure thresholds](ref:configure-thresholds)
|
|
- [Configure field overrides](ref:configure-field-overrides)
|