public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs: refactors config panels and visualizations, corrects relrefs (#55940)

Browse Source 
* refactors config panels and visualizations, corrects relrefs

* adds an alias

* Remove some old content

* moves visualizations topic to the root

* moves out panels and visualization topics to the root

* adds move and resize panel to add/organize panel; creates a create dashboard topic under build dashboards; adjusts context of add a panel to be from within an existing dashboard

* updates aliases

* creates search at root, moves dashboard preview to search, creates standalone search dashboard topic

* moves Set dashboard time range to use-dashboards, creates modify dashboard settings and adds moves Modify dashboard time settings to that topic

* moves existing query-options topic from working with panels to configure-panel-visualizations, moves panel time overrides and timeshift content to query options

* Moving things to better category, fixing links, improving ordering

* Move panel inspector to main panel topic

* completes partial fix of relrefs

* relref fixes con't

* restructures remaining panels topics

* more relref fixes

* Minor fix

* Minor tweak

* finishes fixing relrefs

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
Co-authored-by: Jack Baldry <jack.baldry@grafana.com>
This commit is contained in:
Christopher Moyer
2022-10-11 15:31:20 -05:00
committed by GitHub
parent f4a3400a9c
commit 414d536186
118 changed files with 1437 additions and 1748 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/sources/panels-visualizations/_index.md
+27
View File
@@ -0,0 +1,27 @@
---
aliases:
- /docs/grafana/latest/dashboards/configure-panels-visualizations/
- /docs/grafana/latest/panels-visualizations/
- /docs/grafana/latest/features/panels/panels/
- /docs/grafana/latest/panels/
title: Panels and visualizations
menuTitle: Panels and visualizations
weight: 80
keywords:
- grafana
- configure
- panels
- visualizations
---
# Panels and visualizations
The _panel_ is the basic visualization building block in Grafana. Each panel has a query editor specific to the data source selected in the panel. The query editor allows you to extract the perfect visualization to display on the panel.
There are a wide variety of styling and formatting options for each panel. Panels can be dragged and dropped and rearranged on the dashboard. They can also be resized.
Before you begin, ensure that you have configured a data source. For more information about data sources, refer to [Data Sources]({{< relref "../administration/data-source-management/" >}}).
This section includes the following sub topics:
{{< section >}}
docs/sources/panels-visualizations/calculation-types/index.md
+34
View File
@@ -0,0 +1,34 @@
---
aliases:
- /docs/grafana/latest/panels/calculation-types/
- /docs/grafana/latest/panels/calculations-list/
- /docs/grafana/latest/panels/reference-calculation-types/
- /docs/grafana/latest/panels-visualizations/calculation-types/
title: Calculation types
weight: 1100
---
# Calculation types
The following table contains a list of calculations you can perform in Grafana. You can find these calculations in the **Transform** tab and in the bar gauge, gauge, and stat visualizations.
| Calculation | Description |
| :----------------- | :-------------------------------------------------------- |
| All nulls | True when all values are null |
| All zeros | True when all values are 0 |
| Change count | Number of times the field's value changes |
| Count | Number of values in a field |
| Delta | Cumulative change in value, only counts increments |
| Difference | Difference between first and last value of a field |
| Difference percent | Percentage change between first and last value of a field |
| Distinct count | Number of unique values in a field |
| First (not null) | First, not null value in a field |
| Max | Maximum value of a field |
| Mean | Mean value of all values in a field |
| Variance | Variance of all values in a field |
| StdDev | Standard deviation of all values in a field |
| Min | Minimum value of a field |
| Min (above zero) | Minimum, positive value of a field |
| Range | Difference between maximum and minimum values of a field |
| Step | Minimal interval between values of a field |
| Total | Sum of all values in a field |
docs/sources/panels-visualizations/configure-data-links/index.md
+121
View File
@@ -0,0 +1,121 @@
---
aliases:
- /docs/grafana/latest/linking/data-link-variables/
- /docs/grafana/latest/variables/url-variables/
- /docs/grafana/latest/variables/variable-types/url-variables/
- /docs/grafana/latest/linking/data-links/
- /docs/grafana/latest/reference/datalinks/
- /docs/grafana/latest/panels/configure-data-links/
- /docs/grafana/latest/panels-visualizations/configure-data-links/
keywords:
- grafana
- url variables
- variables
- data link
- documentation
- playlist
title: Configure data links
menuTitle: Configure data links
weight: 400
---
# Configure data links
You can use data link variables or data links to create links between panels.
## Data link variables
You can use variables in data links to refer to series fields, labels, and values. For more information about data links, refer to [Data links]({{< relref "#data-links" >}}).
To see a list of available variables, type `$` in the data link **URL** field to see a list of variables that you can use.
> **Note:** These variables changed in 6.4 so if you have an older version of Grafana, then use the version picker to select docs for an older version of Grafana.
You can also use template variables in your data links URLs, refer to [Templates and variables]({{< relref "../../dashboards/variables/" >}}) for more information on template variables.
## Time range panel variables
These variables allow you to include the current time range in the data link URL.
- `__url_time_range` - current dashboard's time range (i.e. `?from=now-6h&to=now`)
- `$__from and $__to` - For more information, refer to [Global variables]({{< relref "../../dashboards/variables/add-template-variables/#__from-and-__to" >}}).
## Series variables
Series specific variables are available under `__series` namespace:
- `__series.name` - series name to the URL
## Field variables
Field-specific variables are available under `__field` namespace:
- `__field.name` - the name of the field
- `__field.labels.<LABEL>` - label's value to the URL. If your label contains dots, then use `__field.labels["<LABEL>"]` syntax.
## Value variables
Value-specific variables are available under `__value` namespace:
- `__value.time` - value's timestamp (Unix ms epoch) to the URL (i.e. `?time=1560268814105`)
- `__value.raw` - raw value
- `__value.numeric` - numeric representation of a value
- `__value.text` - text representation of a value
- `__value.calc` - calculation name if the value is result of calculation
## Template variables
When linking to another dashboard that uses template variables, select variable values for whoever clicks the link.
`${var-myvar:queryparam}` - where `var-myvar` is the name of the template variable that matches one in the current dashboard that you want to use.
| Variable state | Result in the created URL |
| ------------------------ | ----------------------------------- |
| selected one value | `var-myvar=value1` |
| selected multiple values | `var-myvar=value1&var-myvar=value2` |
| selected `All` | `var-myvar=All` |
If you want to add all of the current dashboard's variables to the URL, then use `${__all_variables}`.
## Data links
Data links allow you to provide more granular context to your links. You can create links that include the series name or even the value under the cursor. For example, if your visualization showed four servers, you could add a data link to one or two of them.
The link itself is accessible in different ways depending on the visualization. For the Graph you need to click on a data point or line, for a panel like
Stat, Gauge, or Bar Gauge you can click anywhere on the visualization to open the context menu.
You can use variables in data links to send people to a detailed dashboard with preserved data filters. For example, you could use variables to specify a time range, series, and variable selection. For more information, refer to [Data link variables]({{< relref "#data-link-variables" >}}).
### Typeahead suggestions
When creating or updating a data link, press Cmd+Space or Ctrl+Space on your keyboard to open the typeahead suggestions to more easily add variables to your URL.
{{< figure src="/static/img/docs/data_link_typeahead.png" max-width= "800px" >}}
### Add a data link
1. Hover your cursor over the panel that you want to add a link to and then press `e`. Or click the dropdown arrow next to the panel title and then click **Edit**.
1. On the Field tab, scroll down to the Data links section.
1. Expand Data links and then click **Add link**.
1. Enter a **Title**. **Title** is a human-readable label for the link that will be displayed in the UI.
1. Enter the **URL** you want to link to.
You can even add one of the template variables defined in the dashboard. Click in the **URL** field and then type `$` or press Ctrl+Space or Cmd+Space to see a list of available variables. By adding template variables to your panel link, the link sends the user to the right context, with the relevant variables already set. For more information, refer to [Data link variables]({{< relref "#data-link-variables" >}}).
1. If you want the link to open in a new tab, then select **Open in a new tab**.
1. Click **Save** to save changes and close the window.
1. Click **Save** in the upper right to save your changes to the dashboard.
### Update a data link
1. On the Field tab, find the link that you want to make changes to.
1. Click the Edit (pencil) icon to open the Edit link window.
1. Make any necessary changes.
1. Click **Save** to save changes and close the window.
1. Click **Save** in the upper right to save your changes to the dashboard.
### Delete a data link
1. On the Field tab, find the link that you want to delete.
1. Click the **X** icon next to the link you want to delete.
1. Click **Save** in the upper right to save your changes to the dashboard.
docs/sources/panels-visualizations/configure-overrides/index.md
+120
View File
@@ -0,0 +1,120 @@
---
aliases:
- /docs/grafana/latest/panels/field-overrides/
- /docs/grafana/latest/panels/override-field-values/
- /docs/grafana/latest/panels/override-field-values/about-field-overrides/
- /docs/grafana/latest/panels/override-field-values/add-a-field-override/
- /docs/grafana/latest/panels/override-field-values/delete-a-field-override/
- /docs/grafana/latest/panels/override-field-values/edit-field-override/
- /docs/grafana/latest/panels/override-field-values/view-field-override/
- /docs/grafana/latest/panels/configure-overrides/
- /docs/grafana/latest/panels-visualizations/configure-overrides/
title: Configure field overrides
menuTitle: Configure field overrides
weight: 400
---
# Configure field overrides
Overrides allow you to customize visualization settings for specific fields or series. This is accomplished by adding an override rule that targets a particular set of fields and that can each define multiple options.
For example, you set the unit for all fields that include the text 'bytes' by adding an override using the `Fields with name matching regex` matcher and then add the Unit option to the override rule.
## Example 1: Format temperature
Let’s assume that our result set is a data frame that consists of two fields: time and temperature.
| time | temperature |
| :-----------------: | :---------: |
| 2020-01-02 03:04:00 | 45.0 |
| 2020-01-02 03:05:00 | 47.0 |
| 2020-01-02 03:06:00 | 48.0 |
Each field (column) of this structure can have field options applied that alter the way its values are displayed. This means that you can, for example, set the Unit to Temperature > Celsius, resulting in the following table:
| time | temperature |
| :-----------------: | :---------: |
| 2020-01-02 03:04:00 | 45.0 °C |
| 2020-01-02 03:05:00 | 47.0 °C |
| 2020-01-02 03:06:00 | 48.0 °C |
In addition, the decimal place is not required, so we can remove it. You can change the Decimals from `auto` to zero (`0`), resulting in the following table:
| time | temperature |
| :-----------------: | :---------: |
| 2020-01-02 03:04:00 | 45 °C |
| 2020-01-02 03:05:00 | 47 °C |
| 2020-01-02 03:06:00 | 48 °C |
## Example 2: Format temperature and humidity
Let’s assume that our result set is a data frame that consists of four fields: time, high temp, low temp, and humidity.
| time | high temp | low temp | humidity |
| ------------------- | --------- | -------- | -------- |
| 2020-01-02 03:04:00 | 45.0 | 30.0 | 67 |
| 2020-01-02 03:05:00 | 47.0 | 34.0 | 68 |
| 2020-01-02 03:06:00 | 48.0 | 31.0 | 68 |
Let's add the Celsius unit and get rid of the decimal place. This results in the following table:
| time | high temp | low temp | humidity |
| ------------------- | --------- | -------- | -------- |
| 2020-01-02 03:04:00 | 45 °C | 30 °C | 67 °C |
| 2020-01-02 03:05:00 | 47 °C | 34 °C | 68 °C |
| 2020-01-02 03:06:00 | 48 °C | 31 °C | 68 °C |
The temperature fields look good, but the humidity must now be changed. We can fix this by applying a field option override to the humidity field and change the unit to Misc > percent (0-100).
| time | high temp | low temp | humidity |
| ------------------- | --------- | -------- | -------- |
| 2020-01-02 03:04:00 | 45 °C | 30 °C | 67% |
| 2020-01-02 03:05:00 | 47 °C | 34 °C | 68% |
| 2020-01-02 03:06:00 | 48 °C | 31 °C | 68% |
## Add a field override
A field override rule can customize the visualization settings for a specific field or series.
1. Edit the panel to which you want to add an override.
1. In the panel options side pane, click **Add field override** at the bottom of the pane.
1. Select which fields an override rule will be applied to:
- **Fields with name:** Select a field from the list of all available fields. Properties you add to a rule with this selector are only applied to this single field.
- **Fields with name matching regex:** Specify fields to override with a regular expression. Properties you add to a rule with this selector are applied to all fields where the field name match the regex.
- **Fields with type:** Select fields by type, such as string, numeric, and so on. Properties you add to a rule with this selector are applied to all fields that match the selected type.
- **Fields returned by query:** Select all fields returned by a specific query, such as A, B, or C. Properties you add to a rule with this selector are applied to all fields returned by the selected query.
1. Click **Add override property**.
1. Select the field option that you want to apply.
1. Enter options by adding values in the fields. To return options to default values, delete the white text in the fields.
1. Continue to add overrides to this field by clicking **Add override property**, or you can click **Add override** and select a different field to add overrides to.
1. When finished, click **Save** to save all panel edits to the dashboard.
## Delete a field override
Delete a field override when you no longer need it. When you delete an override, the appearance of value defaults to its original format. This change impacts dashboards and dashboard users that rely on an affected panel.
1. Edit the panel that contains the override you want to delete.
1. In panel options side pane, scroll down until you see the overrides.
1. Click the override you want to delete and then click the associated trash icon.
## View field overrides
You can view field overrides in the panel display options.
1. Edit the panel that contains the overrides you want to view.
1. In panel options side pane, scroll down until you see the overrides.
> The override settings that appear on the **All** tab are the same as the settings that appear on the **Overrides** tab.
## Edit a field override
Edit a field override when you want to make changes to an override setting. The change you make takes effect immediately.
1. Edit the panel that contains the overrides you want to edit.
1. In panel options side pane, scroll down until you see the overrides.
1. Locate the override that you want to change.
1. Perform any of the following:
- Edit settings on existing overrides or field selection parameters.
- Delete existing override properties by clicking the **X** next to the property.
- Add an override properties by clicking **Add override property**.
docs/sources/panels-visualizations/configure-panel-options/index.md
+103
View File
@@ -0,0 +1,103 @@
---
aliases:
- /docs/grafana/latest/panels/add-panels-dynamically/
- /docs/grafana/latest/panels/repeat-panels-or-rows/
- /docs/grafana/latest/panels/working-with-panels/add-title-and-description/
- /docs/grafana/latest/panels/working-with-panels/view-json-model/
- /docs/grafana/latest/panels/configure-panel-options/
- /docs/grafana/latest/panels-visualizations/configure-panel-options/
title: Configure panel options
menuTitle: Configure panel options
weight: 2
keywords:
- panel
- dynamic
- add
- title
- description
- JSON model
---
# Configure panel options
A Grafana panel is the user interface you use to define a data source query, and transform and format data that appears in visualizations.
A panel editor includes a query builder and a series of options that you can use to transform data and add information to your panels.
This topic describes how to:
- Open a panel for editing
- Add a panel title and description
- View a panel JSON model
- Add repeating rows and panels
## Edit a panel
After you add a panel to a dashboard, you can open it at any time to change change or update queries, add data transformation, and change visualization settings.
1. Open the dashboard that contains the panel you want to edit.
1. Click in the panel title and select **Edit**. To use a keyboard shortcut to open the panel, hover over the panel and press `e`.
The panel opens in edit mode.
## Add a title and description to a panel
Add a title and description to a panel to share with users any important information about the visualization. For example, use the description to document the purpose of the visualization.
1. [Edit a panel](#edit-a-panel).
1. In the panel display options pane, locate the **Panel options** section.
1. Enter a **Title**.
Text entered in this field appears at the top of your panel in the panel editor and in the dashboard.
1. Write a description of the panel and the data you are displaying.
Text entered in this field appears in a tooltip in the upper-left corner of the panel.
You can use [variables you have defined]({{< relref "../../dashboards/variables/" >}}) in the **Title** and **Description** field, but not [global variables]({{< relref "../../dashboards/variables/add-template-variables/#global-variables" >}}).
![](/static/img/docs/panels/panel-options-8-0.png)
## View a panel JSON model
Explore and export panel, panel data, and data frame JSON models.
1. Open the dashboard that contains the panel.
1. Click in the panel title and select **Inspect > Panel JSON**.
1. In the **Select source** field, select one of the following options:
- **Panel JSON:** Displays a JSON object representing the panel.
- **Panel data:** Displays a JSON object representing the data that was passed to the panel.
- **DataFrame structure:** Displays the raw result set with transformations, field configurations, and override configurations applied.
1. To explore the JSON, click `>` to expand or collapse portions of the JSON model.
## Configure repeating panels
You can configure Grafana to dynamically add panels or rows to a dashboard. A dynamic panel is a panel that the system creates based on the value of a variable. Variables dynamically change your queries across all panels in a dashboard. For more information about repeating rows, refer to [Configure repeating rows](../add-organize-panels/#configure-repeating-rows).
> **Note:** Repeating panels require variables to have one or more items selected; you cannot repeat a panel zero times to hide it.
To see an example of repeating panels, refer to [Prometheus dashboard with repeating panels](https://play.grafana.org/d/000000036/prometheus-repeat).
**Before you begin:**
- Ensure that the query includes a multi-value variable.
**To configure repeating panels:**
1. [Edit the panel](#edit-a-panel) you want to repeat.
1. On the display options pane, click **Panel options > Repeat options**.
1. Select a `direction`.
- Choose `horizontal` to arrange panels side-by-side. Grafana adjusts the width of a repeated panel. Currently, you cannot mix other panels on a row with a repeated panel.
- Choose `vertical` to arrange panels in a column. The width of repeated panels is the same as the original, repeated panel.
1. To propagate changes to all panels, reload the dashboard.
docs/sources/panels-visualizations/configure-standard-options/index.md
+134
View File
@@ -0,0 +1,134 @@
---
aliases:
- /docs/grafana/latest/panels/working-with-panels/format-standard-fields/
- /docs/grafana/latest/panels/reference-standard-field-definitions/
- /docs/grafana/latest/panels/standard-field-definitions/
- /docs/grafana/latest/panels/configure-standard-options/
- /docs/grafana/latest/panels-visualizations/configure-standard-options/
title: Configure standard options
menuTitle: Configure standard options
weight: 2
keywords:
- panel
- dasboard
- standard
- option
---
# Configure standard options
The data model used in Grafana, namely the [data frame]({{< relref "../../developers/plugins/data-frames/" >}}), is a columnar-oriented table structure that unifies both time series and table query results. Each column within this structure is called a _field_. A field can represent a single time series or table column.
Field options allow you to change how the data is displayed in your visualizations. Options and overrides that you apply do not change the data, they change how Grafana displays the data. When you change an option, it is applied to all fields, meaning all series or columns. For example, if you change the unit to percentage, then all fields with numeric values are displayed in percentages.
For a complete list of field formatting options, refer to [Standard options definitions]({{< relref "#standard-options-definitions" >}}).
> You can apply standard options to most built-in Grafana panels. Some older panels and community panels that have not updated to the new panel and data model will be missing either all or some of these field options.
1. Open a dashboard, click the panel title, and click **Edit**.
1. In the panel display options pane, locate the **Standard options** section.
1. Select the standard options you want to apply.
For more information about standard options, refer to [Standard options definitions]({{< relref "#standard-options-definitions" >}}).
1. To preview your change, click outside of the field option box you are editing or press **Enter**.
## Standard options definitions
This section explains all available standard options.
You can apply standard options to most built-in Grafana panels. Some older panels and community panels that have not updated to the new panel and data model will be missing either all or some of these field options.
Most field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.
> **Note:** We are constantly working to add and expand options for all visualization, so all options might not be available for all visualizations.
### Unit
Lets you choose what unit a field should use. Click in the **Unit** field, then drill down until you find the unit you want. The unit you select is applied to all fields except time.
#### Custom units
You can use the unit dropdown to also specify custom units, custom prefix or suffix and date time formats.
To select a custom unit enter the unit and select the last `Custom: xxx` option in the dropdown.
- `suffix:<suffix>` for custom unit that should go after value.
- `prefix:<prefix>` for custom unit that should go before value.
- `time:<format>` For custom date time formats type for example `time:YYYY-MM-DD`. See [formats](https://momentjs.com/docs/#/displaying/) for the format syntax and options.
- `si:<base scale><unit characters>` for custom SI units. For example: `si: mF`. This one is a bit more advanced as you can specify both a unit and the
source data scale. So if your source data is represented as milli (thousands of) something prefix the unit with that
SI scale character.
- `count:<unit>` for a custom count unit.
- `currency:<unit>` for custom a currency unit.
You can also paste a native emoji in the unit picker and pick it as a custom unit:
{{< figure src="/static/img/docs/v66/custom_unit_burger2.png" max-width="600px" caption="Custom unit emoji" >}}
#### String units
Grafana can sometimes be too aggressive in parsing strings and displaying them as numbers. To configure Grafana to show the original string value, create a field override and add a unit property with the `String` unit.
### Min
Lets you set the minimum value used in percentage threshold calculations. Leave blank for auto calculation based on all series and fields.
### Max
Lets you set the maximum value used in percentage threshold calculations. Leave blank for auto calculation based on all series and fields.
### Decimals
Specify the number of decimals Grafana includes in the rendered value. If you leave this field blank, Grafana automatically truncates the number of decimals based on the value. For example 1.1234 will display as 1.12 and 100.456 will display as 100.
To display all decimals, set the unit to `String`.
### Display name
Lets you set the display title of all fields. You can use [variables]({{< relref "../../dashboards/variables/" >}}) in the field title.
When multiple stats, fields, or series are shown, this field controls the title in each stat. You can use expressions like `${__field.name}` to use only the series name or the field name in title.
Given a field with a name of Temp, and labels of {"Loc"="PBI", "Sensor"="3"}
| Expression syntax | Example | Renders to | Explanation |
| ---------------------------- | ----------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `${__field.displayName}` | Same as syntax | `Temp {Loc="PBI", Sensor="3"}` | Displays the field name, and labels in `{}` if they are present. If there is only one label key in the response, then for the label portion, Grafana displays the value of the label without the enclosing braces. |
| `${__field.name}` | Same as syntax | `Temp` | Displays the name of the field (without labels). |
| `${__field.labels}` | Same as syntax | `Loc="PBI", Sensor="3"` | Displays the labels without the name. |
| `${__field.labels.X}` | `${__field.labels.Loc}` | `PBI` | Displays the value of the specified label key. |
| `${__field.labels.__values}` | Same as Syntax | `PBI, 3` | Displays the values of the labels separated by a comma (without label keys). |
If the value is an empty string after rendering the expression for a particular field, then the default display method is used.
### Color scheme
The color options and their effect on the visualization depends on the visualization you are working with. Some visualizations have different color options.
You can specify a single color, or select a continuous (gradient) color schemes, based on a value.
Continuous color interpolates a color using the percentage of a value relative to min and max.
Select one of the following palettes:
<div class="clearfix"></div>
| Color mode | Description |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Single color** | Specify a single color, useful in an override rule |
| **From thresholds** | Informs Grafana to take the color from the matching threshold |
| **Classic palette** | Grafana will assign color by looking up a color in a palette by series index. Useful for Graphs and pie charts and other categorical data visualizations |
| **Green-Yellow-Red (by value)** | Continuous color scheme |
| **Blue-Yellow-Red (by value)** | Continuous color scheme |
| **Blues (by value)** | Continuous color scheme (panel background to blue) |
| **Reds (by value)** | Continuous color scheme (panel background color to blue) |
| **Greens (by value)** | Continuous color scheme (panel background color to blue) |
| **Purple (by value)** | Continuous color scheme (panel background color to blue) |
{{< figure src="/static/img/docs/v73/color_scheme_dropdown.png" max-width="350px" caption="Color scheme" >}}
### No value
Enter what Grafana should display if the field value is empty or null. The default value is a hyphen (-).
docs/sources/panels-visualizations/configure-thresholds/index.md
+90
View File
@@ -0,0 +1,90 @@
---
aliases:
- /docs/grafana/latest/panels/
- /docs/grafana/latest/panels/configure-thresholds/
- /docs/grafana/latest/panels/specify-thresholds/about-thresholds/
- /docs/grafana/latest/panels/specify-thresholds/add-a-threshold/
- /docs/grafana/latest/panels/specify-thresholds/add-threshold-to-graph/
- /docs/grafana/latest/panels/specify-thresholds/delete-a-threshold/
- /docs/grafana/latest/panels/thresholds/
- /docs/grafana/latest/panels-visualizations/configure-thresholds/
description: This section includes information about using thresholds in your visualizations.
menuTitle: Configure thresholds
title: Configure thresholds
weight: 300
---
# Configure thresholds
This section includes information about using thresholds in your visualizations. You'll learn about thresholds and their defaults, how to add or delete a threshold, and adding a threshold to a legacy panel.
## About thresholds
A threshold is a value that you specify for a metric that is visually reflected in a dashboard when the threshold value is met or exceeded.
Thresholds provide one method for you to conditionally style and color your visualizations based on query results. You can apply thresholds to most, but not all, visualizations. For more information about visualizations, refer to [Visualization panels]({{< relref "../visualizations/" >}}).
You can use thresholds to:
- Color grid lines or grid ares areas in the [Time-series visualization]({{< relref "../visualizations/time-series/" >}})
- Color lines in the [Time-series visualization]({{< relref "../visualizations/time-series#from-thresholds" >}})
- Color the background or value text in the [Stat visualization]({{< relref "../visualizations/stat/" >}})
- Color the gauge and threshold markers in the [Gauge visualization]({{< relref "../visualizations/gauge/" >}})
- Color markers in the [Geomap visualization]({{< relref "../visualizations/geomap/" >}})
- Color cell text or background in the [Table visualization]({{< relref "../visualizations/table/" >}})
- Define regions and region colors in the [State timeline visualization]({{< relref "../visualizations/state-timeline/" >}})
There are two types of thresholds:
- **Absolute** thresholds are defined by a number. For example, 80 on a scale of 1 to 150.
- **Percentage** thresholds are defined relative to minimum or maximum. For example, 80 percent.
### Default thresholds
On visualizations that support it, Grafana sets default threshold values of:
- 80 = red
- Base = green
- Mode = Absolute
The **Base** value represents minus infinity. It is generally the “good” color.
## Add or delete a threshold
You can add as many thresholds to a panel as you want. Grafana automatically sorts thresholds values from highest to lowest.
Delete a threshold when it is no longer relevant to your business operations. When you delete a threshold, the system removes the threshold from all visualizations that include the threshold.
1. To add a threshold:
a. Edit the panel to which you want to add a threshold.
b. In the options side pane, locate the **Thresholds** section and click **+ Add threshold**.
c. Select a threshold color, number, and mode.
Threshold mode applies to all thresholds on this panel.
d. For a time-series panel, select a **Show thresholds** option.
1. To delete a threshold, navigate to the panel that contains the threshold and click the trash icon next to the threshold you want to remove.
## Add a threshold to a legacy graph panel
In the Graph panel visualization, thresholds enable you to add lines or sections to a graph to make it easier to recognize when the graph crosses a threshold.
1. Navigate to the graph panel to which you want to add a threshold.
1. On the **Panel** tab, click **Thresholds**.
1. Click **Add threshold**.
1. Complete the following fields:
- **T1 -** Both values are required to display a threshold.
- **lt** or **gt** - Select **lt** for less than or **gt** for greater than to indicate what the threshold applies to.
- **Value -** Enter a threshold value. Grafana draws a threshold line along the Y-axis at that value.
- **Color -** Choose a condition that corresponds to a color, or define your own color.
- **custom -** You define the fill color and line color.
- **critical -** Fill and line color are red.
- **warning -** Fill and line color are yellow.
- **ok -** Fill and line color are green.
- **Fill -** Controls whether the threshold fill is displayed.
- **Line -** Controls whether the threshold line is displayed.
- **Y-Axis -** Choose **left** or **right**.
1. Click **Save** to save the changes in the dashboard.
docs/sources/panels-visualizations/configure-value-mappings/index.md
+129
View File
@@ -0,0 +1,129 @@
---
aliases:
- /docs/grafana/latest/panels/configure-value-mappings/
- /docs/grafana/latest/panels/format-data/
- /docs/grafana/latest/panels/value-mappings/
- /docs/grafana/latest/panels/format-data/about-value-mapping/
- /docs/grafana/latest/panels/format-data/edit-value-mapping/
- /docs/grafana/latest/panels/format-data/map-a-range/
- /docs/grafana/latest/panels/format-data/map-a-regular-expression/
- /docs/grafana/latest/panels/format-data/map-a-special-value/
- /docs/grafana/latest/panels/format-data/map-a-value/
- /docs/grafana/latest/panels-visualizations/configure-value-mappings/
title: Configure value mappings
menuTitle: Configure value mappings
weight: 600
---
# Configure value mappings
In addition to field overrides, value mapping is a technique that you can use to change the visual treatment of data that appears in a visualization.
Values mapped via value mappings bypass the unit formatting. This means that a text value mapped to a numerical value is not formatted using the configured unit.
![Value mappings example](/static/img/docs/value-mappings/value-mappings-example-8-0.png)
If value mappings are present in a panel, then Grafana displays a summary in the side pane of the panel editor.
> **Note:** The new value mappings are not compatible with some visualizations, such as Graph (old), Text, and Heatmap.
## Types of value mappings
Grafana supports the following value mappings:
- **Value:** Maps text values to a color or different display text. For example, you can configure a value mapping so that all instances of the value `10` appear as **Perfection!** rather than the number.
- **Range:** Maps numerical ranges to a display text and color. For example, if a value is within a certain range, you can configure a range value mapping to display **Low** or **High** rather than the number.
- **Regex:** Maps regular expressions to replacement text and a color. For example, if a value is `www.example.com`, you can configure a regex value mapping so that Grafana displays **www** and truncates the domain.
- **Special** Maps special values like `Null`, `NaN` (not a number), and boolean values like `true` and `false` to a display text and color. For example, you can configure a special value mapping so that `null` values appear as **N/A**.
You can also use the dots on the left to drag and reorder value mappings in the list.
## Examples
Refer to the following examples to learn more about value mapping.
### Time series example
The following image shows a time series visualization with value mappings. Value mapping colors are not applied to this visualization, but the display text is shown on the axis.
![Value mappings time series example](/static/img/docs/value-mappings/value-mappings-summary-example-8-0.png)
### Stat example
The following image shows a Stat visualization with value mappings and text colors applied. You can hide the sparkline so it doesn't interfere with the values.
![Value mappings stat example](/static/img/docs/value-mappings/value-mappings-stat-example-8-0.png)
### Bar gauge example
The following image shows a bar gauge visualization with value mappings. The value mapping colors are applied to the text, but not to the gauges.
![Value mappings bar gauge example](/static/img/docs/value-mappings/value-mappings-bar-gauge-example-8-0.png)
### Table example
The following image shows a table visualization with value mappings. If you want value mapping colors displayed on the table, then set the cell display mode to **Color text** or **Color background**.
![Value mappings table example](/static/img/docs/value-mappings/value-mappings-table-example-8-0.png)
## Map a value
Map a value when you want to format a single value.
1. Open a panel for which you want to map a value.
1. In panel display options, locate the **Value mappings** section and click **Add value mappings**.
1. Click **Add a new mapping** and then select **Value**.
1. Enter the value for Grafana to match.
1. (Optional) Enter display text.
1. (Optional) Set the color.
1. Click **Update** to save the value mapping.
![Map a value](/static/img/docs/value-mappings/map-value-8-0.png)
## Map a range
Map a range of values when you want to format multiple, continuous values.
1. Edit the panel for which you want to map a range of values.
1. In panel display options, in the **Value mappings** section, click **Add value mappings**.
1. Click **Add a new mapping** and then select **Range**.
1. Enter the beginning and ending values in the range for Grafana to match.
1. (Optional) Enter display text.
1. (Optional) Set the color.
1. Click **Update** to save the value mapping.
![Map a range](/static/img/docs/value-mappings/map-range-8-0.png)
## Map a regular expression
Map a regular expression when you want to format the text and color of a regular expression value.
1. Edit the panel for which you want to map a regular expression.
1. In the **Value mappings** section of the panel display options, click **Add value mappings**.
1. Click **Add a new mapping** and then select **Regex**.
1. Enter the regular expression pattern for Grafana to match.
1. (Optional) Enter display text.
1. (Optional) Set the color.
1. Click **Update** to save the value mapping.
## Map a special value
Map a special value when you want to format uncommon, boolean, or empty values.
1. Edit the panel for which you want to map a special value.
1. In panel display options, locate the **Value mappings** section and click **Add value mappings**.
1. Click **Add a new mapping** and then select **Special**.
1. Select the special value for Grafana to match.
1. (Optional) Enter display text.
1. (Optional) Set the color.
1. Click **Update** to save the value mapping.
![Map a value](/static/img/docs/value-mappings/map-special-value-8-0.png)
## Edit a value mapping
You can change a value mapping at any time.
1. Edit the panel that contains the value mapping you want to edit.
1. In the panel display options, in the **Value mappings** section, click **Edit value mappings**.
1. Make the changes and click **Update**.
docs/sources/panels-visualizations/panel-editor-overview/index.md
+71
View File
@@ -0,0 +1,71 @@
---
aliases:
- /docs/grafana/latest/panels/working-with-panels/navigate-panel-editor/
- /docs/grafana/latest/panels/working-with-panels/navigate-inspector-panel/
- /docs/grafana/latest/dashboards/dashboard-create/
- /docs/grafana/latest/features/dashboard/dashboards/
- /docs/grafana/latest/panels/working-with-panels/add-panel/
- /docs/grafana/latest/dashboards/add-organize-panels/
- /docs/grafana/latest/panels/add-panels-dynamically/about-repeating-panels-rows/
- /docs/grafana/latest/panels/add-panels-dynamically/configure-repeating-rows/
- /docs/grafana/latest/panels/add-panels-dynamically/configure-repeating-panels/
- /docs/grafana/next/dashboards/build-dashboards/add-organize-panels/
- /docs/grafana/latest/panels-visualizations/add-organize-panels/
title: Panel editor overview
menuTitle: Panel editor overview
weight: 1
keywords:
- panel
- dashboard
- dynamic
- rows
- add
---
# Panel editor overview
{{< figure src="/static/img/docs/panel-editor/panel-editor-8-0.png" class="docs-image--no-shadow" max-width="1500px" >}}
This section describes the areas of the Grafana panel editor.
1. Panel header: The header section lists the dashboard in which the panel appears and the following controls:
- **Dashboard settings (gear) icon:** Click to access the dashboard settings.
- **Discard:** Discards changes you have made to the panel since you last saved the dashboard.
- **Save:** Saves changes you made to the panel.
- **Apply:** Applies changes you made and closes the panel editor, returning you to the dashboard. You will have to save the dashboard to persist the applied changes.
1. Visualization preview: The visualization preview section contains the following options:
- **Table view:** Convert any visualization to a table so that you can see the data. Table views are useful for troubleshooting.
- **Fill:** The visualization preview fills the available space. If you change the width of the side pane or height of the bottom pane the visualization changes to fill the available space.
- **Actual:** The visualization preview will have the exact size as the size on the dashboard. If not enough space is available, the visualization will scale down preserving the aspect ratio.
- **Time range controls:** For more information, refer to [Time range controls]({{< relref "../../dashboards/manage-dashboards/#configure-dashboard-time-range-controls" >}}).
1. Data section: The data section contains tabs where you enter queries, transform your data, and create alert rules (if applicable).
- **Query tab:** Select your data source and enter queries here. For more information, refer to [Add a query]({{< relref "../query-transform-data/#add-a-query" >}}).
- **Transform tab:** Apply data transformations. For more information, refer to [Transform data]({{< relref "../query-transform-data/transform-data/" >}}).
- **Alert tab:** Write alert rules. For more information, refer to [Overview of Grafana 8 alerting]({{< relref "../../alerting/" >}}).
1. Panel display options: The display options section contains tabs where you configure almost every aspect of your data visualization.
## Open the panel inspect drawer
The inspect drawer helps you understand and troubleshoot your panels. You can view the raw data for any panel, export that data to a comma-separated values (CSV) file, view query requests, and export panel and data JSON.
> **Note:** Not all panel types include all tabs. For example, dashboard list panels do not have raw data to inspect, so they do not display the Stats, Data, or Query tabs.
The panel inspector consists of the following options:
1. The panel inspect drawer displays opens a drawer on the right side. Click the arrow in the upper right corner to expand or reduce the drawer pane.
1. **Data tab -** Shows the raw data returned by the query with transformations applied. Field options such as overrides and value mappings are not applied by default.
1. **Stats tab -** Shows how long your query takes and how much it returns.
1. **JSON tab -** Allows you to view and copy the panel JSON, panel data JSON, and data frame structure JSON. This is useful if you are provisioning or administering Grafana.
1. **Query tab -** Shows you the requests to the server sent when Grafana queries the data source.
1. **Error tab -** Shows the error. Only visible when query returns error.
docs/sources/panels-visualizations/panel-inspector/index.md
+71
View File
@@ -0,0 +1,71 @@
---
aliases:
- /docs/grafana/latest/panels/working-with-panels/navigate-inspector-panel/
- /docs/grafana/latest/panels-visualizations/panel-inspector/
- /docs/grafana/latest/panels/query-a-data-source/download-raw-query-results/
- /docs/grafana/latest/panels/query-a-data-source/inspect-query-performance/
- /docs/grafana/latest/panels/query-a-data-source/inspect-request-and-response-data/
title: The panel inspect view
weight: 1200
---
# The panel inspect view
The panel inspect view, which you can open via the panel menu, helps you understand and troubleshoot your panels. You can inspect the raw data for any Grafana panel, export that data to a comma-separated values (CSV) file, view query requests, and export panel and data JSON.
> **Note:** Not all panel types include all tabs. For example, dashboard list panels do not have raw data to inspect, so they do not display the Stats, Data, or Query tabs.
The panel inspector consists of the following options:
1. The panel inspector displays Inspect: <NameOfPanelBeingInspected> at the top of the pane. Click the arrow in the upper right corner to expand or reduce the pane.
2. **Data tab -** Shows the raw data returned by the query with transformations applied. Field options such as overrides and value mappings are not applied by default.
3. **Stats tab -** Shows how long your query takes and how much it returns.
4. **JSON tab -** Allows you to view and copy the panel JSON, panel data JSON, and data frame structure JSON. This is useful if you are provisioning or administering Grafana.
5. **Query tab -** Shows you the requests to the server sent when Grafana queries the data source.
6. **Error tab -** Shows the error. Only visible when query returns error.
## Download raw query results
Grafana generates a CSV file that contains your data, including any transformations to that data. You can choose to view the data before or after the panel applies field options or field option overrides.
1. Edit the panel that contains the query data you want to download.
1. In the query editor, click **Query Inspector**.
1. Click **Data**.
If your panel contains multiple queries or queries multiple nodes, then you have additional options.
- **Select result**: Choose which result set data you want to view.
- **Transform data**
- **Join by time**: View raw data from all your queries at once, one result set per column. Click a column heading to reorder the data.
1. To see data before the system applies field overrides, click the **Formatted data** toggle.
1. To download a CSV file specifically formatted for Excel, click the **Download for Excel** toggle .
1. Click **Download CSV**.
## Inspect query performance
The **Stats** tab displays statistics that tell you how long your query takes, how many queries you send, and the number of rows returned. This information can help you troubleshoot your queries, especially if any of the numbers are unexpectedly high or low.
1. Edit the panel that contains the query with performance you want to inspect.
1. In the query editor, click **Query Inspector**.
1. Click **Stats**.
Statistics are displayed in read-only format.
## Inspect query request and response data
Inspect query request and response data when you want to troubleshoot a query that returns unexpected results, or fails to return expected results.
1. Edit the panel that contains the query you want to export.
1. In the query editor, click **Query Inspector**.
1. Click **Refresh**.
The panel populates with response data.
1. Make adjustments, as necessary and re-run the query.
1. To download the query request and response data, click the **Copy to clipboard** icon and paste the results into another application.
docs/sources/panels-visualizations/query-transform-data/_index.md
+177
View File
@@ -0,0 +1,177 @@
---
aliases:
- /docs/grafana/latest/panels/expressions/
- /docs/grafana/latest/panels/inspect-panel/
- /docs/grafana/latest/panels/queries/
- /docs/grafana/latest/panels/query-a-data-source/
- /docs/grafana/latest/panels/share-query-results/
- /docs/grafana/latest/panels/query-a-data-source/about-queries/
- /docs/grafana/latest/panels/query-a-data-source/navigate-query-tab/
- /docs/grafana/latest/panels/query-a-data-source/add-a-query/
- /docs/grafana/latest/panels/query-a-data-source/manage-queries/
- /docs/grafana/latest/panels-visualizations/manage-queries/
- /docs/grafana/latest/panels/query-options/
- /docs/grafana/latest/panels/reference-query-options/
- /docs/grafana/latest/panels-visualizations/query-options/
title: Query and transform data
weight: 200
---
# Query and transform data
Data source queries return data that can then be transformed via transformations and then visualized by different types of visualizations. The query language and query builder UI depends on the data source type. Grafana supports many different types of data sources.
## About queries
_Queries_ are how Grafana panels communicate with data sources to get data for the visualization. A query is a question written in the query language used by the data source. How often the query is sent to the data source and how many data points are collected can be adjusted in the panel data source options.
Use you a query editor to write a query. Each data source has its own query editor that we have customized to include the features and capabilities of the data source. Grafana supports up to 26 queries per panel.
> Important! You must be familiar with the query language of the data source. For more information about data sources, refer to [Data sources](../../../datasources/).
### Query editors
Depending on your data source, the query editor might provide auto-completion, metric names, or variable suggestions.
Because of the difference between query languages, data sources have query editors that look different. Here are two examples of query editors.
**InfluxDB query editor**
{{< figure src="/static/img/docs/queries/influxdb-query-editor-7-2.png" class="docs-image--no-shadow" max-width="1000px" >}}
**Prometheus (PromQL) query editor**
{{< figure src="/static/img/docs/queries/prometheus-query-editor-7-4.png" class="docs-image--no-shadow" max-width="1000px" >}}
### Query syntax
Data sources use different query languages to return data. Here are two query examples:
**PostgreSQL**
```
SELECT hostname FROM host WHERE region IN($region)
```
**PromQL**
```
query_result(max_over_time(<metric>[${__range_s}s]) != <state>)
```
### Data sources used in queries
In addition to the data sources that you have configured in Grafana, there are three special data sources available:
- **Grafana -** A built-in data source that generates random walk data, which can be useful for testing visualizations and running experiments.
- **Mixed -** Select this option to query multiple data sources in the same panel. When you select this data source, Grafana enables you to select a data source for every new query that you add.
- The first query uses the data source that was selected before you selected **Mixed**.
- You cannot change an existing query to use the Mixed Data Source.
- **Dashboard -** Select this option to use a result set from another panel in the same dashboard.
You can combine data from multiple data sources onto a single dashboard, but each panel is tied to a specific data source that belongs to a particular Organization.
## Navigate the query tab
The Query tab consists of the following elements:
- Data source selector: Use the data source selector to select the source of the data you want to query. For more information about data sources, refer to [Data sources](../../../datasources/).
- Query options: Enables you to set maximum data retrieved parameters and query execution time intervals.
- Query inspector button: Open the query inspector panel where you can view and optimize your query.
- Query editor list: Lists the queries you have written.
- Expressions: Use the expression builder to create alert expressions. For more information about expressions, refer to [Use expressions to manipulate data](../use-expressions-to-manipulate-data/).
{{< figure src="/static/img/docs/queries/query-editor-7-2.png" class="docs-image--no-shadow" max-width="1000px" >}}
## Add a query
A query returns data that Grafana visualizes in dashboards. When you create a panel, Grafana automatically selects the default data source.
**To add a query**:
1. Edit the panel to which you are adding a query.
1. Click the **Query** tab.
1. Click the **Data source** drop-down menu and select a data source.
1. Click **Query options** to configure the maximum number of data points you need.
For more information about query options, refer to [Query options]({{< relref "#query-options" >}}).
1. Write the query using the query editor.
1. Click **Apply**.
The system queries the data source and presents the data in the visualization.
## Manage queries
Queries are organized in collapsible query rows. Each query row contains a query editor and is identified with a letter (A, B, C, and so on).
You can:
| Icon | Description |
| :-----------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| {{< figure src="/static/img/docs/queries/query-editor-help-7-4.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Toggle query editor help. If supported by the data source, click this icon to display information on how to use the query editor or provide quick access to common queries. |
| {{< figure src="/static/img/docs/queries/duplicate-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Copy a query. Duplicating queries is useful when working with multiple complex queries that are similar and you want to either experiment with different variants or do minor alterations. |
| {{< figure src="/static/img/docs/queries/hide-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Hide a query. Grafana does not send hidden queries to the data source. |
| {{< figure src="/static/img/docs/queries/remove-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Remove a query. Removing a query permanently deletes it, but sometimes you can recover deleted queries by reverting to previously saved versions of the panel. |
| {{< figure src="/static/img/docs/queries/query-drag-icon-7-2.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Reorder queries. Change the order of queries by clicking and holding the drag icon, then drag queries where desired. The order of results reflects the order of the queries, so you can often adjust your visual results based on query order. |
## Query options
Click **Query options** next to the data source selector to see settings for your selected data source. Changes you make here affect only queries made in this panel.
{{< figure src="/static/img/docs/queries/data-source-options-7-0.png" class="docs-image--no-shadow" max-width="1000px" >}}
Grafana sets defaults that are shown in dark gray text. Changes are displayed in white text. To return a field to the default setting, delete the white text from the field.
Panel data source query options:
- **Max data points -** If the data source supports it, sets the maximum numbers of data points for each series returned. If the query returns more data points than the max data points setting, then the data source consolidates them (reduces the number of points returned by aggregating them together by average or max or other function).
There are two main reasons for limiting the number of points, performance and smoothing the line. The default value is the width (or number of pixels) of the graph as there is no point in having more data points than the graph panel can display.
With streaming data, the max data points value is used for the rolling buffer. (Streaming is a continuous flow of data and buffering is a way of dividing the stream into chunks). Loki streams data in the live tailing mode.
- **Min interval -** Sets a minimum limit for the automatically calculated interval, typically the minimum scrape interval. If a data point is saved every 15 seconds, then there's no point in having an interval lower than that. Another use case is to set it to a higher minimum than the scrape interval to get more coarse-grained, well-functioning queries.
- **Interval -** The interval is a time span that you can use when aggregating or grouping data points by time.
Grafana automatically calculates an appropriate interval and it can be used as a variable in templated queries. The variable is either in seconds: `$__interval` or in milliseconds: `$__interval_ms`. It is typically used in aggregation functions like sum or average. For example, a Prometheus query using the interval variable: `rate(http_requests_total[$__interval])`.
This automatic interval is calculated based on the width of the graph. If the user zooms out a lot then the interval becomes greater, resulting in a more coarse grained aggregation whereas if the user zooms in then the interval decreases resulting in a more fine grained aggregation.
For more information, refer to [Global variables]({{< relref "../../dashboards/variables/add-template-variables/#global-variables" >}}).
- **Relative time -** You can override the relative time range for individual panels, causing them to be different than what is selected in the dashboard time picker in the top right corner of the dashboard. This allows you to show metrics from different time periods or days on the same dashboard.
- **Time shift -** The time shift function is another way to override the time range for individual panels. It only works with relative time ranges and allows you to adjust the time range.
For example, you could shift the time range for the panel to be two hours earlier than the dashboard time picker. For more information, refer to [Time range controls]({{< relref "../../dashboards/manage-dashboards/#configure-dashboard-time-range-controls" >}}).
- **Cache timeout -** (This field is only visible if available in your data source.) If your time series store has a query cache, then this option can override the default cache timeout. Specified as a numeric value in seconds.
### Examples
- **Relative time:**
| Example | Relative time field |
| ---------------- | ------------------- |
| Last 5 minutes | `now-5m` |
| The day so far | `now/d` |
| Last 5 days | `now-5d/d` |
| This week so far | `now/w` |
| Last 2 years | `now-2y/y` |
- **Time shift:**
| Example | Time shift field |
| -------------------- | ---------------- |
| Last entire week | `1w/w` |
| Two entire weeks ago | `2w/w` |
| Last entire month | `1M/M` |
| This entire year | `1d/y` |
| Last entire year | `1y/y` |
### Panel time overrides and timeshift
In [Query options]({{< relref "#query-options" >}}), you can override the relative time range for individual panels, which causes them to be different than what is selected in the dashboard time picker located in the upper right. This enables you to show metrics from different time periods or days at the same time.
> **Note:** Panel time overrides have no effect when the time range for the dashboard is absolute.
docs/sources/panels-visualizations/query-transform-data/expression-queries/index.md
+223
View File
@@ -0,0 +1,223 @@
---
aliases:
- /docs/grafana/latest/panels/query-a-data-source/use-expressions-to-manipulate-data/
- /docs/grafana/latest/panels/query-a-data-source/use-expressions-to-manipulate-data/about-expressions/
- /docs/grafana/latest/panels/query-a-data-source/use-expressions-to-manipulate-data/write-an-expression/
- docs/grafana/latest/panels-visualizations/query-transform-data/expression-queries/
title: Write expression queries
menuTitle: Write expression queries
weight: 40
---
# Write expression queries
Server-side expressions enable you to manipulate data returned from queries with math and other operations. Expressions create new data and do not manipulate the data returned by data sources.
## About expressions
> **Note:** This documentation is for a beta feature.
Server-side expressions allow you to manipulate data returned from queries with math and other operations. Expressions create new data and do not manipulate the data returned by data sources, aside from some minor data restructuring to make the data acceptable input for expressions.
### Using expressions
Expressions are primarily used by [Grafana Alerting]({{< relref "../../../alerting/" >}}). The processing is done server-side, so expressions can operate without a browser session. However, expressions can also be used with backend data sources and visualization.
> **Note:** Expressions do not work with legacy dashboard alerts.
Expressions are meant to augment data sources by enabling queries from different data sources to be combined or by providing operations unavailable in a data source.
> **Note:** When possible, you should do data processing inside the data source. Copying data from storage to the Grafana server for processing is inefficient, so expressions are targeted at lightweight data processing.
Expressions work with data source queries that return time series or number data. They also operate on [multiple-dimensional data]({{< relref "../../../basics/timeseries-dimensions/" >}}). For example, a query that returns multiple series, where each series is identified by labels or tags.
An individual expression takes one or more queries or other expressions as input and adds data to the result. Each individual expression or query is represented by a variable that is a named identifier known as its RefID (e.g., the default letter `A` or `B`).
To reference the output of an individual expression or a data source query in another expression, this identifier is used as a variable.
### Types of expressions
Expressions work with two types of data.
- A collection of time series.
- A collection of numbers, where each number is an item.
Each collection is returned from a single data source query or expression and represented by the RefID. Each collection is a set, where each item in the set is uniquely identified by its dimensions which are stored as [labels]({{< relref "../../../basics/timeseries-dimensions/#labels" >}}) or key-value pairs.
### Data source queries
Server-side expressions only support data source queries for backend data sources. The data is generally assumed to be labeled time series data. In the future we intended to add an assertion of the query return type (number or time series) data so expressions can handle errors better.
Data source queries, when used with expressions, are executed by the expression engine. When it does this, it restructures data to be either one time series or one number per data frame. So for example if using a data source that returns multiple series on one frame in the table view, you might notice it looks different when executed with expressions.
Currently, the only non-time series format (number) is supported when using data frames are you have a table response that returns a data frame with no time, string columns, and one number column:
| Loc | Host | Avg_CPU |
| --- | ---- | ------- |
| MIA | A | 1 |
| NYC | B | 2 |
The example above will produce a number that works with expressions. The string columns become labels and the number column the corresponding value. For example `{"Loc": "MIA", "Host": "A"}` with a value of 1.
### Operations
You can use the following operations in expressions: math, reduce, and resample.
#### Math
Math is for free-form math formulas on time series or number data. Math operations take numbers and time series as input and changes them to different numbers and time series.
Data from other queries or expressions are referenced with the RefID prefixed with a dollar sign, for example `$A`. If the variable has spaces in the name, then you can use a brace syntax like `${my variable}`.
Numeric constants may be in decimal (`2.24`), octal (with a leading zero like `072`), or hex (with a leading 0x like `0x2A`). Exponentials and signs are also supported (e.g., `-0.8e-2`).
##### Operators
The arithmetic (`+`, binary and unary `-`, `*`, `/`, `%`, exponent `**`), relational (`<`, `>`, `==`, `!=`, `>=`, `<=`), and logical (`&&`, `||`, and unary `!`) operators are supported.
How the operation behaves with data depends on if it is a number or time series data.
With binary operations, such as `$A + $B` or `$A || $B`, the operator is applied in the following ways depending on the type of data:
- If both `$A` and `$B` are a number, then the operation is performed between the two numbers.
- If one variable is a number, and the other variable is a time series, then the operation between the value of each point in the time series and the number is performed.
- If both `$A` and `$B` are time series data, then the operation between each value in the two series is performed for each time stamp that exists in both `$A` and `$B`. The Resample operation can be used to line up time stamps. (**Note:** in the future, we plan to add options to the Math operation for different behaviors).
Summary:
- Number OP number = number
- Number OP series = series
- Series OP series = series
Because expressions work with multiple series or numbers represented by a single variable, binary operations also perform a union (join) between the two variables. This is done based on the identifying labels associated with each individual series or number.
So if you have numbers with labels like `{host=web01}` in `$A` and another number in `$B` with the same labels then the operation is performed between those two items within each variable, and the result will share the same labels. The rules for the behavior of this union are as follows:
- An item with no labels will join to anything.
- If both `$A` and `$B` each contain only one item (one series, or one number), they will join.
- If labels are exact math they will join.
- If labels are a subset of the other, for example and item in `$A` is labeled `{host=A,dc=MIA}` and and item in `$B` is labeled `{host=A}` they will join.
- Currently, if within a variable such as `$A` there are different tag _keys_ for each item, the join behavior is undefined.
The relational and logical operators return 0 for false 1 for true.
##### Math Functions
While most functions exist in the own expression operations, the math operation does have some functions that similar to math operators or symbols. When functions can take either numbers or series, than the same type as the argument will be returned. When it is a series, the operation of performed for the value of each point in the series.
###### abs
abs returns the absolute value of its argument which can be a number or a series. For example `abs(-1)` or `abs($A)`.
###### is_inf
is_inf takes a number or a series and returns `1` for `Inf` values (negative or positive) and `0` for other values. For example `is_inf($A)`.
> **Note:** If you need to specifically check for negative infinity for example, you can do a comparison like `$A == infn()`.
###### is_nan
is_nan takes a number or a series and returns `1` for `NaN` values and `0` for other values. For example `is_nan($A)`. This function exists because `NaN` is not equal to `NaN`.
###### is_null
is_null takes a number or a series and returns `1` for `null` values and `0` for other values. For example `is_null($A)`.
###### is_number
is_number takes a number or a series and returns `1` for all real number values and `0` for other values (which are `null`, `Inf+`, `Inf-`, and `NaN`). For example `is_number($A)`.
###### log
Log returns the natural logarithm of of its argument which can be a number or a series. If the value is less than 0, NaN is returned. For example `log(-1)` or `log($A)`.
###### inf, infn, nan, and null
The inf, infn, nan, and null functions all return a single value of the name. They primarily exist for testing. Example: `null()`.
###### round
Round returns a rounded integer value. For example, `round(3.123)` or `round($A)`. (This function should probably take an argument so it can add precision to the rounded value).
###### ceil
Ceil rounds the number up to the nearest integer value. For example, `ceil(3.123)` returns 4.
###### floor
Floor rounds the number down to the nearest integer value. For example, `floor(3.123)` returns 3.
#### Reduce
Reduce takes one or more time series returned from a query or an expression and turns each series into a single number. The labels of the time series are kept as labels on each outputted reduced number.
**Fields:**
- **Function -** The reduction function to use
- **Input -** The variable (refID (such as `A`)) to resample
- **Mode -** Allows control behavior of reduction function when a series contains non-numerical values (null, NaN, +\-Inf)
##### Reduction Functions
###### Count
Count returns the number of points in each series.
###### Mean
Mean returns the total of all values in each series divided by the number of points in that series. In `strict` mode if any values in the series are null or nan, or if the series is empty, NaN is returned.
###### Min and Max
Min and Max return the smallest or largest value in the series respectively. In `strict` mode if any values in the series are null or nan, or if the series is empty, NaN is returned.
###### Sum
Sum returns the total of all values in the series. If series is of zero length, the sum will be 0. In `strict` mode if there are any NaN or Null values in the series, NaN is returned.
##### Last
Last returns the last number in the series. If the series has no values then returns NaN.
##### Reduction Modes
###### Strict
In Strict mode the input series is processed as is. If any values in the series are non-numeric (null, NaN or +\-Inf), NaN is returned.
###### Drop Non-Numeric
In this mode all non-numeric values (null, NaN or +\-Inf) in the input series are filtered out before executing the reduction function.
###### Replace Non-Numeric
In this mode all non-numeric values are replaced by a pre-defined value.
#### Resample
Resample changes the time stamps in each time series to have a consistent time interval. The main use case is so you can resample time series that do not share the same timestamps so math can be performed between them. This can be done by resample each of the two series, and then in a Math operation referencing the resampled variables.
**Fields:**
- **Input -** The variable of time series data (refID (such as `A`)) to resample
- **Resample to -** The duration of time to resample to, for example `10s`. Units may be `s` seconds, `m` for minutes, `h` for hours, `d` for days, `w` for weeks, and `y` of years.
- **Downsample -** The reduction function to use when there are more than one data point per window sample. See the reduction operation for behavior details.
- **Upsample -** The method to use to fill a window sample that has no data points.
- **pad** fills with the last know value
- **backfill** with next known value
- **fillna** to fill empty sample windows with NaNs
## Write an expression
If your data source supports them, then Grafana displays the **Expression** button and shows any existing expressions in the query editor list.
For more information about expressions, refer to [About expressions]({{< relref "#about-expressions" >}}).
1. Open the panel.
1. Below the query, click **Expression**.
1. In the **Operation** field, select the type of expression you want to write.
For more information about expression operations, refer to [About expressions]({{< relref "#about-expressions" >}}).
1. Write the expression.
1. Click **Apply**.
docs/sources/panels-visualizations/query-transform-data/share-query/index.md
+29
View File
@@ -0,0 +1,29 @@
---
aliases:
- /docs/grafana/latest/panels/query-a-data-source/share-query/
- /docs/grafana/latest/panels-visualizations/query-transform-data/share-query/
title: Share query results with another panel
menuTitle: Share query results
weight: 60
---
# Share query results with another panel
Grafana let you use the query result from one panel for any other panel in the dashboard. Sharing query results across panels reduces the number of queries made to your data source, which can improve the performance of your dashboard.
The Dashboard data source lets you select a panel in your dashboard that contains the queries ‌you want to share the results for. Instead of sending a separate query for each panel, Grafana sends one query and other panels use the query results to construct visualizations.
This strategy can drastically reduce the number of queries being made when you for example have several panels visualizing the same data.
1. [Create a dashboard]({{< relref "../../../dashboards/build-dashboards/create-dashboard/" >}}).
1. Change the title to "Source panel". You'll use this panel as a source for the other panels.
1. Define the [query]({{< relref "../#add-a-query" >}}) or queries that you want share.
If you don't have a data source available, use the **Grafana** data source, which returns a random time series that you can use for testing.
1. Add a second panel and select the **Dashboard** data source in the query editor.
1. In the **Use results from panel list**, select the first panel you created.
All queries defined in the source panel are now available to the new panel. Queries made in the source panel can be shared with multiple panels.
You can click on any of the queries to go to the panel where they are defined.
docs/sources/panels-visualizations/query-transform-data/transform-data/index.md
+703
View File
@@ -0,0 +1,703 @@
---
aliases:
- /docs/grafana/latest/panels/transform-data/
- /docs/grafana/latest/panels/transformations/
- /docs/grafana/latest/panels/transformations/apply-transformations/
- /docs/grafana/latest/panels/transformations/config-from-query/
- /docs/grafana/latest/panels/transformations/rows-to-fields/
- /docs/grafana/latest/panels/transform-data/about-transformation/
- /docs/grafana/latest/panels/transform-data/add-transformation-to-data/
- /docs/grafana/latest/panels/transform-data/apply-transformation-to-data/
- /docs/grafana/latest/panels/transform-data/debug-transformation/
- /docs/grafana/latest/panels/transform-data/delete-transformation/
- /docs/grafana/latest/panels/reference-transformation-functions/
- /docs/grafana/latest/panels/transform-data/transformation-functions/
- /docs/grafana/latest/panels/transformations/types-options/
- /docs/grafana/latest/panels-visualizations/query-transform-data/transform-data/
title: Transform data
weight: 100
---
# Transform data
Transformations are a powerful way to manipulate data returned by a query before the system applies a visualization. Using transformations, you can:
- Rename fields
- Join time series data
- Perform mathematical operations across queries
- Use the output of one transformation as the input to another transformation
For users that rely on multiple views of the same dataset, transformations offer an efficient method of creating and maintaining numerous dashboards.
You can also use the output of one transformation as the input to another transformation, which results in a performance gain.
> Sometimes the system cannot graph transformed data. When that happens, click the `Table view` toggle above the visualization to switch to a table view of the data. This can help you understand the final result of your transformations.
## Transformation types
Grafana provides a number of ways that you can transform data. For a complete list of transformations, refer to [Transformation functions]({{< relref "#transformation-functions" >}}).
## Order of transformations
When there are multiple transformations, Grafana applies them in the order they are listed. Each transformation creates a result set that then passes on to the next transformation in the processing pipeline.
The order in which Grafana applies transformations directly impacts the results. For example, if you use a Reduce transformation to condense all the results of one column into a single value, then you can only apply transformations to that single value.
## Add a transformation function to data
The following steps guide you in adding a transformation to data. This documentation does not include steps for each type of transformation. For a complete list of transformations, refer to [Transformation functions]({{< relref "#transformation-functions" >}}).
1. Navigate to the panel where you want to add one or more transformations.
1. Click the panel title and then click **Edit**.
1. Click the **Transform** tab.
1. Click a transformation.
A transformation row appears where you configure the transformation options. For more information about how to configure a transformation, refer to [Transformation functions]({{< relref "#transformation-functions" >}}).
For information about available calculations, refer to [Calculation types]({{< relref "../../calculation-types" >}}).
1. To apply another transformation, click **Add transformation**.
This transformation acts on the result set returned by the previous transformation.
{{< figure src="/static/img/docs/transformations/transformations-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
## Debug a transformation
To see the input and the output result sets of the transformation, click the bug icon on the right side of the transformation row.
The input and output results sets can help you debug a transformation.
{{< figure src="/static/img/docs/transformations/debug-transformations-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
## Delete a transformation
We recommend that you remove transformations that you don't need. When you delete a transformation, you remove the data from the visualization.
**Before you begin:**
- Identify all dashboards that rely on the transformation and inform impacted dashboard users.
**To delete a transformation**:
1. Open a panel for editing.
1. Click the **Transform** tab.
1. Click the trash icon next to the transformation you want to delete.
## Transformation functions
You can perform the following transformations on your data.
### Add field from calculation
Use this transformation to add a new field calculated from two other fields. Each transformation allows you to add one new field.
- **Mode -** Select a mode:
- **Reduce row -** Apply selected calculation on each row of selected fields independently.
- **Binary option -** Apply basic math operation(sum, multiply, etc) on values in a single row from two selected fields.
- **Field name -** Select the names of fields you want to use in the calculation for the new field.
- **Calculation -** If you select **Reduce row** mode, then the **Calculation** field appears. Click in the field to see a list of calculation choices you can use to create the new field. For information about available calculations, refer to [Calculation types]({{< relref "../../calculation-types" >}}).
- **Operation -** If you select **Binary option** mode, then the **Operation** fields appear. These fields allow you to do basic math operations on values in a single row from two selected fields. You can also use numerical values for binary operations.
- **Alias -** (Optional) Enter the name of your new field. If you leave this blank, then the field will be named to match the calculation.
- **Replace all fields -** (Optional) Select this option if you want to hide all other fields and display only your calculated field in the visualization.
In the example below, I added two fields together and named them Sum.
{{< figure src="/static/img/docs/transformations/add-field-from-calc-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
### Concatenate fields
This transformation combines all fields from all frames into one result. Consider:
Query A:
| Temp | Uptime |
| ---- | ------- |
| 15.4 | 1230233 |
Query B:
| AQI | Errors |
| --- | ------ |
| 3.2 | 5 |
After you concatenate the fields, the data frame would be:
| Temp | Uptime | AQI | Errors |
| ---- | ------- | --- | ------ |
| 15.4 | 1230233 | 3.2 | 5 |
### Config from query results
This transformation allow you to select one query and from it extract standard options like **Min**, **Max**, **Unit** and **Thresholds** and apply it to other query results. This enables dynamic query driven visualization configuration.
If you want to extract a unique config for every row in the config query result then try the rows to fields transformation.
#### Options
- **Config query**: Select the query that returns the data you want to use as configuration.
- **Apply to**: Select what fields or series to apply the configuration to.
- **Apply to options**: Usually a field type or field name regex depending on what option you selected in **Apply to**.
### Convert field type
This transformation changes the field type of the specified field.
- **Field -** Select from available fields
- **as -** Select the FieldType to convert to
- **Numeric -** attempts to make the values numbers
- **String -** will make the values strings
- **Time -** attempts to parse the values as time
- Will show an option to specify a DateFormat as input by a string like yyyy-mm-dd or DD MM YYYY hh:mm:ss
- **Boolean -** will make the values booleans
For example the following query could be modified by selecting the time field, as Time, and Date Format as YYYY.
| Time | Mark | Value |
| ---------- | ----- | ----- |
| 2017-07-01 | above | 25 |
| 2018-08-02 | below | 22 |
| 2019-09-02 | below | 29 |
| 2020-10-04 | above | 22 |
The result:
| Time | Mark | Value |
| ------------------- | ----- | ----- |
| 2017-01-01 00:00:00 | above | 25 |
| 2018-01-01 00:00:00 | below | 22 |
| 2019-01-01 00:00:00 | below | 29 |
| 2020-01-01 00:00:00 | above | 22 |
### Filter data by name
Use this transformation to remove portions of the query results.
Grafana displays the **Identifier** field, followed by the fields returned by your query.
You can apply filters in one of two ways:
- Enter a regex expression.
- Click a field to toggle filtering on that field. Filtered fields are displayed with dark gray text, unfiltered fields have white text.
In the example below, I removed the Min field from the results.
Here is the original query table. (This is streaming data, so numbers change over time and between screenshots.)
{{< figure src="/static/img/docs/transformations/filter-name-table-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
Here is the table after I applied the transformation to remove the Min field.
{{< figure src="/static/img/docs/transformations/filter-name-table-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
Here is the same query using a Stat visualization.
{{< figure src="/static/img/docs/transformations/filter-name-stat-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
### Filter data by query
Use this transformation in panels that have multiple queries, if you want to hide one or more of the queries.
Grafana displays the query identification letters in dark gray text. Click a query identifier to toggle filtering. If the query letter is white, then the results are displayed. If the query letter is dark, then the results are hidden.
In the example below, the panel has three queries (A, B, C). I removed the B query from the visualization.
{{< figure src="/static/img/docs/transformations/filter-by-query-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
> **Note:** This transformation is not available for Graphite because this data source does not support correlating returned data with queries.
### Filter data by value
This transformation allows you to filter your data directly in Grafana and remove some data points from your query result. You have the option to include or exclude data that match one or more conditions you define. The conditions are applied on a selected field.
This transformation is very useful if your data source does not natively filter by values. You might also use this to narrow values to display if you are using a shared query.
The available conditions for all fields are:
- **Regex:** Match a regex expression
- **Is Null:** Match if the value is null
- **Is Not Null:** Match if the value is not null
- **Equal:** Match if the value is equal to the specified value
- **Different:** match if the value is different than the specified value
The available conditions for number fields are:
- **Greater:** Match if the value is greater than the specified value
- **Lower:** Match if the value is lower than the specified value
- **Greater or equal:** Match if the value is greater or equal
- **Lower or equal:** Match if the value is lower or equal
- **Range:** Match a range between a specified minimum and maximum, min and max included
Consider the following data set:
| Time | Temperature | Altitude |
| ------------------- | ----------- | -------- |
| 2020-07-07 11:34:23 | 32 | 101 |
| 2020-07-07 11:34:22 | 28 | 125 |
| 2020-07-07 11:34:21 | 26 | 110 |
| 2020-07-07 11:34:20 | 23 | 98 |
| 2020-07-07 10:32:24 | 31 | 95 |
| 2020-07-07 10:31:22 | 20 | 85 |
| 2020-07-07 09:30:57 | 19 | 101 |
If you **Include** the data points that have a temperature below 30°C, the configuration will look as follows:
- Filter Type: `Include`
- Condition: Rows where `Temperature` matches `Lower Than` `30`
And you will get the following result, where only the temperatures below 30°C are included:
| Time | Temperature | Altitude |
| ------------------- | ----------- | -------- |
| 2020-07-07 11:34:22 | 28 | 125 |
| 2020-07-07 11:34:21 | 26 | 110 |
| 2020-07-07 11:34:20 | 23 | 98 |
| 2020-07-07 10:31:22 | 20 | 85 |
| 2020-07-07 09:30:57 | 19 | 101 |
You can add more than one condition to the filter. For example, you might want to include the data only if the altitude is greater than 100. To do so, add that condition to the following configuration:
- Filter type: `Include` rows that `Match All` conditions
- Condition 1: Rows where `Temperature` matches `Lower` than `30`
- Condition 2: Rows where `Altitude` matches `Greater` than `100`
When you have more than one condition, you can choose if you want the action (include / exclude) to be applied on rows that **Match all** conditions or **Match any** of the conditions you added.
In the example above we chose **Match all** because we wanted to include the rows that have a temperature lower than 30 _AND_ an altitude higher than 100. If we wanted to include the rows that have a temperature lower than 30 _OR_ an altitude higher than 100 instead, then we would select **Match any**. This would include the first row in the original data, which has a temperature of 32°C (does not match the first condition) but an altitude of 101 (which matches the second condition), so it is included.
Conditions that are invalid or incompletely configured are ignored.
### Group by
This transformation groups the data by a specified field (column) value and processes calculations on each group. Click to see a list of calculation choices. For information about available calculations, refer to [Calculation types]({{< relref "../../calculation-types" >}}).
Here's an example of original data.
| Time | Server ID | CPU Temperature | Server Status |
| ------------------- | --------- | --------------- | ------------- |
| 2020-07-07 11:34:20 | server 1 | 80 | Shutdown |
| 2020-07-07 11:34:20 | server 3 | 62 | OK |
| 2020-07-07 10:32:20 | server 2 | 90 | Overload |
| 2020-07-07 10:31:22 | server 3 | 55 | OK |
| 2020-07-07 09:30:57 | server 3 | 62 | Rebooting |
| 2020-07-07 09:30:05 | server 2 | 88 | OK |
| 2020-07-07 09:28:06 | server 1 | 80 | OK |
| 2020-07-07 09:25:05 | server 2 | 88 | OK |
| 2020-07-07 09:23:07 | server 1 | 86 | OK |
This transformation goes in two steps. First you specify one or multiple fields to group the data by. This will group all the same values of those fields together, as if you sorted them. For instance if we group by the Server ID field, then it would group the data this way:
| Time | Server ID | CPU Temperature | Server Status |
| ------------------- | -------------- | --------------- | ------------- |
| 2020-07-07 11:34:20 | **server 1** | 80 | Shutdown |
| 2020-07-07 09:28:06 | **server 1** | 80 | OK |
| 2020-07-07 09:23:07 | **server 1** | 86 | OK |
| 2020-07-07 10:32:20 | server 2 | 90 | Overload |
| 2020-07-07 09:30:05 | server 2 | 88 | OK |
| 2020-07-07 09:25:05 | server 2 | 88 | OK |
| 2020-07-07 11:34:20 | **_server 3_** | 62 | OK |
| 2020-07-07 10:31:22 | **_server 3_** | 55 | OK |
| 2020-07-07 09:30:57 | **_server 3_** | 62 | Rebooting |
All rows with the same value of Server ID are grouped together.
After choosing which field you want to group your data by, you can add various calculations on the other fields, and apply the calculation to each group of rows. For instance, we could want to calculate the average CPU temperature for each of those servers. So we can add the _mean_ calculation applied on the CPU Temperature field to get the following:
| Server ID | CPU Temperature (mean) |
| --------- | ---------------------- |
| server 1 | 82 |
| server 2 | 88.6 |
| server 3 | 59.6 |
And we can add more than one calculation. For instance:
- For field Time, we can calculate the _Last_ value, to know when the last data point was received for each server
- For field Server Status, we can calculate the _Last_ value to know what is the last state value for each server
- For field Temperature, we can also calculate the _Last_ value to know what is the latest monitored temperature for each server
We would then get :
| Server ID | CPU Temperature (mean) | CPU Temperature (last) | Time (last) | Server Status (last) |
| --------- | ---------------------- | ---------------------- | ------------------- | -------------------- |
| server 1 | 82 | 80 | 2020-07-07 11:34:20 | Shutdown |
| server 2 | 88.6 | 90 | 2020-07-07 10:32:20 | Overload |
| server 3 | 59.6 | 62 | 2020-07-07 11:34:20 | OK |
This transformation enables you to extract key information from your time series and display it in a convenient way.
### Join by field
Use this transformation to join multiple results into a single table. This is especially useful for converting multiple
time series results into a single wide table with a shared time field.
#### Inner join
An inner join merges data from multiple tables where all tables share the same value from the selected field. This type of join excludes
data where values do not match in every result.
Use this transformation to combine the results from multiple queries (combining on a passed join field or the first time column) into one result, and drop rows where a successful join cannot occur.
In the following example, two queries return table data. It is visualized as two separate tables before applying the inner join transformation.
Query A:
| Time | Job | Uptime |
| ------------------- | ------- | --------- |
| 2020-07-07 11:34:20 | node | 25260122 |
| 2020-07-07 11:24:20 | postgre | 123001233 |
| 2020-07-07 11:14:20 | postgre | 345001233 |
Query B:
| Time | Server | Errors |
| ------------------- | -------- | ------ |
| 2020-07-07 11:34:20 | server 1 | 15 |
| 2020-07-07 11:24:20 | server 2 | 5 |
| 2020-07-07 11:04:20 | server 3 | 10 |
The result after applying the inner join transformation looks like the following:
| Time | Job | Uptime | Server | Errors |
| ------------------- | ------- | --------- | -------- | ------ |
| 2020-07-07 11:34:20 | node | 25260122 | server 1 | 15 |
| 2020-07-07 11:24:20 | postgre | 123001233 | server 2 | 5 |
#### Outer join
An outer join includes all data from an inner join and rows where values do not match in every input.
Use this transformation to combine the results from multiple queries (combining on a passed join field or the first time column) into one result, and drop rows where a successful join cannot occur - performing an inner join.
In the following example, two queries return table data. It is visualized as two tables before applying the inner join transformation.
Query A:
| Time | Job | Uptime |
| ------------------- | ------- | --------- |
| 2020-07-07 11:34:20 | node | 25260122 |
| 2020-07-07 11:24:20 | postgre | 123001233 |
| 2020-07-07 11:14:20 | postgre | 345001233 |
Query B:
| Time | Server | Errors |
| ------------------- | -------- | ------ |
| 2020-07-07 11:34:20 | server 1 | 15 |
| 2020-07-07 11:24:20 | server 2 | 5 |
| 2020-07-07 11:04:20 | server 3 | 10 |
The result after applying the inner join transformation looks like the following:
| Time | Job | Uptime | Server | Errors |
| ------------------- | ------- | --------- | -------- | ------ |
| 2020-07-07 11:34:20 | node | 25260122 | server 1 | 15 |
| 2020-07-07 11:24:20 | postgre | 123001233 | server 2 | 5 |
In the following example, a template query displays time series data from multiple servers in a table visualization. The results of only one query can be viewed at a time.
{{< figure src="/static/img/docs/transformations/join-fields-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
I applied a transformation to join the query results using the time field. Now I can run calculations, combine, and organize the results in this new table.
{{< figure src="/static/img/docs/transformations/join-fields-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
### Labels to fields
This transformation changes time series results that include labels or tags into a table where each label keys and values are included in the table result. The labels can be displayed either as columns or as row values.
Given a query result of two time series:
- Series 1: labels Server=Server A, Datacenter=EU
- Series 2: labels Server=Server B, Datacenter=EU
In "Columns" mode, the result looks like this:
| Time | Server | Datacenter | Value |
| ------------------- | -------- | ---------- | ----- |
| 2020-07-07 11:34:20 | Server A | EU | 1 |
| 2020-07-07 11:34:20 | Server B | EU | 2 |
In "Rows" mode, the result has a table for each series and show each label value like this:
| label | value |
| ---------- | -------- |
| Server | Server A |
| Datacenter | EU |
| label | value |
| ---------- | -------- |
| Server | Server B |
| Datacenter | EU |
#### Value field name
If you selected Server as the **Value field name**, then you would get one field for every value of the Server label.
| Time | Datacenter | Server A | Server B |
| ------------------- | ---------- | -------- | -------- |
| 2020-07-07 11:34:20 | EU | 1 | 2 |
#### Merging behavior
The labels to fields transformer is internally two separate transformations. The first acts on single series and extracts labels to fields. The second is the [merge](#merge) transformation that joins all the results into a single table. The merge transformation tries to join on all matching fields. This merge step is required and cannot be turned off.
To illustrate this, here is an example where you have two queries that return time series with no overlapping labels.
- Series 1: labels Server=ServerA
- Series 2: labels Datacenter=EU
This will first result in these two tables:
| Time | Server | Value |
| ------------------- | ------- | ----- |
| 2020-07-07 11:34:20 | ServerA | 10 |
| Time | Datacenter | Value |
| ------------------- | ---------- | ----- |
| 2020-07-07 11:34:20 | EU | 20 |
After merge:
| Time | Server | Value | Datacenter |
| ------------------- | ------- | ----- | ---------- |
| 2020-07-07 11:34:20 | ServerA | 10 | |
| 2020-07-07 11:34:20 | | 20 | EU |
### Merge
Use this transformation to combine the result from multiple queries into one single result. This is helpful when using the table panel visualization. Values that can be merged are combined into the same row. Values are mergeable if the shared fields contain the same data. For information, refer to [Table panel]({{< relref "../../visualizations/table/" >}}).
In the example below, we have two queries returning table data. It is visualized as two separate tables before applying the transformation.
Query A:
| Time | Job | Uptime |
| ------------------- | ------- | --------- |
| 2020-07-07 11:34:20 | node | 25260122 |
| 2020-07-07 11:24:20 | postgre | 123001233 |
Query B:
| Time | Job | Errors |
| ------------------- | ------- | ------ |
| 2020-07-07 11:34:20 | node | 15 |
| 2020-07-07 11:24:20 | postgre | 5 |
Here is the result after applying the Merge transformation.
| Time | Job | Errors | Uptime |
| ------------------- | ------- | ------ | --------- |
| 2020-07-07 11:34:20 | node | 15 | 25260122 |
| 2020-07-07 11:24:20 | postgre | 5 | 123001233 |
### Organize fields
Use this transformation to rename, reorder, or hide fields returned by the query.
> **Note:** This transformation only works in panels with a single query. If your panel has multiple queries, then you must either apply an Outer join transformation or remove the extra queries.
Grafana displays a list of fields returned by the query. You can:
- Change field order by hovering your cursor over a field. The cursor turns into a hand and then you can drag the field to its new place.
- Hide or show a field by clicking the eye icon next to the field name.
- Rename fields by typing a new name in the **Rename <field>** box.
In the example below, I hid the value field and renamed Max and Min.
{{< figure src="/static/img/docs/transformations/organize-fields-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
### Reduce
The _Reduce_ transformation applies a calculation to each field in the frame and return a single value. Time fields are removed when applying this transformation.
Consider the input:
Query A:
| Time | Temp | Uptime |
| ------------------- | ---- | ------- |
| 2020-07-07 11:34:20 | 12.3 | 256122 |
| 2020-07-07 11:24:20 | 15.4 | 1230233 |
Query B:
| Time | AQI | Errors |
| ------------------- | --- | ------ |
| 2020-07-07 11:34:20 | 6.5 | 15 |
| 2020-07-07 11:24:20 | 3.2 | 5 |
The reduce transformer has two modes:
- **Series to rows -** Creates a row for each field and a column for each calculation.
- **Reduce fields -** Keeps the existing frame structure, but collapses each field into a single value.
For example, if you used the **First** and **Last** calculation with a **Series to rows** transformation, then
the result would be:
| Field | First | Last |
| ------ | ------ | ------- |
| Temp | 12.3 | 15.4 |
| Uptime | 256122 | 1230233 |
| AQI | 6.5 | 3.2 |
| Errors | 15 | 5 |
The **Reduce fields** with the **Last** calculation,
results in two frames, each with one row:
Query A:
| Temp | Uptime |
| ---- | ------- |
| 15.4 | 1230233 |
Query B:
| AQI | Errors |
| --- | ------ |
| 3.2 | 5 |
### Rename by regex
Use this transformation to rename parts of the query results using a regular expression and replacement pattern.
You can specify a regular expression, which is only applied to matches, along with a replacement pattern that support back references. For example, let's imagine you're visualizing CPU usage per host and you want to remove the domain name. You could set the regex to `([^\.]+)\..+` and the replacement pattern to `$1`, `web-01.example.com` would become `web-01`.
In the following example, we are stripping the prefix from event types. In the before image, you can see everything is prefixed with `system.`
{{< figure src="/static/img/docs/transformations/rename-by-regex-before-7-3.png" class="docs-image--no-shadow" max-width= "1100px" >}}
With the transformation applied, you can see we are left with just the remainder of the string.
{{< figure src="/static/img/docs/transformations/rename-by-regex-after-7-3.png" class="docs-image--no-shadow" max-width= "1100px" >}}
### Rows to fields
The rows to fields transformation converts rows into separate fields. This can be useful as fields can be styled and configured individually. It can also use additional fields as sources for dynamic field configuration or map them to field labels. The additional labels can then be used to define better display names for the resulting fields.
This transformation includes a field table which lists all fields in the data returned by the config query. This table gives you control over what field should be mapped to each config property (the \*Use as\*\* option). You can also choose which value to select if there are multiple rows in the returned data.
This transformation requires:
- One field to use as the source of field names.
By default, the transform uses the first string field as the source. You can override this default setting by selecting **Field name** in the **Use as** column for the field you want to use instead.
- One field to use as the source of values.
By default, the transform uses the first number field as the source. But you can override this default setting by selecting **Field value** in the **Use as** column for the field you want to use instead.
Useful when visualizing data in:
- Gauge
- Stat
- Pie chart
#### Map extra fields to labels
If a field does not map to config property Grafana will automatically use it as source for a label on the output field-
Example:
| Name | DataCenter | Value |
| ------- | ---------- | ----- |
| ServerA | US | 100 |
| ServerB | EU | 200 |
Output:
| ServerA (labels: DataCenter: US) | ServerB (labels: DataCenter: EU) |
| -------------------------------- | -------------------------------- |
| 10 | 20 |
The extra labels can now be used in the field display name provide more complete field names.
If you want to extract config from one query and appply it to another you should use the config from query results transformation.
#### Example
Input:
| Name | Value | Max |
| ------- | ----- | --- |
| ServerA | 10 | 100 |
| ServerB | 20 | 200 |
| ServerC | 30 | 300 |
Output:
| ServerA (config: max=100) | ServerB (config: max=200) | ServerC (config: max=300) |
| ------------------------- | ------------------------- | ------------------------- |
| 10 | 20 | 30 |
As you can see each row in the source data becomes a separate field. Each field now also has a max config option set. Options like **Min**, **Max**, **Unit** and **Thresholds** are all part of field configuration and if set like this will be used by the visualization instead of any options manually configured in the panel editor options pane.
### Prepare time series
> **Note:** This transformation is available in Grafana 7.5.10+ and Grafana 8.0.6+.
Prepare time series transformation is useful when a data source returns time series data in a format that isn't supported by the panel you want to use. For more information about data frame formats, refer to [Data frames]({{< relref "../../../developers/plugins/data-frames/" >}}).
This transformation helps you resolve this issue by converting the time series data from either the wide format to the long format or the other way around.
Select the `Multi-frame time series` option to transform the time series data frame from the wide to the long format.
Select the `Wide time series` option to transform the time series data frame from the long to the wide format.
### Series to rows
> **Note:** This transformation is available in Grafana 7.1+.
Use this transformation to combine the result from multiple time series data queries into one single result. This is helpful when using the table panel visualization.
The result from this transformation will contain three columns: Time, Metric, and Value. The Metric column is added so you easily can see from which query the metric originates from. Customize this value by defining Label on the source query.
In the example below, we have two queries returning time series data. It is visualized as two separate tables before applying the transformation.
Query A:
| Time | Temperature |
| ------------------- | ----------- |
| 2020-07-07 11:34:20 | 25 |
| 2020-07-07 10:31:22 | 22 |
| 2020-07-07 09:30:05 | 19 |
Query B:
| Time | Humidity |
| ------------------- | -------- |
| 2020-07-07 11:34:20 | 24 |
| 2020-07-07 10:32:20 | 29 |
| 2020-07-07 09:30:57 | 33 |
Here is the result after applying the Series to rows transformation.
| Time | Metric | Value |
| ------------------- | ----------- | ----- |
| 2020-07-07 11:34:20 | Temperature | 25 |
| 2020-07-07 11:34:20 | Humidity | 22 |
| 2020-07-07 10:32:20 | Humidity | 29 |
| 2020-07-07 10:31:22 | Temperature | 22 |
| 2020-07-07 09:30:57 | Humidity | 33 |
| 2020-07-07 09:30:05 | Temperature | 19 |
### Sort by
This transformation will sort each frame by the configured field, When `reverse` is checked, the values will return in the opposite order.
### Limit
Use this transformation to limit the number of rows displayed.
In the example below, we have the following response from the data source:
| Time | Metric | Value |
| ------------------- | ----------- | ----- |
| 2020-07-07 11:34:20 | Temperature | 25 |
| 2020-07-07 11:34:20 | Humidity | 22 |
| 2020-07-07 10:32:20 | Humidity | 29 |
| 2020-07-07 10:31:22 | Temperature | 22 |
| 2020-07-07 09:30:57 | Humidity | 33 |
| 2020-07-07 09:30:05 | Temperature | 19 |
Here is the result after adding a Limit transformation with a value of '3':
| Time | Metric | Value |
| ------------------- | ----------- | ----- |
| 2020-07-07 11:34:20 | Temperature | 25 |
| 2020-07-07 11:34:20 | Humidity | 22 |
| 2020-07-07 10:32:20 | Humidity | 29 |
docs/sources/panels-visualizations/query-transform-data/troubleshoot-queries/index.md
+38
View File
@@ -0,0 +1,38 @@
---
aliases:
- /docs/grafana/latest/troubleshooting/troubleshoot-queries/
- /docs/grafana/latest/panels-visualizations/query-transform-data/troubleshoot-queries/
description: Guide to troubleshooting Grafana queries
keywords:
- grafana
- troubleshooting
- documentation
- guide
- queries
title: Troubleshoot queries
weight: 200
---
# Troubleshoot queries
This page provides information to solve common dashboard problems.
## I get different results when I rearrange my functions
Function order is very important. Just like in math, the order that you place your functions can affect the result.
## Inspect your query request and response
The most common problems are related to the query and response from your data source. Even if it looks
like a bug or visualization issue in Grafana, it is almost always a problem with the data source query or
the data source response. Start by inspecting your panel query and response.
For more information, refer to [Inspect request and response data]({{< relref "../../panel-inspector/#inspect-query-request-and-response data/" >}}).
## My query is slow
How many data points is your query returning? A query that returns lots of data points will be slow. Try this:
- In **Query options**, limit the **Max data points** returned.
- In **Query options**, increase the **Min interval** time.
- In your query, use a `group by` function.
docs/sources/panels-visualizations/visualizations/_index.md
+99
View File
@@ -0,0 +1,99 @@
---
aliases:
- /docs/grafana/latest/panels/visualizations/
- /docs/grafana/latest/visualizations/
- /docs/grafana/latest/panels-visualizations/visualizations/
- /docs/grafana/latest/features/panels/graph/
- /docs/grafana/latest/panels/visualizations/graph-panel/
- /docs/grafana/latest/reference/graph/
- /docs/grafana/latest/visualizations/graph-panel/
title: Visualizations
weight: 75
---
# Visualizations
Grafana offers a variety of visualizations to support different use cases. This section of the documentation highlights the built-in panels, their options and typical usage.
> **Note:** If you are unsure which visualization to pick, Grafana can provide visualization suggestions based on the panel query. When you select a visualization, Grafana will show a preview with that visualization applied.
- Graphs & charts
- [Time series]({{< relref "time-series/" >}}) is the default and main Graph visualization.
- [State timeline]({{< relref "state-timeline/" >}}) for state changes over time.
- [Status history]({{< relref "status-history/" >}}) for periodic state over time.
- [Bar chart]({{< relref "bar-chart/" >}}) shows any categorical data.
- [Histogram]({{< relref "histogram/" >}}) calculates and shows value distribution in a bar chart.
- [Heatmap]({{< relref "heatmap/" >}}) visualizes data in two dimensions, used typically for the magnitude of a phenomenon.
- [Pie chart]({{< relref "pie-chart/" >}}) is typically used where proportionality is important.
- [Candlestick]({{< relref "candlestick/" >}}) is typically for financial data where the focus is price/data movement.
- Stats & numbers
- [Stat]({{< relref "stat/" >}}) for big stats and optional sparkline.
- [Bar gauge]({{< relref "bar-gauge/" >}}) is a horizontal or vertical bar gauge.
- Misc
- [Table]({{< relref "table/" >}}) is the main and only table visualization.
- [Logs]({{< relref "logs/" >}}) is the main visualization for logs.
- [Node Graph]({{< relref "node-graph/" >}}) for directed graphs or networks.
- [Traces]({{< relref "traces/" >}}) is the main visualization for traces.
- Widgets
- [Dashboard list]({{< relref "dashboard-list/" >}}) can list dashboards.
- [Alert list]({{< relref "alert-list/" >}}) can list alerts.
- [Text panel]({{< relref "text/" >}}) can show markdown and html.
- [News panel]({{< relref "news/" >}}) can show RSS feeds.
## Get more
You can add more visualization types by installing panel [panel plugins](https://grafana.com/grafana/plugins/?type=panel).
## Examples
Below you can find some good examples for how all the visualizations in Grafana can be configured. You can also explore [play.grafana.org](https://play.grafana.org) which has a large set of demo dashboards that showcase all the different visualizations.
### Graphs
For time based line, area and bar charts we recommend the default [Time series]({{< relref "time-series/" >}}) visualization. [This public demo dashboard](https://play.grafana.org/d/000000016/1-time-series-graphs?orgId=1) contains many different examples for how this visualization can be configured and styled.
{{< figure src="/static/img/docs/time-series-panel/time_series_small_example.png" max-width="700px" caption="Time series" >}}
For categorical data use the [Bar chart]({{< relref "bar-chart/" >}}) visualization.
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="700px" caption="Bar chart" >}}
### Big numbers & stats
The [Stat](stat-panel/) visualization shows one large stat value with an optional graph sparkline. You can control the background or value color using thresholds or color scales.
{{< figure src="/static/img/docs/v66/stat_panel_dark3.png" max-width="1025px" caption="Stat panel" >}}
### Gauge
If you want to present a value as it relates to a min and max value you have two options. First a standard [Radial Gauge]({{< relref "gauge/" >}}) shown below.
{{< figure src="/static/img/docs/v66/gauge_panel_cover.png" max-width="700px" >}}
Secondly Grafana also has a horizontal or vertical [Bar gauge]({{< relref "bar-gauge/" >}}) with three different distinct display modes.
{{< figure src="/static/img/docs/v66/bar_gauge_lcd.png" max-width="700px" >}}
### Table
To show data in a table layout, use the [Table]({{< relref "table/" >}}) visualization.
{{< figure src="/static/img/docs/tables/table_visualization.png" max-width="700px" lightbox="true" caption="Table visualization" >}}
### Pie chart
Grafana now ships with an included [Pie chart]({{< relref "pie-chart/" >}}) visualization.
{{< figure src="/static/img/docs/pie-chart-panel/pie-chart-example.png" max-width="700px" lightbox="true" caption="Pie chart visualization" >}}
### Heatmaps
To show value distribution over, time use the [heatmap]({{< relref "heatmap/" >}}) visualization.
{{< figure src="/static/img/docs/v43/heatmap_panel_cover.jpg" max-width="1000px" lightbox="true" caption="Heatmap" >}}
### State timeline
The state timeline panel visualization shows discrete state changes over time. When used with time series, the thresholds are used to turn the numerical values into discrete state regions.
{{< figure src="/static/img/docs/v8/state_timeline_strings.png" max-width="700px" caption="state timeline with string states" >}}
docs/sources/panels-visualizations/visualizations/alert-list/index.md
+62
View File
@@ -0,0 +1,62 @@
---
aliases:
- /docs/grafana/latest/features/panels/alertlist/
- /docs/grafana/latest/panels/visualizations/alert-list-panel/
- /docs/grafana/latest/reference/alertlist/
- /docs/grafana/latest/visualizations/alert-list-panel/
- /docs/grafana/latest/panels-visualizations/visualizations/alert-list/
keywords:
- grafana
- alert list
- documentation
- panel
- alertlist
title: Alert list
weight: 100
---
# Alert list
Use Alert list to display your alerts. You can configure the list to show the current state or recent state changes. You can read more about alerts in [Grafana Alerting overview]({{< relref "../../../alerting/" >}}).
{{< figure src="/static/img/docs/alert-list-panel/alert-list-panel.png" max-width="850px" >}}
Customize your visualization using the following settings.
## Options
- **Group mode -** Choose between "Default grouping" to show alert instances grouped by their alert rule, or "Custom grouping" to group alert instances by a custom set of labels.
- **Max Items -** Sets the maximum number of alerts to list.
- **Sort order -** Select how to order the alerts displayed:
- **Alphabetical (asc) -** Alphabetical order.
- **Alphabetical (desc) -** Reverse alphabetical order.
- **Importance -** By importance according to the following values, with 1 being the highest:
- alerting: 1
- firing: 1
- no_data: 2
- pending: 3
- ok: 4
- paused: 5
- inactive: 5
- **Time (asc) -** Newest active alert instances first.
- **Time (desc) -** Oldest active alert instances first.
- **Alerts from this dashboard -** Shows alerts only from the dashboard the alert list is in.
## Filter
These options allow you to limit alerts shown to only those that match the query, folder, or tags you choose.
- **Alert name -** Enter an alert name query.
- **Alert instance label -** Filter alert instances using label querying, ex: `{severity="critical", instance=~"cluster-us-.+"}`.
- **Folder -** Select a folder. Only alerts from dashboards in the folder selected will be displayed.
- **Datasource -** Filter alerts from the selected data source.
## State filter
Choose which alert states to display in this panel.
- Alerting / Firing
- Pending
- No Data
- Normal
- Error
docs/sources/panels-visualizations/visualizations/annotations/index.md
+80
View File
@@ -0,0 +1,80 @@
---
aliases:
- /docs/grafana/latest/features/panels/anotations/
- /docs/grafana/latest/panels/visualizations/annotations/
- /docs/grafana/latest/visualizations/annotations/
- /docs/grafana/latest/panels-visualizations/visualizations/annotations/
description: Annotations visualization documentation
keywords:
- grafana
- Annotations
- panel
- documentation
title: Annotations
weight: 105
---
# Annotations
The Annotations panel shows a list of available annotations you can use to view annotated data. Various options are available to filter the list based on tags and on the current dashboard.
## Annotation query
The following options control the source query for the list of annotations.
### Query Filter
Use the query filter to create a list of annotations from all dashboards in your organization or the current dashboard in which this panel is located. It has the following options:
- All dashboards - List annotations from all dashboards in the current organization.
- This dashboard - Limit the list to the annotations on the current dashboard.
### Time Range
Use the time range option to specify whether the list should be limited to the current time range. It has the following options:
- None - no time range limit for the annotations query.
- This dashboard - Limit the list to the time range of the dashboard where the annotation list panel is available.
### Tags
Use the tags option to filter the annotations by tags. You can add multiple tags in order to refine the list.
> **Note:** Optionally, leave the tag list empty and filter on the fly by selecting tags that are listed as part of the results on the panel itself.
### Limit
Use the limit option to limit the number of results returned.
## Display
These options control additional meta-data included in the annotations panel display.
### Show user
Use this option to show or hide which user created the annotation.
### Show time
Use this option to show or hide the time the annotation creation time.
### Show Tags
Use this option to show or hide the tags associated with an annotation. _NB_: You can use the tags to live-filter the annotation list on the panel itself.
## Link behavior
### Link target
Use this option to chose how to view the annotated data. It has the following options.
- Panel - This option will take you directly to a full-screen view of the panel with the corresponding annotation
- Dashboard - This option will focus the annotation in the context of a complete dashboard
### Time before
Use this option to set the time range before the annotation. Use duration string values like "1h" = 1 hour, "10m" = 10 minutes, etc.
### Time after
Use this option to set the time range after the annotation.
docs/sources/panels-visualizations/visualizations/bar-chart/index.md
+163
View File
@@ -0,0 +1,163 @@
---
aliases:
- /docs/grafana/latest/panels/visualizations/bar-chart/
- /docs/grafana/latest/visualizations/bar-chart/
- /docs/grafana/latest/panels-visualizations/visualizations/bar-chart/
description: Bar chart visualization
keywords:
- grafana
- docs
- bar chart
- panel
- barchart
title: Bar chart
weight: 170
---
# Bar chart
This panel visualization allows you to graph categorical data.
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="1000px" caption="Bar chart" >}}
## Supported data formats
Only one data frame is supported and it must have at least one string field that will be used as the category for an X or Y axis and one or more numerical fields.
Example:
| Browser | Market share |
| ------- | ------------ |
| Chrome | 50 |
| IE | 17.5 |
If you have more than one numerical field the panel will show grouped bars.
### Visualizing time series or multiple result sets
If you have multiple time series or tables you first need to join them using a join or reduce transform. For example if you
have multiple time series and you want to compare their last and max value add the **Reduce** transform and specify **Max** and **Last** as options under **Calculations**.
{{< figure src="/static/img/docs/bar-chart-panel/bar-chart-time-series-v8-0.png" max-width="1025px" caption="Bar chart time series example" >}}
## Bar chart options
Use these options to refine your visualization.
### Orientation
- **Auto** - Grafana decides the bar orientation based on what the panel dimensions.
- **Horizontal** - Will make the X axis the category axis.
- **Vertical** - Will make the Y axis the category axis.
### Rotate bar labels
When the graph is in vertical orientation you can use this setting to rotate the labels under the bars. Useful if the labels are long and overlap.
### Bar label max length
Sets the max length of the bar label. Labels longer than the max length will be truncated and `...` will be appended to the end.
### Show values
This controls whether values are shown on top or to the left of bars.
- **Auto** Values will be shown if there is space
- **Always** Always show values.
- **Never** Never show values.
### Group width
Controls the width of groups. 1 = max with, 0 = min width.
### Bar width
Controls the width of bars. 1 = Max width, 0 = Min width.
### Line width
Controls line width of the bars.
### Fill opacity
Controls the fill opacity bars.
### Gradient mode
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option.
Gradient appearance is influenced by the **Fill opacity** setting.
#### None
No gradient fill. This is the default setting.
#### Opacity
Transparency of the gradient is calculated based on the values on the y-axis. Opacity of the fill is increasing with the values on the Y-axis.
#### Hue
Gradient color is generated based on the hue of the line color.
{{< docs/shared "visualizations/tooltip-mode.md" >}}
{{< docs/shared "visualizations/legend-mode.md" >}}
### Legend calculations
Choose which of the [standard calculations]({{< relref "../../calculation-types/" >}}) to show in the legend. You can have more than one.
For more information about the legend, refer to [Configure a legend](../configure-legend/).
## Text size
Enter a **Value** to change the size of the text on your bar chart.
## Axis
Use the following field settings to refine how your axes display.
Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.
### Placement
Select the placement of the Y-axis.
#### Auto
Grafana automatically assigns Y-axis to the series. When there are two or more series with different units, then Grafana assigns the left axis to the first unit and right to the following units.
#### Left
Display all Y-axes on the left side.
#### Right
Display all Y-axes on the right side.
#### Hidden
Hide all axes.
To selectively hide axes, [Add a field override]({{< relref "../../configure-overrides#add-a-field-override" >}}) that targets specific fields.
### Label
Set a Y-axis text label.
If you have more than one Y-axis, then you can give assign different labels with an override.
### Width
Set a fixed width of the axis. By default, Grafana dynamically calculates the width of an axis.
By setting the width of the axis, data whose axes types are different can share the same display proportions. This makes it easier to compare more than one graph’s worth of data because the axes are not shifted or stretched within visual proximity of each other.
### Soft min and soft max
Set a **Soft min** or **soft max** option for better control of Y-axis limits. By default, Grafana sets the range for the Y-axis automatically based on the dataset.
**Soft min** and **soft max** settings can prevent blips from turning into mountains when the data is mostly flat, and hard min or max derived from standard min and max field options can prevent intermittent spikes from flattening useful detail by clipping the spikes past a defined point.
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard options definitions]({{< relref "../../configure-standard-options/#max" >}}).
docs/sources/panels-visualizations/visualizations/bar-gauge/index.md
+80
View File
@@ -0,0 +1,80 @@
---
aliases:
- /docs/grafana/latest/features/panels/bar_gauge/
- /docs/grafana/latest/panels/visualizations/bar-gauge-panel/
- /docs/grafana/latest/visualizations/bar-gauge-panel/
- /docs/grafana/latest/panels-visualizations/visualizations/bar-gauge/
description: Bar gauge panel options
keywords:
- grafana
- bar
- bar gauge
title: Bar gauge
weight: 200
---
# Bar gauge
The bar gauge simplifies your data by reducing every field to a single value. You choose how Grafana calculates the reduction.
This panel can show one or more bar gauges depending on how many series, rows, or columns your query returns.
{{< figure src="/static/img/docs/v66/bar_gauge_cover.png" max-width="1025px" caption="Stat panel" >}}
## Value options
Use the following options to refine how your visualization displays the value:
### Show
Choose how Grafana displays your data.
#### Calculate
Show a calculated value based on all rows.
- **Calculation -** Select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types]({{< relref "../../calculation-types/" >}}).
- **Fields -** Select the fields display in the panel.
#### All values
Show a separate stat for every row. If you select this option, then you can also limit the number of rows to display.
- **Limit -** The maximum number of rows to display. Default is 5,000.
- **Fields -** Select the fields display in the panel.
## Bar gauge options
Adjust how the bar gauge is displayed.
### Orientation
Choose a stacking direction.
- **Auto -** Grafana selects what it thinks is the best orientation.
- **Horizontal -** Bars stretch horizontally, left to right.
- **Vertical -** Bars stretch vertically, bottom to top.
### Display mode
Choose a display mode.
- **Gradient -** Threshold levels define a gradient.
- **Retro LCD -** The gauge is split into small cells that are lit or unlit.
- **Basic -** Single color based on the matching threshold.
### Show unfilled area
Select this if you want to render the unfilled region of the bars as dark gray. Not applicable to Retro LCD display mode.
### Min width
Limit the minimum width of the bar column in the vertical direction.
Automatically show x-axis scrollbar when there is a large amount of data.
### Min height
Limit the minimum height of the bar row in the horizontal direction.
Automatically show y-axis scrollbar when there is a large amount of data.
docs/sources/panels-visualizations/visualizations/candlestick/index.md
+60
View File
@@ -0,0 +1,60 @@
---
aliases:
- /docs/grafana/latest/features/panels/candlestick/
- /docs/grafana/latest/panels/visualizations/candlestick/
- /docs/grafana/latest/visualizations/candlestick/
- /docs/grafana/latest/panels-visualizations/visualizations/candlestick/
description: Candlestick visualization documentation
keywords:
- grafana
- Candlestick
- OHLC
- panel
- documentation
title: Candlestick
weight: 600
---
# Candlestick
The Candlestick panel allows you to visualize data that includes a number of consistent dimensions focused on price movement. The Candlestick panel includes an Open-High-Low-Close (OHLC) mode, as well as support for additional dimensions based on time series data.
{{< figure src="/static/img/docs/candlestick-panel/candlestick-panel-8-3.png" max-width="1200px" caption="Candlestick panel" >}}
The Candlestick panel builds upon the foundation of the [time series]({{< relref "time-series/" >}}) panel and includes many common configuration settings.
## Mode
The mode options allow you to toggle which dimensions are used for the visualization.
- **Candles** limits the panel dimensions to the open, high, low, and close dimensions used by candlestick visualizations.
- **Volume** limits the panel dimension to the volume dimension.
- **Both** is the default behavior for the candlestick panel. It includes both candlestick and volume visualizations.
## Candle style
- **Candles** is the default display style and creates candle-style visualizations between the open and close dimensions.
- **OHLC Bars** displays the four core dimensions open, high, low, and close values.
## Color strategy
- **Since Open** is the default behavior. This mode will utilize the _Up_ color (below) if the intra-period price movement is positive. In other words, if the value on close is greater or equal to the value on open, the _Up_ color is used.
- **Since Prior Close** is an alternative display method based where the color of the candle is based on the inter-period price movement or change in value. In other words, if the value on open is greater than the previous value on close, the _Up_ color is used. If the value on open is lower than the previous value on close, the _Down_ color is used. _This option also triggers the hollow candlestick visualization mode_. Hollow candlesticks indicate that the intra-period movement is positive (value is higher on close than on open), filled candlesticks indicate the intra-period change is negative (value is lower on close than on open). To learn more, see the [explanation of the differences](https://thetradingbible.com/how-to-read-hollow-candlesticks).
## Up & Down Colors
The **Up color** and **Down color** options select which colors are used when the price movement is up or down. Please note that the _Color strategy_ above will determine if intra-period or inter-period price movement is used to select the candle or OHLC bar color.
## Open, High, Low, Close
The candlestick panel will attempt to map fields to the appropriate dimension. The **Open**, **High**, **Low**, and **Close** options allow you to map your data to these dimensions if the panel is unable to do so.
- **Open** corresponds to the starting value of the given period.
- **High** corresponds to the highest value of the given period.
- **Low** corresponds to the lowest value of the given period.
- **Close** corresponds to the final (end) value of the given period.
- **Volume** corresponds to the sample count in the given period. (e.g. number of trades)
## Additional fields
The candlestick panel is based on the time series panel. It can visualization additional data dimensions beyond open, high, low, close, and volume The **Include** and **Ignore** options allow the panel to visualize other included data such as simple moving averages, Bollinger bands and more, using the same styles and configurations available in the [time series]({{< relref "time-series/" >}}) panel.
docs/sources/panels-visualizations/visualizations/canvas.md
+65
View File
@@ -0,0 +1,65 @@
---
aliases:
- /docs/grafana/latest/features/panels/canvas/
- /docs/grafana/latest/visualizations/canvas/
description: Canvas visualization documentation
keywords:
- grafana
- canvas
- panel
- documentation
title: Canvas
weight: 600
---
# Canvas
Canvas is a new panel that combines the power of Grafana with the flexibility of custom elements. Canvas visualizations are extensible form-built panels that allow you to explicitly place elements within static and dynamic layouts. This empowers you to design custom visualizations and overlay data in ways that aren't possible with standard Grafana panels, all within Grafana's UI. If you've used popular UI and web design tools, then designing Canvas panels will feel very familiar.
{{< video-embed src="/static/img/docs/canvas-panel/canvas-beta-overview-9-2-0.mp4" max-width="750px" caption="Canvas panel beta overview" >}}
## Elements
### Metric value
The metric value element allows you to easily select the data you want to display on canvas. This element has a unique “edit” mode that can be triggered either through the context menu “Edit” option or by double clicking. When in edit mode you can select which field data that you want to display.
{{< video-embed src="/static/img/docs/canvas-panel/canvas-metric-value-9-2-0.mp4" max-width="750px" caption="Metric value element demo" >}}
### Text
The text element allows you to easily add text to the canvas. The element also supports an editing mode, triggered via either double clicking or the edit menu option in the context menu.
{{< video-embed src="/static/img/docs/canvas-panel/canvas-text-9-2-0.mp4" max-width="750px" caption="Text element demo" >}}
### Rectangle
The rectangle element allows you to add a basic rectangle to the canvas. Rectangle elements support displaying text (both fixed and field data) as well as can change background color based on data thresholds.
### Icon
The icon element allows you to add a supported icon to the canvas. Icons can have their color set based on thresholds / value mappings.
## Canvas Editing
### Inline editor
Canvas introduces a new editing experience. You can now edit your canvas panel inline while in the context of dashboard mode.
{{< video-embed src="/static/img/docs/canvas-panel/canvas-inline-editor-9-2-0.mp4" max-width="750px" caption="Inline editor demo" >}}
### Context menu
Related to a fresh look at panel editing, the context menu allows you to perform common tasks quickly and efficiently. Supported functionality includes opening / closing the inline editor, duplicating an element, deleting an element, and more.
The context menu is triggered by a right click action over the panel / over a given canvas element
{{< figure src="/static/img/docs/canvas-panel/canvas-context-menu-9-2-0.png" max-width="750px" caption="Canvas context menu" >}}
## Canvas Options
### Inline editing
The inline editing toggle allows you to lock or unlock the canvas panel. When turned off the canvas panel becomes “locked”, freezing elements in place and preventing unintended modifications.
{{< video-embed src="/static/img/docs/canvas-panel/canvas-inline-editing-toggle-9-2-0.mp4" max-width="750px" caption="Inline editing toggle demo" >}}
docs/sources/panels-visualizations/visualizations/configure-legend/index.md
+77
View File
@@ -0,0 +1,77 @@
---
aliases:
- /docs/grafana/latest/panels/working-with-panels/configure-legend/
- /docs/grafana/latest/visualizations/configure-legend/
- /docs/grafana/latest/panels-visualizations/visualizations/configure-legend/
title: Configure a legend
weight: 1300
---
# Configure a legend
A panel includes a legend that you can use to interpret data displayed in a visualization. Each legend option adds context and clarity to the data illustrated in a visualization.
## Isolate series data in a visualization
Visualizations can often be visually complex, and include many data series. You can simplify the view by removing series data from the visualization, which isolates the data you want to see. Grafana automatically creates a new override in the **Override** tab.
When you apply your changes, the visualization changes appear to all users of the panel.
1. Open the panel.
1. In the legend, click the label of the series you want to isolate.
The system removes from view all other series data.
1. To incrementally add series data to an isolated series, press the **Ctrl** or **Command** key and click the label of the series you want to add.
1. To revert back to the default view that includes all data, click any series label twice.
1. To save your changes so that they appear to all viewers of the panel, click **Apply**.
This topic currently applies to the following visualizations:
- [Bar chart]({{< relref "../bar-chart/" >}})
- [Histogram]({{< relref "../histogram/" >}})
- [Pie chart]({{< relref "../pie-chart/" >}})
- [State timeline]({{< relref "../state-timeline/" >}})
- [Status history]({{< relref "../status-history/" >}})
- [Time series]({{< relref "../time-series/" >}})
## Add values to a legend
As way to add more context to a visualization, you can add series data values to a legend. You can add as many values as you'd like; after you apply your changes, you can horizontally scroll the legend to see all values.
1. Edit a panel.
1. In the panel display options pane, locate the **Legend** section.
1. In the **Legend values** field, select the values you want to appear in the legend.
1. Click **Apply** to save your changes are navigate back to the dashboard.
![Toggle series visibility](/static/img/docs/legend/legend-series-toggle-7-5.png)
## Change a series color
By default, Grafana specifies the color of your series data, which you can change.
1. Edit a panel.
1. In the legend, click the color bar associated with the series.
1. Select a pre-set color or a custom color from the color palette.
1. Click **Apply** to save your changes are navigate back to the dashboard.
![Change legend series color](/static/img/docs/legend/legend-series-color-7-5.png)
## Sort series
You can change legend mode to **Table** and choose [calculations]({{< relref "../../calculation-types/" >}}) to be displayed in the legend. Click the calculation name header in the legend table to sort the values in the table in ascending or descending order.
The sort order affects the positions of the bars in the Bar chart panel as well as the order of stacked series in the Time series and Bar chart panels.
> **Note:** This feature is only supported in these panels: Bar chart, Histogram, Time series, XY Chart.
![Sort legend series](/static/img/docs/legend/legend-series-sort-8-3.png).
docs/sources/panels-visualizations/visualizations/dashboard-list/index.md
+44
View File
@@ -0,0 +1,44 @@
---
aliases:
- /docs/grafana/latest/features/panels/dashlist/
- /docs/grafana/latest/panels/visualizations/dashboard-list-panel/
- /docs/grafana/latest/reference/dashlist/
- /docs/grafana/latest/visualizations/dashboard-list-panel/
- /docs/grafana/latest/panels-visualizations/visualizations/dashboard-list/
keywords:
- grafana
- dashboard list
- documentation
- panel
- dashlist
title: Dashboard list
weight: 300
---
# Dashboard list
The dashboard list visualization allows you to display dynamic links to other dashboards. The list can be configured to use starred dashboards, recently viewed dashboards, a search query, and dashboard tags.
{{< figure src="/static/img/docs/v45/dashboard-list-panels.png" max-width="850px">}}
On each dashboard load, this panel queries the dashboard list, always providing the most up-to-date results.
## Options
Use these options to refine your visualization.
- **Starred -** Display starred dashboards in alphabetical order.
- **Recently viewed -** Display recently viewed dashboards in alphabetical order.
- **Search -** Display dashboards by search query or tags. You must enter at least one value in **Query** or **Tags**. For the **Query** and **Tags** fields. Variable interpolation is supported, for example,`$my_var` or `${my_var}`.
- **Show headings -** The chosen list selection (Starred, Recently viewed, Search) is shown as a heading.
- **Max items -** Sets the maximum number of items to list per section. For example, if you left this at the default value of 10 and displayed Starred and Recently viewed dashboards, then the panel would display up to 20 total dashboards, ten in each section.
## Search
These options only apply if the **Search** option is selected.
- **Query -** Enter the query you want to search by. Queries are case-insensitive, and partial values are accepted.
- **Folder -** Select the dashboard folders that you want to display.
- **Tags -** Here is where you enter your tags you want to search by. Note that existing tags will not appear as you type, and they _are_ case sensitive.
> **Note:** When multiple tags and strings appear, the dashboard list displays those matching _all_ conditions.
docs/sources/panels-visualizations/visualizations/gauge/index.md
+56
View File
@@ -0,0 +1,56 @@
---
aliases:
- /docs/grafana/latest/features/panels/gauge/
- /docs/grafana/latest/panels/visualizations/gauge-panel/
- /docs/grafana/latest/visualizations/gauge-panel/
- /docs/grafana/latest/panels-visualizations/visualizations/gauge/
description: Gauge panel docs
keywords:
- grafana
- gauge
- gauge panel
title: Gauge
weight: 400
---
# Gauge
Gauge is a single-value visualization that can repeat a gauge for every series, column or row.
{{< figure src="/static/img/docs/v66/gauge_panel_cover.png" max-width="1025px" >}}
## Value options
Use the following options to refine how your visualization displays the value:
### Show
Choose how Grafana displays your data.
#### Calculate
Show a calculated value based on all rows.
- **Calculation -** Select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types]({{< relref "../../calculation-types/" >}}).
- **Fields -** Select the fields display in the panel.
#### All values
Show a separate stat for every row. If you select this option, then you can also limit the number of rows to display.
- **Limit -** The maximum number of rows to display. Default is 5,000.
- **Fields -** Select the fields display in the panel.
## Gauge
Adjust how the gauge is displayed.
- **Show threshold labels -** Controls if threshold values are shown.
- **Show threshold markers -** Controls if a threshold band is shown outside the inner gauge value band.
## Text size
Adjust the sizes of the gauge text.
- **Title -** Enter a numeric value for the gauge title size.
- **Value -** Enter a numeric value for the gauge value size.
docs/sources/panels-visualizations/visualizations/geomap/index.md
+435
View File
@@ -0,0 +1,435 @@
---
aliases:
- /docs/grafana/latest/features/panels/geomap/
- /docs/grafana/latest/panels/visualizations/geomap/
- /docs/grafana/latest/visualizations/geomap/
- /docs/grafana/latest/features/panels/geomap/arcgis/
- /docs/grafana/latest/panels/visualizations/geomap/arcgis/
- /docs/grafana/latest/features/panels/geomap/carto/
- /docs/grafana/latest/panels/visualizations/geomap/carto/
- /docs/grafana/latest/features/panels/geomap/controls/
- /docs/grafana/latest/panels/visualizations/geomap/controls/
- /docs/grafana/latest/features/panels/geomap/daynight/
- /docs/grafana/latest/panels/visualizations/geomap/daynight/
- /docs/grafana/latest/features/panels/geomap/geojson/
- /docs/grafana/latest/panels/visualizations/geomap/geojson/
- /docs/grafana/latest/features/panels/geomap/heatmap/
- /docs/grafana/latest/panels/visualizations/geomap/heatmap/
- /docs/grafana/latest/features/panels/geomap/markers/
- /docs/grafana/latest/panels/visualizations/geomap/markers/
- /docs/grafana/latest/features/panels/geomap/osm/
- /docs/grafana/latest/panels/visualizations/geomap/osm/
- /docs/grafana/latest/features/panels/geomap/zyx/
- /docs/grafana/latest/panels/visualizations/geomap/zyx/
- /docs/grafana/latest/panels-visualizations/visualizations/geomap/
description: Geomap visualization documentation
keywords:
- grafana
- Geomap
- panel
- documentation
title: Geomap
weight: 600
---
# Geomap
The Geomap panel visualization allows you to view and customize the world map using geospatial data. You can configure various overlay styles and map view settings to easily focus on the important location-based characteristics of the data.
{{< figure src="/static/img/docs/geomap-panel/geomap-example-8-1-0.png" max-width="1200px" caption="Geomap panel" >}}
## Map View
The map view controls the initial view of the map when the dashboard loads.
### Initial View
The initial view configures how the GeoMap panel renders when the panel is first loaded.
- **View** sets the center for the map when the panel first loads.
- **Fit to data** fits the map view based on the data extents of Map layers and updates when data changes.
- **Data** option allows selection of extent based on data from "All layers", a single "Layer", or the "Last value" from a selected layer.
- **Layer** can be selected if fitting data from a single "Layer" or the "Last value" of a layer.
- **Padding** sets padding in relative percent beyond data extent (not available when looking at "Last value" only).
- **Max Zoom** sets the maximum zoom level when fitting data.
- **Coordinates** sets the map view based on:
- **Latitude**
- **Longitude**
- Default Views are also available including:
- **(0°, 0°)**
- **North America**
- **South America**
- **Europe**
- **Africa**
- **West Asia**
- **South Asia**
- **South-East Asia**
- **East Asia**
- **Australia**
- **Oceania**
- **Zoom** sets the initial zoom level.
## Map layers
The Geomap visualization supports showing multiple layers. Each layer determines how you visualize geospatial data on top of the base map.
### Types
There are three map layer types to choose from in the Geomap visualization.
- [Markers]({{< relref "#markers-layer" >}}) renders a marker at each data point.
- [Heatmap]({{< relref "#heatmap-layer" >}}) visualizes a heatmap of the data.
- [GeoJSON]({{< relref "#geojson-layer" >}}) renders static data from a GeoJSON file.
There are also four alpha layer types.
- [Night / Day (alpha)]({{< relref "#night--day-layer-alpha" >}}) renders a night / day region.
- **Icon at last point (alpha)** renders an icon at the last data point.
- **Dynamic GeoJSON (alpha)** styles a GeoJSON file based on query results.
- **Route (alpha)** render data points as a route.
> **Note:** [Basemap layer types]({{< relref "#types-1" >}}) can also be added as layers. You can specify an opacity.
### Layer Controls
The layer controls allow you to create layers, change their name, reorder and delete layers.
- **Add layer** creates an additional, configurable data layer for the Geomap visualization. When you add a layer, you are prompted to select a layer type. You can change the layer type at any point during panel configuration. See the **Layer Types** section above for details on each layer type.
- The layer controls allow you to rename, delete, and reorder the layers of the panel.
- **Edit layer name (pencil icon)** renames the layer.
- **Trash Bin** deletes the layer.
- **Reorder (six dots/grab handle)** allows you to change the layer order. Data on higher layers will appear above data on lower layers. The panel will update the layer order as you drag and drop to help simplify choosing a layer order.
You can add multiple layers of data to a single Geomap panel in order to create rich, detailed visualizations.
### Location
The Geomap panel needs a source of geographical data. This data comes from a database query, and there are four mapping options for your data.
- **Auto** automatically searches for location data. Use this option when your query is based on one of the following names for data fields.
- geohash: “geohash”
- latitude: “latitude”, “lat”
- longitude: “longitude”, “lng”, “lon”
- lookup: “lookup”
- **Coords** specifies that your query holds coordinate data. You will get prompted to select numeric data fields for latitude and longitude from your database query.
- **Geohash** specifies that your query holds geohash data. You will be prompted to select a string data field for the geohash from your database query.
- **Lookup** specifies that your query holds location name data that needs to be mapped to a value. You will be prompted to select the lookup field from your database query and a gazetteer. The gazetteer is the directory that is used to map your queried data to a geographical point.
## Basemap layer
A basemap layer provides the visual foundation for a mapping application. It typically contains data with global coverage. Several base layer options
are available each with specific configuration options to style the base map.
### Types
There are four basemap layer types to choose from in the Geomap visualization.
- [Open Street Map]({{< relref "#open-street-map-layer" >}}) adds a map from a collaborative free geographic world database.
- [CARTO]({{< relref "#carto-layer" >}}) adds a layer from CARTO Raster basemaps.
- [ArcGIS]({{< relref "#arcgis-layer" >}}) adds a layer from an ESRI ArcGIS MapServer.
- [XYZ]({{< relref "#xyz-tile-layer" >}}) adds a map from a generic tile layer.
### Default
The default base layer uses the [CARTO]({{< relref "#carto-layer" >}}) map. You can define custom default base layers in the `.ini` configuration file.
![Basemap layer options](/static/img/docs/geomap-panel/geomap-baselayer-8-1-0.png)
#### Configure the default base layer with provisioning
You can configure the default base map using config files with Grafana’s provisioning system. For more information on all the settings, refer to the [provisioning docs page]({{< relref "../../../administration/provisioning/" >}}).
Use the JSON configuration option `default_baselayer_config` to define the default base map. There are currently four base map options to choose from: `carto`, `esri-xyz`, `osm-standard`, `xyz`. Here are some provisioning examples for each base map option.
- **carto** loads the CartoDB tile server. You can choose from `auto`, `dark`, and `light` theme for the base map and can be set as shown below. The `showLabels` tag determines whether or not Grafana shows the Country details on top of the map. Here is an example:
```ini
geomap_default_baselayer = `{
"type": "carto",
"config": {
"theme": "auto",
"showLabels": true
}
}`
```
- **esri-xyz** loads the ESRI tile server. There are already multiple server instances implemented to show the various map styles: `world-imagery`, `world-physical`, `topo`, `usa-topo`, and `ocean`. The `custom` server option allows you to configure your own ArcGIS map server. Here are some examples:
```ini
geomap_default_baselayer = `{
"type": "esri-xyz",
"config": {
"server": "world-imagery"
}
}`
```
```ini
geomap_default_baselayer = `{
"type": "esri-xyz",
"config": {
"server": "custom",
"url": "[tile server url]",
"attribution": "[tile server attribution]"
}
}`
```
- **osm-standard** loads the OpenStreetMap tile server. There are no additional configurations needed and the `config` fields can be left blank. Here is an example:
```ini
default_baselayer_config = `{
"type": "osm-standard",
"config": {}
}`
```
- **xyz** loads a custom tile server defined by the user. Set a valid tile server `url`, with {z}/{x}/{y} for this option in order to properly load a default base map. Here is an example:
```ini
default_baselayer_config = `{
"type": "xyz",
"config": {
"attribution": "Open street map",
"url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
}
}`
```
`enable_custom_baselayers` allows you to enable or disable custom open source base maps that are already implemented. The default is `true`.
## Markers layer
The markers layer allows you to display data points as different marker shapes such as circles, squares, triangles, stars, and more.
![Markers Layer](/static/img/docs/geomap-panel/geomap-markers-8-1-0.png)
![Markers Layer Options](/static/img/docs/geomap-panel/geomap-markers-options-8-1-0.png)
- **Marker Color** configures the color of the marker. The default `Single color` keeps all points a single color. There is an alternate option to have multiple colors depending on the data point values and the threshold set at the `Thresholds` section.
- **Marker Size** configures the size of the marker. The default is `Fixed size`, which makes all marker sizes the same regardless of the data points. However, there is also an option to scale the circles to the corresponding data points. `Min` and `Max` marker size has to be set such that the Marker layer can scale within this range.
- **Marker Shape** allows you to choose the shape, icon, or graphic to aid in providing additional visual context to your data. Choose from assets that are included with Grafana such as simple shapes or the Unicon library. You can also specify a URL containing an image asset. The image must be a scalable vector graphic (SVG).
- **Fill opacity** configures the transparency of each marker.
## Heatmap layer
The heatmap layer clusters various data points to visualize locations with different densities.
To add a heatmap layer:
Click on the drop-down menu under Data Layer and choose `Heatmap`.
Similar to `Markers`, you are prompted with various options to determine which data points to visualize and how you want to visualize them.
![Heatmap Layer](/static/img/docs/geomap-panel/geomap-heatmap-8-1-0.png)
![Heatmap Layer Options](/static/img/docs/geomap-panel/geomap-heatmap-options-8-1-0.png)
- **Weight values** configure the intensity of the heatmap clusters. `Fixed value` keeps a constant weight value throughout all data points. This value should be in the range of 0~1. Similar to Markers, there is an alternate option in the drop-down to automatically scale the weight values depending on data values.
- **Radius** configures the size of the heatmap clusters.
- **Blur** configures the amount of blur on each cluster.
## GeoJSON layer
The GeoJSON layer allows you to select and load a static GeoJSON file from the filesystem.
- **GeoJSON URL** provides a choice of GeoJSON files that ship with Grafana.
- **Default Style** controls which styles to apply when no rules above match.
- **Color** configures the color of the default style
- **Opacity** configures the default opacity
- **Style Rules** apply styles based on feature properties
- **Rule** allows you to select a _feature_, _condition_, and _value_ from the GeoJSON file in order to define a rule. The trash bin icon can be used to delete the current rule.
- **Color** configures the color of the style for the current rule
- **Opacity** configures the transparency level for the current rule
- **Add style rule** creates additional style rules.
## CARTO layer
A CARTO layer is from CARTO Raster basemaps.
### Options
- **Theme**
- Auto
- Light
{{< figure src="/static/img/docs/geomap-panel/geomap-carto-light-9-1-0.png" max-width="1200px" caption="Geomap panel CARTO light example" >}}
- Dark
{{< figure src="/static/img/docs/geomap-panel/geomap-carto-dark-9-1-0.png" max-width="1200px" caption="Geomap panel CARTO dark example" >}}
- **Show labels** shows the Country details on top of the map.
- **Opacity** from 0 (transparent) to 1 (opaque)
{{< figure src="/static/img/docs/geomap-panel/geomap-carto-options-9-1-0.png" max-width="1200px" caption="Geomap panel CARTO options" >}}
### More Information
- [**About CARTO**](https://carto.com/about-us/)
## XYZ tile layer
The XYZ tile layer is a map from a generic tile layer.
{{< figure src="/static/img/docs/geomap-panel/geomap-xyz-9-1-0.png" max-width="1200px" caption="Geomap panel xyz example" >}}
### Options
- **URL template**
> **Note:** Set a valid tile server url, with {z}/{x}/{y} for example: https://tile.openstreetmap.org/{z}/{x}/{y}.png
- **Attribution** sets the reference string for the layer if displayed in [map controls]({{< relref "#show-attribution" >}})
- **Opacity** from 0 (transparent) to 1 (opaque)
{{< figure src="/static/img/docs/geomap-panel/geomap-xyz-options-9-1-0.png" max-width="1200px" caption="Geomap panel xyz options" >}}
### More information
- [**Tiled Web Map Wikipedia**](https://en.wikipedia.org/wiki/Tiled_web_map)
- [**List of Open Street Map Tile Servers**](https://wiki.openstreetmap.org/wiki/Tile_servers)
## Open Street Map layer
A map from a collaborative free geographic world database.
{{< figure src="/static/img/docs/geomap-panel/geomap-osm-9-1-0.png" max-width="1200px" caption="Geomap panel Open Street Map" >}}
### Options
- **Opacity** from 0 (transparent) to 1 (opaque)
{{< figure src="/static/img/docs/geomap-panel/geomap-osm-options-9-1-0.png" max-width="1200px" caption="Geomap panel Open Street Map options" >}}
### More Information
- [**About Open Street Map**](https://www.openstreetmap.org/about)\
## ArcGIS layer
An ArcGIS layer is a layer from an ESRI ArcGIS MapServer.
### Options
- **Server Instance** to select the map type.
- World Street Map
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-wsm-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS World Street Map" >}}
- World Imagery
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-wi-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS World Imagery" >}}
- World Physical
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-wp-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS World Physical" >}}
- Topographic
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-topographic-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS Topographic" >}}
- USA Topographic
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-usa-topographic-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS USA Topographic" >}}
- World Ocean
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-ocean-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS World Ocean" >}}
- Custom MapServer (see [XYZ]({{< relref "#xyz-tile-layer" >}}) for formatting)
- URL template
- Attribution
- **Opacity** from 0 (transparent) to 1 (opaque)
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-options-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS options" >}}
### More Information
- [**ArcGIS Services**](https://services.arcgisonline.com/arcgis/rest/services)
- [**About ESRI**](https://www.esri.com/en-us/about/about-esri/overview)
## Night / Day layer (Alpha)
The Night / Day layer displays night and day regions based on the current time range.
{{< figure src="/static/img/docs/geomap-panel/geomap-day-night-9-1-0.png" max-width="1200px" caption="Geomap panel Night / Day" >}}
### Options
- **Show** toggles time source from panel time range
- **Night region color** picks color for night region
- **Display sun** toggles sun icon
- **Opacity** from 0 (transparent) to 1 (opaque)
{{< figure src="/static/img/docs/geomap-panel/geomap-day-night-options-9-1-0.png" max-width="1200px" caption="Geomap panel Night / Day options" >}}
### More information
- [**Extensions for OpenLayers - DayNight**](https://viglino.github.io/ol-ext/examples/layer/map.daynight.html)
## Map Controls
The map controls section contains various options for map information and tool overlays.
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-9-1-0.png" max-width="1200px" caption="Geomap panel map controls" >}}
### Zoom
This section describes each of the zoom controls.
#### Show zoom control
Displays zoom controls in the upper left corner. This control can be useful when using systems that don't have a mouse.
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-zoom-9-1-0.png" max-width="1200px" caption="Geomap panel zoom" >}}
#### Mouse wheel zoom
Enables the mouse wheel to be used for zooming in or out.
### Show attribution
Displays attribution for basemap layers.
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-attribution-9-1-0.png" max-width="1200px" caption="Geomap panel attribution" >}}
### Show scale
Displays scale information in the bottom left corner.
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-scale-9-1-0.png" max-width="1200px" caption="Geomap panel scale" >}}
> **Note:** Currently only displays units in [m]/[km].
### Show measure tools
Displays measure tools in the upper right corner. Measurements appear only when this control is open.
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-measure-9-1-0.png" max-width="1200px" caption="Geomap panel measure" >}}
- **Click** to start measuring
- **Continue clicking** to continue measurement
- **Double-click** to end measurement
> **Note:** <br /> - When you change measurement type or units, the previous measurement is removed from the map. <br /> - If the control is closed and then re-opened, the most recent measurement is displayed. <br /> - A measurement can be modified by clicking and dragging on it.
#### Length
Get the spherical length of a geometry. This length is the sum of the great circle distances between coordinates. For multi-part geometries, the length is the sum of the length of each part. Geometries are assumed to be in 'EPSG:3857'.
- **Metric (m/km)**
- **Feet (ft)**
- **Miles (mi)**
- **Nautical miles (nmi)**
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-measure-length-9-1-0.png" max-width="1200px" caption="Geomap panel measure length" >}}
#### Area
Get the spherical area of a geometry. This area is calculated assuming that polygon edges are segments of great circles on a sphere. Geometries are assumed to be in 'EPSG:3857'.
- **Square Meters (m²)**
- **Square Kilometers (km²)**
- **Square Feet (ft²)**
- **Square Miles (mi²)**
- **Acres (acre)**
- **Hectare (ha)**
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-measure-area-9-1-0.png" max-width="1200px" caption="Geomap panel measure area" >}}
### Show debug
Displays debug information in the upper right corner. This can be useful for debugging or validating a data source.
- **Zoom** displays current zoom level of the map.
- **Center** displays the current **longitude**, **latitude** of the map center.
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-debug-9-1-0.png" max-width="1200px" caption="Geomap panel debug" >}}
### Tooltip
- **None** displays tooltips only when a data point is clicked.
- **Details** displays tooltips when a mouse pointer hovers over a data point.
docs/sources/panels-visualizations/visualizations/heatmap/index.md
+109
View File
@@ -0,0 +1,109 @@
---
aliases:
- /docs/grafana/latest/features/panels/heatmap/
- /docs/grafana/latest/visualizations/heatmap/
- /docs/grafana/latest/panels-visualizations/visualizations/heatmap/
description: Heatmap visualization documentation
keywords:
- grafana
- heatmap
- panel
- documentation
title: Heatmap
weight: 600
---
# Heatmap
The Heatmap panel visualization allows you to view histograms over time. For more information about histograms, refer to [Introduction to histograms and heatmaps]({{< relref "../../../basics/intro-histograms/" >}}).
![](/static/img/docs/v43/heatmap_panel_cover.jpg)
## Calculate from data
This setting determines if the data is already a calculated heatmap (from the data source/transformer), or one that should be
calculated in the panel.
### X Bucket
This setting determines how the X-axis is split into buckets. You can specify a time interval in the **Size** input. For example, a time range of `1h` makes the cells 1-hour wide on the X-axis.
### Y Bucket
This setting determines how the Y-axis is split into buckets.
### Y Bucket scale
Select one of the following Y-axis value scales:
- **linear -** Linear scale.
- **log (base 2) -** Logarithmic scale with base 2.
- **log (base 10) -** Logarithmic scale with base 10.
## Y Axes
Defines how the Y axis is displayed
### Placement
- **Left** On the left
- **Right** On the right
- **Hidden** Hidden
### Unit
Unit configuration
### Decimals
This setting determines decimal configuration.
### Min/Max value
This setting configures the axis range.
### Reverse
When selected, the axis appears in reverse order.
## Colors
The color spectrum controls the mapping between value count (in each bucket) and the color assigned to each bucket. The leftmost color on the spectrum represents the minimum count and the color on the right most side represents the maximum count. Some color schemes are automatically inverted when using the light theme.
You can also change the color mode to Opacity. In this case, the color will not change but the amount of opacity will change with the bucket count
- **Mode**
- **Scheme -** Bucket value represented by cell color.
- **Scheme -** If the mode is **scheme**, then select a color scheme.
- **opacity -** Bucket value represented by cell opacity. Opaque cell means maximum value.
- **Color -** Cell base color.
- **Scale -** Scale for mapping bucket values to the opacity.
- **linear -** Linear scale. Bucket value maps linearly to the opacity.
- **sqrt -** Power scale. Cell opacity calculated as `value ^ k`, where `k` is a configured **Exponent** value. If exponent is less than `1`, you will get a logarithmic scale. If exponent is greater than `1`, you will get an exponential scale. In case of `1`, scale will be the same as linear.
- **Exponent -** value of the exponent, greater than `0`.
### Start/end color from value
By default, Grafana calculates cell colors based on minimum and maximum bucket values. With Min and Max you can overwrite those values. Consider a bucket value as a Z-axis and Min and Max as Z-Min and Z-Max, respectively.
- **Start -** Minimum value using for cell color calculation. If the bucket value is less than Min, then it is mapped to the "minimum" color. The series min value is the default value.
- **End -** Maximum value using for cell color calculation. If the bucket value is greater than Max, then it is mapped to the "maximum" color. The series max value is the default value.
## Cell display
Use these settings to refine your visualization.
## Additional display options
### Tooltip
- **Show tooltip -** Show heatmap tooltip.
- **Show Histogram -** Show a Y-axis histogram on the tooltip. A histogram represents the distribution of the bucket values for a specific timestamp.
### Legend
Choose whether you want to display the heatmap legend on the visualization.
### Exemplars
Set the color used to show exemplar data.
docs/sources/panels-visualizations/visualizations/histogram/index.md
+76
View File
@@ -0,0 +1,76 @@
---
aliases:
- /docs/grafana/latest/features/panels/histogram/
- /docs/grafana/latest/panels/visualizations/histogram/
- /docs/grafana/latest/visualizations/histogram/
- /docs/grafana/latest/panels-visualizations/visualizations/histogram/
description: Histogram visualization
keywords:
- grafana
- docs
- bar chart
- panel
- barchart
title: Histogram
weight: 605
---
# Histogram
The histogram visualization calculates the distribution of values and presents them as a bar chart. The Y-axis and the height of each bar represent the count of values that fall into each bracket while the X-axis represents the value range.
{{< figure src="/static/img/docs/histogram-panel/histogram-example-v8-0.png" max-width="625px" caption="Bar chart example" >}}
## Supported data formats
Histogram visualization supports time series and any table results with one or more numerical fields.
## Display options
Use the following options to refine your visualization.
### Bucket size
The size of the buckets. Leave this empty for automatic bucket sizing (~10% of the full range).
### Bucket offset
If the first bucket should not start at zero. A non-zero offset has the effect of shifting the aggregation window. For example, 5-sized buckets that are 0-5, 5-10, 10-15 with a default 0 offset would become 2-7, 7-12, 12-17 with an offset of 2; offsets of 0, 5, or 10, in this case, would effectively do nothing. Typically, this option would be used with an explicitly defined bucket size rather than automatic. For this setting to affect, the offset amount should be greater than 0 and less than the bucket size; values outside this range will have the same effect as values within this range.
### Combine series
This will merge all series and fields into a combined histogram.
### Line width
Controls line width of the bars.
### Fill opacity
Controls the fill opacity bars.
### Gradient mode
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}) field option.
Gradient display is influenced by the **Fill opacity** setting.
#### None
No gradient fill. This is the default setting.
#### Opacity
Transparency of the gradient is calculated based on the values on the Y-axis. The opacity of the fill is increasing with the values on the Y-axis.
#### Hue
Gradient color is generated based on the hue of the line color.
{{< docs/shared "visualizations/tooltip-mode.md" >}}
{{< docs/shared "visualizations/legend-mode.md" >}}
### Legend calculations
Choose a [standard calculations]({{< relref "../../calculation-types/" >}}) to show in the legend. You can select more than one.
docs/sources/panels-visualizations/visualizations/logs/index.md
+50
View File
@@ -0,0 +1,50 @@
---
aliases:
- /docs/grafana/latest/features/panels/logs/
- /docs/grafana/latest/panels/visualizations/logs-panel/
- /docs/grafana/latest/reference/logs/
- /docs/grafana/latest/visualizations/logs-panel/
- /docs/grafana/latest/panels-visualizations/visualizations/logs/
keywords:
- grafana
- dashboard
- documentation
- panels
- logs panel
title: Logs panel
weight: 700
---
# Logs panel
The logs panel visualization shows log lines from data sources that support logs, such as Elastic, Influx, and Loki. Typically you would use this panel next to a graph panel to display the log output of a related process.
<img class="screenshot" src="/static/img/docs/v64/logs-panel.png">
The logs panel shows the result of queries that were entered in the Query tab. The results of multiple queries are merged and sorted by time. You can scroll inside the panel if the data source returns more lines than can be displayed at any one time.
To limit the number of lines rendered, you can use the **Max data points** setting in the **Query options**. If it is not set, then the data source will usually enforce a default limit.
## Log level
For logs where a **level** label is specified, we use the value of the label to determine the log level and update color accordingly. If the log doesn't have a level label specified, we try to find out if its content matches any of the supported expressions (see below for more information). The log level is always determined by the first match. In case Grafana is not able to determine a log level, it will be visualized with **unknown** log level. See [supported log levels and mappings of log level abbreviation and expressions]({{< relref "../../../explore/#log-level" >}}).
## Log details
Each log row has an extendable area with its labels and detected fields, for more robust interaction. Each field or label has a stats icon to display ad-hoc statistics in relation to all displayed logs.
### Derived fields links
By using Derived fields, you can turn any part of a log message into an internal or external link. The created link is visible as a button next to the Detected field in the Log details view.
### Display options
Use these settings to refine your visualization:
- **Time -** Show or hide the time column. This is the timestamp associated with the log line as reported from the data source.
- **Unique labels -** Show or hide the unique labels column, which shows only non-common labels.
- **Common labels -** Show or hide the common labels.
- **Wrap lines -** Toggle line wrapping.
- **Prettify JSON -** Set this to `true` to pretty print all JSON logs. This setting does not affect logs in any format other than JSON.
- **Enable log details -** Toggle option to see the log details view for each log row. The default setting is true.
- **Order -** Display results in descending or ascending time order. The default is **Descending**, showing the newest logs first. Set to **Ascending** to show the oldest log lines first.
docs/sources/panels-visualizations/visualizations/news/index.md
+24
View File
@@ -0,0 +1,24 @@
---
aliases:
- /docs/grafana/latest/panels/visualizations/news-graph/
- /docs/grafana/latest/visualizations/news-panel/
- /docs/grafana/latest/panels-visualizations/visualizations/news/
keywords:
- grafana
- news
- documentation
- panels
- news panel
title: News
weight: 800
---
## News
This panel visualization displays an RSS feed. By default, it displays articles from the Grafana Labs blog.
Enter the URL of an RSS in the URL field in the Display section. This panel type does not accept any other queries.
In version 8.5, we discontinued the "Use Proxy" option for Grafana news panels. As a result, RSS feeds that are not configured for request by Grafana's frontend (with the appropriate [CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)) may not load.
If the RSS feed you're trying to display fails to load, consider rehosting the RSS feed or prefixing the RSS URL with your own "CORS proxy". Alternatively, you can use the community [RSS/Atom data source](https://grafana.com/grafana/plugins/volkovlabs-rss-datasource/) in combination with the [Dynamic text](https://grafana.com/grafana/plugins/marcusolsson-dynamictext-panel/) community panel to display the RSS feed.
docs/sources/panels-visualizations/visualizations/node-graph/index.md
+125
View File
@@ -0,0 +1,125 @@
---
aliases:
- /docs/grafana/latest/panels/visualizations/node-graph/
- /docs/grafana/latest/visualizations/node-graph/
- /docs/grafana/latest/panels-visualizations/visualizations/node-graph/
keywords:
- grafana
- dashboard
- documentation
- panels
- node graph
- directed graph
title: Node graph
weight: 850
---
# Node graph panel
> **Note:** This panel is currently in beta. Expect changes in future releases.
The _Node graph_ can visualize directed graphs or networks. It uses a directed force layout to effectively position the nodes, so it can display complex infrastructure maps, hierarchies, or execution diagrams.
![Node graph panel](/static/img/docs/node-graph/node-graph-8-0.png 'Node graph')
## Data requirements
The Node graph panel requires specific shape of the data to be able to display its nodes and edges. This means not every data source or query can be visualized in this panel. If you want to use this as a data source developer see the section about data API.
The Node graph visualization consists of _nodes_ and _edges_.
- A _node_ is displayed as a circle. A node might represent an application, a service, or anything else that is relevant from an application perspective.
- An _edge_ is displayed as a line that connects two nodes. The connection might be a request, an execution, or some other relationship between the two nodes.
Both nodes and edges can have associated metadata or statistics. The data source defines what information and values is shown, so different data sources can show different type of values or not show some values.
### Nodes
> **Note:** Node graph can show only 1,500 nodes. If this limit is crossed a warning will be visible in upper right corner, and some nodes will be hidden. You can expand hidden parts of the graph by clicking on the "Hidden nodes" markers in the graph.
Usually, nodes show two statistical values inside the node and two identifiers just below the node, usually name and type. Nodes can also show another set of values as a color circle around the node, with sections of different color represents different values that should add up to 1.
For example, you can have the percentage of errors represented by a red portion of the circle. Additional details can be displayed in a context menu which is displayed when you click on the node. There also can be additional links in the context menu that can target either other parts of Grafana or any external link.
![Node graph navigation](/static/img/docs/node-graph/node-graph-navigation-7-4.gif 'Node graph navigation')
### Edges
Edges can also show statistics when you hover over the edge. Similar to nodes, you can open a context menu with additional details and links by clicking on the edge.
The first data source supporting this visualization is X-Ray data source for its Service map feature. For more information, refer to the [X-Ray plugin documentation](https://grafana.com/grafana/plugins/grafana-x-ray-datasource).
## Navigating the node graph
You can pan and zoom in or out the node graph.
### Pan
You can pan the view by clicking outside any node or edge and dragging your mouse.
### Zoom in or out
Use the buttons in the upper left corner or use the mouse wheel, touchpad scroll, together with either Ctrl or Cmd key to zoom in or out.
### Explore hidden nodes
The number of nodes shown at a given time is limited to maintain a reasonable visualization performance. Nodes that are not currently visible are hidden behind clickable markers that show an approximate number of hidden nodes that are connected by a particular edge. You can click on the marker to expand the graph around that node.
![Node graph exploration](/static/img/docs/node-graph/node-graph-exploration-8-0.png 'Node graph exploration')
### Grid view
You can switch to the grid view to have a better overview of the most interesting nodes in the graph. Grid view shows nodes in a grid without edges and can be sorted by stats shown inside the node or by stats represented by the a colored border of the nodes.
![Node graph grid](/static/img/docs/node-graph/node-graph-grid-8-0.png 'Node graph grid')
To sort the nodes, click on the stats inside the legend. The marker next to the stat name shows which stat is currently used for sorting and sorting direction.
![Node graph legend](/static/img/docs/node-graph/node-graph-legend-8-0.png 'Node graph legend')
Click on the node and select "Show in Graph layout" option to switch back to graph layout and focus on the selected node, to show it in context of the full graph.
![Node graph grid to default](/static/img/docs/node-graph/node-graph-grid-to-default-8-0.png 'Node graph grid to default')
## Data API
This visualization needs a specific shape of the data to be returned from the data source in order to correctly display it.
Data source needs to return two data frames, one for nodes and one for edges. You have to set `frame.meta.preferredVisualisationType = 'nodeGraph'` on both data frames or name them `nodes` and `edges` respectively for the node graph to render.
### Node parameters
Required fields:
| Field name | Type | Description |
| ---------- | ------ | -------------------------------------------------------------------------------------------- |
| id | string | Unique identifier of the node. This ID is referenced by edge in its source and target field. |
Optional fields:
| Field name | Type | Description |
| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title | string | Name of the node visible in just under the node. |
| subtitle | string | Additional, name, type or other identifier shown under the title. |
| mainstat | string/number | First stat shown inside the node itself. It can either be a string showing the value as is or a number. If it is a number, any unit associated with that field is also shown. |
| secondarystat | string/number | Same as mainStat, but shown under it inside the node. |
| arc\_\_\* | number | Any field prefixed with `arc__` will be used to create the color circle around the node. All values in these fields should add up to 1. You can specify color using `config.color.fixedColor`. |
| detail\_\_\* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the node. Use `config.displayName` for more human readable label. |
### Edge parameters
Required fields:
| Field name | Type | Description |
| ---------- | ------ | ------------------------------ |
| id | string | Unique identifier of the edge. |
| source | string | Id of the source node. |
| target | string | Id of the target. |
Optional fields:
| Field name | Type | Description |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| mainstat | string/number | First stat shown in the overlay when hovering over the edge. It can be a string showing the value as is or it can be a number. If it is a number, any unit associated with that field is also shown |
| secondarystat | string/number | Same as mainStat, but shown right under it. |
| detail\_\_\* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the edge. Use `config.displayName` for more human readable label. |
docs/sources/panels-visualizations/visualizations/pie-chart/index.md
+87
View File
@@ -0,0 +1,87 @@
---
aliases:
- /docs/grafana/latest/panels/visualizations/pie-chart-pane/
- /docs/grafana/latest/visualizations/pie-chart-panel/
- /docs/grafana/latest/panels-visualizations/visualizations/pie-chart/
keywords:
- grafana
- pie chart
title: Pie chart
weight: 850
---
# Pie chart
{{< figure src="/static/img/docs/pie-chart-panel/pie-chart-example.png" max-width="1200px" lightbox="true" caption="Pie chart visualization" >}}
The pie chart displays reduced series, or values in a series, from one or more queries, as they relate to each other, in the form of slices of a pie. The arc length, area and central angle of a slice are all proportional to the slices value, as it relates to the sum of all values. This type of chart is best used when you want a quick comparison of a small set of values in an aesthetically pleasing form.
## Value options
Use the following options to refine the value in your visualization.
### Show
Choose how much information to show.
- **Calculate -** Reduces each value to a single value per series.
- **All values -** Displays every value from a single series.
### Calculation
Select a calculation to reduce each series when Calculate has been selected. For information about available calculations, refer to [Calculation types]({{< relref "../../calculation-types/" >}}).
### Limit
When displaying every value from a single series, this limits the number of values displayed.
### Fields
Select which field or fields to display in the visualization. Each field name is available on the list, or you can select one of the following options:
- **Numeric fields -** All fields with numerical values.
- **All fields -** All fields that are not removed by transformations.
- **Time -** All fields with time values.
## Pie chart options
Use these options to refine how your visualization looks.
### Pie chart type
Select the pie chart display style.
### Pie
![Pie type chart](/static/img/docs/pie-chart-panel/pie-type-chart-7-5.png)
### Donut
![Donut type chart](/static/img/docs/pie-chart-panel/donut-type-chart-7-5.png)
### Labels
Select labels to display on the pie chart. You can select more than one.
- **Name -** The series or field name.
- **Percent -** The percentage of the whole.
- **Value -** The raw numerical value.
Labels are displayed in white over the body of the chart. You might need to select darker chart colors to make them more visible. Long names or numbers might be clipped.
The following example shows a pie chart with **Name** and **Percent** labels displayed.
![Pie chart labels](/static/img/docs/pie-chart-panel/pie-chart-labels-7-5.png)
{{< docs/shared "visualizations/tooltip-mode.md" >}}
{{< docs/shared "visualizations/legend-mode.md" >}}
### Legend values
Select values to display in the legend. You can select more than one.
- **Percent:** The percentage of the whole.
- **Value:** The raw numerical value.
For more information about the legend, refer to [Configure a legend](../configure-legend/).
docs/sources/panels-visualizations/visualizations/stat/index.md
+111
View File
@@ -0,0 +1,111 @@
---
aliases:
- /docs/grafana/latest/features/panels/singlestat/
- /docs/grafana/latest/features/panels/stat/
- /docs/grafana/latest/panels/visualizations/stat-panel/
- /docs/grafana/latest/reference/singlestat/
- /docs/grafana/latest/visualizations/stat-panel/
- /docs/grafana/latest/panels-visualizations/visualizations/stat/
description: Stat panel documentation
keywords:
- grafana
- docs
- stat panel
title: Stat
weight: 900
---
# Stat
The Stat panel visualization shows a one large stat value with an optional graph sparkline. You can control the background or value color using thresholds.
{{< figure src="/static/img/docs/v66/stat_panel_dark3.png" max-width="1025px" caption="Stat panel" >}}
> **Note:** This panel replaces the Singlestat panel, which was deprecated in Grafana 7.0 and removed in Grafana 8.0.
By default, the Stat panel displays one of the following:
- Just the value for a single series or field.
- Both the value and name for multiple series or fields.
You can use the **Text mode** to control whether the text is displayed or not.
Example screenshot:
{{< figure src="/static/img/docs/v71/stat-panel-text-modes.png" max-width="1025px" caption="Stat panel" >}}
## Automatic layout adjustment
The panel automatically adjusts the layout depending on available width and height in the dashboard. It automatically hides the graph (sparkline) if the panel becomes too small.
## Value options
Use the following options to refine how your visualization displays the value:
### Show
Choose how Grafana displays your data.
#### Calculate
Show a calculated value based on all rows.
- **Calculation -** Select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types]({{< relref "../../calculation-types/" >}}).
- **Fields -** Select the fields display in the panel.
#### All values
Show a separate stat for every row. If you select this option, then you can also limit the number of rows to display.
- **Limit -** The maximum number of rows to display. Default is 5,000.
- **Fields -** Select the fields display in the panel.
## Stat styles
Style your visualization.
### Orientation
Choose a stacking direction.
- **Auto -** Grafana selects what it thinks is the best orientation.
- **Horizontal -** Bars stretch horizontally, left to right.
- **Vertical -** Bars stretch vertically, top to bottom.
### Text mode
You can use the Text mode option to control what text the panel renders. If the value is not important, only the name and color is, then change the **Text mode** to **Name**. The value will still be used to determine color and is displayed in a tooltip.
- **Auto -** If the data contains multiple series or fields, show both name and value.
- **Value -** Show only value, never name. Name is displayed in the hover tooltip instead.
- **Value and name -** Always show value and name.
- **Name -** Show name instead of value. Value is displayed in the hover tooltip.
- **None -** Show nothing (empty). Name and value are displayed in the hover tooltip.
### Color mode
Select a color mode.
- **Value -** Colors only the value and graph area.
- **Background -** Colors the background as well.
### Graph mode
Select a graph and splarkline mode.
- **None -** Hides the graph and only shows the value.
- **Area -** Shows the area graph below the value. This requires that your query returns a time column.
### Text alignment
Choose an alignment mode.
- **Auto -** If only a single value is shown (no repeat), then the value is centered. If multiple series or rows are shown, then the value is left-aligned.
- **Center -** Stat value is centered.
## Text size
Adjust the sizes of the gauge text.
- **Title -** Enter a numeric value for the gauge title size.
- **Value -** Enter a numeric value for the gauge value size.
docs/sources/panels-visualizations/visualizations/state-timeline/index.md
+66
View File
@@ -0,0 +1,66 @@
---
aliases:
- /docs/grafana/latest/panels/visualizations/state-timeline/
- /docs/grafana/latest/visualizations/state-timeline/
- /docs/grafana/latest/panels-visualizations/visualizations/state-timeline/
description: State timeline visualization
keywords:
- grafana
- docs
- state timeline
- panel
title: State timeline
weight: 900
---
# State timeline
The state timeline panel visualization shows discrete state changes over time. Each field or series is rendered as its unique horizontal band. State regions can either be rendered with or without values. This panel works well with string or boolean states but can also be used with time series. When used with time series, the thresholds are used to turn the numerical values into discrete state regions.
{{< figure src="/static/img/docs/v8/state_timeline_strings.png" max-width="1025px" caption="state timeline with string states" >}}
## State timeline options
Use these options to refine the visualization.
### Merge equal consecutive values
Controls whether Grafana merges identical values if they are next to each other.
### Show values
Controls whether values are rendered inside the state regions. Auto will render values if there is sufficient space.
### Align values
Controls value alignment inside state regions.
### Row height
Controls how much space between rows there are. 1 = no space = 0.5 = 50% space.
### Line width
Controls line width of state regions.
### Fill opacity
Controls the opacity of state regions.
## Value mappings
To assign colors to boolean or string values, you can use [Value mappings]({{< relref "../../configure-value-mappings/" >}}).
{{< figure src="/static/img/docs/v8/value_mappings_side_editor.png" max-width="300px" caption="Value mappings side editor" >}}
## Time series data with thresholds
The panel can be used with time series data as well. In this case, the thresholds are used to turn the time series into discrete colored state regions.
{{< figure src="/static/img/docs/v8/state_timeline_time_series.png" max-width="1025px" caption="state timeline with time series" >}}
## Legend options
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
{{< docs/shared "visualizations/legend-mode.md" >}}
docs/sources/panels-visualizations/visualizations/status-history/index.md
+63
View File
@@ -0,0 +1,63 @@
---
aliases:
- /docs/grafana/latest/panels/visualizations/status-history/
- /docs/grafana/latest/visualizations/status-history/
- /docs/grafana/latest/panels-visualizations/visualizations/status-history/
description: Status history visualization
keywords:
- grafana
- docs
- status history
- panel
title: Status history
weight: 900
---
# Status history
The Status history visualization shows periodic states over time. Each field or series is rendered as a horizontal row. Boxes are rendered and centered around each value.
{{< figure src="/static/img/docs/status-history-panel/status-history-example-v8-0.png" max-width="1025px" caption="Status history example" >}}
## Supported data
Status history visualization works with string, boolean and numerical fields or time series. A time field is required. You can use value mappings to color strings or assign text values to numerical ranges.
## Display options
Use these options to refine the visualization.
### Show values
Controls whether values are rendered inside the value boxes. Auto will render values if there is sufficient space.
### Column width
Controls the width of boxes. 1 = maximum space and 0 = minimum space.
### Line width
Controls line width of state regions.
### Fill opacity
Controls the opacity of state regions.
## Value mappings
To assign colors to boolean or string values, use the [Value mappings](< {{ refref "../value-mappings.md"}} >).
{{< figure src="/static/img/docs/v8/value_mappings_side_editor.png" max-width="300px" caption="Value mappings side editor" >}}
## Time series data with thresholds
The panel can be used with time series data as well. In this case, the thresholds are used to color the boxes. You can also
use gradient color schemes to color values.
{{< figure src="/static/img/docs/v8/state_timeline_time_series.png" max-width="1025px" caption="state timeline with time series" >}}
## Legend options
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
{{< docs/shared "visualizations/legend-mode.md" >}}
docs/sources/panels-visualizations/visualizations/table/index.md
+162
View File
@@ -0,0 +1,162 @@
---
aliases:
- /docs/grafana/latest/features/panels/table_panel/
- /docs/grafana/latest/reference/table/
- /docs/grafana/latest/visualizations/table/
- /docs/grafana/next/panels/visualizations/table/table-field-options/
- /docs/grafana/latest/features/panels/table_panel/
- /docs/grafana/latest/panels/visualizations/table/filter-table-columns/
- /docs/grafana/latest/reference/table/
- /docs/grafana/latest/visualizations/table/filter-table-columns/
- /docs/grafana/latest/visualizations/table/
- /docs/grafana/latest/panels-visualizations/visualizations/table/
keywords:
- grafana
- dashboard
- panels
- table panel
- table options
- format tables
- table filter
- filter columns
title: Table
menuTitle: Table
description: Learn about table panel visualization features.
weight: 1000
---
# Table
The table panel visualization is very flexible, supporting multiple modes for time series and for tables, annotation, and raw JSON data. This panel also provides date formatting, value formatting, and coloring options.
{{< figure src="/static/img/docs/tables/table_visualization.png" max-width="1200px" lightbox="true" caption="Table visualization" >}}
## Annotation support
Annotations are not currently supported in the new table panel. This might be added back in a future release.
## Sort column
Click a column title to change the sort order from default to descending to ascending. Each time you click, the sort order changes to the next option in the cycle. You can only sort by one column at a time.
![Sort descending](/static/img/docs/tables/sort-descending.png 'Sort descending')
## Table options
> **Note:** If you are using a table visualization created before Grafana 7.0, then you need to migrate to the new table version in order to see these options. To migrate, on the Panel tab, click **Table** visualization. Grafana updates the table version and you can then access all table options.
### Show header
Show or hide column names imported from your data source.
## Column width
By default, Grafana automatically calculates the column width based on the table size and the minimum column width. This field option can override the setting and define the width for all columns in pixels.
For example, if you enter `100` in the field, then when you click outside the field, all the columns will be set to 100 pixels wide.
## Minimum column width
By default, the minimum width of the table column is 150 pixels. This field option can override that default and will define the new minimum column width for the table panel in pixels.
For example, if you enter `75` in the field, then when you click outside the field, all the columns will scale to no smaller than 75 pixels wide.
For small-screen devices, such as smartphones or tablets, reduce the default `150` pixel value to`50` to allow table based panels to render correctly in dashboards.
## Column alignment
Choose how Grafana should align cell contents:
- Auto (default)
- Left
- Center
- Right
## Cell display mode
By default, Grafana automatically chooses display settings. You can override the settings by choosing one of the following options to change all fields.
> **Note:** If you set these in the Field tab, then the display modes will apply to all fields, including the time field. Many options will work best if you set them in the Override tab.
### Color text
If thresholds are set, then the field text is displayed in the appropriate threshold color.
{{< figure src="/static/img/docs/tables/color-text.png" max-width="500px" caption="Color text" class="docs-image--no-shadow" >}}
### Color background (gradient or solid)
If thresholds are set, then the field background is displayed in the appropriate threshold color.
{{< figure src="/static/img/docs/tables/color-background.png" max-width="500px" caption="Color background" class="docs-image--no-shadow" >}}
### Gradient gauge
The threshold levels define a gradient.
{{< figure src="/static/img/docs/tables/gradient-gauge.png" max-width="500px" caption="Gradient gauge" class="docs-image--no-shadow" >}}
### LCD gauge
The gauge is split up in small cells that are lit or unlit.
{{< figure src="/static/img/docs/tables/lcd-gauge.png" max-width="500px" caption="LCD gauge" class="docs-image--no-shadow" >}}
### JSON view
Shows value formatted as code. If a value is an object the JSON view allowing browsing the JSON object will appear on hover.
{{< figure src="/static/img/docs/tables/json-view.png" max-width="500px" caption="JSON view" class="docs-image--no-shadow" >}}
### Image
> Only available in Grafana 7.3+
If you have a field value that is an image URL or a base64 encoded image you can configure the table to display it as an image.
{{< figure src="/static/img/docs/v73/table_hover.gif" max-width="900px" caption="Table hover" >}}
## Cell value inspect
Enables value inspection from table cell. The raw value is presented in a modal window.
> **Note:** Cell value inspection is only available when cell display mode is set to Auto, Color text, Color background or JSON View.
## Column filter
You can temporarily change how column data is displayed. For example, you can order values from highest to lowest or hide specific values. For more information, refer to [Filter table columns]({{< relref "#filter-table-columns" >}}).
## Pagination
Use this option to enable or disable pagination. It is a front-end option that does not affect queries. When enabled, the page size automatically adjusts to the height of the table.
## Filter table columns
If you turn on the **Column filter**, then you can filter table options.
### Turn on column filtering
1. In Grafana, navigate to the dashboard with the table with the columns that you want to filter.
1. On the table panel you want to filter, open the panel editor.
1. Click the **Field** tab.
1. In Table options, turn on the **Column filter** option.
A filter icon appears next to each column title.
{{< figure src="/static/img/docs/tables/column-filter-with-icon.png" max-width="500px" caption="Column filtering turned on" class="docs-image--no-shadow" >}}
### Filter column values
To filter column values, click the filter (funnel) icon next to a column title. Grafana displays the filter options for that column.
{{< figure src="/static/img/docs/tables/filter-column-values.png" max-width="500px" caption="Filter column values" class="docs-image--no-shadow" >}}
Click the check box next to the values that you want to display. Enter text in the search field at the top to show those values in the display so that you can select them rather than scroll to find them.
### Clear column filters
Columns with filters applied have a blue funnel displayed next to the title.
{{< figure src="/static/img/docs/tables/filtered-column.png" max-width="500px" caption="Filtered column" class="docs-image--no-shadow" >}}
To remove the filter, click the blue funnel icon and then click **Clear filter**.
docs/sources/panels-visualizations/visualizations/text/index.md
+41
View File
@@ -0,0 +1,41 @@
---
aliases:
- /docs/grafana/latest/features/panels/text/
- /docs/grafana/latest/panels/visualizations/text-panel/
- /docs/grafana/latest/reference/alertlist/
- /docs/grafana/latest/visualizations/text-panel/
- /docs/grafana/latest/panels-visualizations/visualizations/text/
keywords:
- grafana
- text
- documentation
- panel
title: Text
weight: 1100
---
# Text
The text panel enables you to directly include text or HTML in your dashboards. This can be used to add contextual information and descriptions or embed complex HTML.
## Mode
**Mode** determines how embedded content appears.
### Markdown
This option formats the content as [markdown](https://en.wikipedia.org/wiki/Markdown).
### HTML
This setting renders the content as [sanitized](https://github.com/grafana/grafana/blob/code-in-text-panel/packages/grafana-data/src/text/sanitize.ts) HTML. If you require more direct control over the output, you can set the
[disable_sanitize_html]({{< relref "../../../setup-grafana/configure-grafana/#disable_sanitize_html" >}}) flag which enables you to directly enter HTML.
### Code
This setting renders content inside a read-only code editor. Select an appropriate language to apply syntax highlighting
to the embedded text.
## Variables
[Variables]({{< relref "../../../dashboards/variables/variable-syntax/" >}}) in the content will be expanded for display.
docs/sources/panels-visualizations/visualizations/time-series/index.md
+267
View File
@@ -0,0 +1,267 @@
---
aliases:
- /docs/grafana/latest/panels/visualizations/time-series/
- /docs/grafana/latest/visualizations/time-series/
- /docs/grafana/latest/panels/visualizations/time-series/annotate-time-series/
- /docs/grafana/latest/visualizations/time-series/annotate-time-series/
- /docs/grafana/latest/panels/visualizations/time-series/change-axis-display/
- /docs/grafana/latest/visualizations/time-series/change-axis-display/
- /docs/grafana/latest/panels/visualizations/time-series/graph-color-scheme/
- /docs/grafana/latest/visualizations/time-series/graph-color-scheme/
- /docs/grafana/latest/panels/visualizations/time-series/graph-time-series-as-bars/
- /docs/grafana/latest/visualizations/time-series/graph-time-series-as-bars/
- /docs/grafana/latest/panels/visualizations/time-series/graph-time-series-as-lines/
- /docs/grafana/latest/visualizations/time-series/graph-time-series-as-lines/
- /docs/grafana/latest/panels/visualizations/time-series/graph-time-series-as-points/
- /docs/grafana/latest/visualizations/time-series/graph-time-series-as-points/
- /docs/grafana/latest/features/panels/histogram/
- /docs/grafana/latest/panels/visualizations/time-series/graph-time-series-stacking/
- /docs/grafana/latest/visualizations/time-series/graph-time-series-stacking/
- /docs/grafana/latest/panels-visualizations/visualizations/time-series/
keywords:
- grafana
- graph panel
- time series panel
- documentation
- guide
- graph
title: Time series
weight: 90
---
# Time series
{{< figure src="/static/img/docs/time-series-panel/time_series_small_example.png" max-width="1200px" caption="Time series" >}}
The time series visualization type is the default and primary way to visualize time series data as a graph. It can render series as lines, points, or bars. It is versatile enough to display almost any time-series data. [This public demo dashboard](https://play.grafana.org/d/000000016/1-time-series-graphs?orgId=1) contains many different examples of how it can be configured and styled.
> **Note:** You can migrate from the old Graph visualization to the new Time series visualization. To migrate, open the panel and click the **Migrate** button in the side pane.
## Tooltip options
Tooltip options control the information overlay that appears when you hover over data points in the graph.
{{< docs/shared "visualizations/tooltip-mode.md" >}}
## Legend options
Legend options control the series names and statistics that appear under or to the right of the graph.
{{< docs/shared "visualizations/legend-mode.md" >}}
## Graph styles
Use this option to define how to display your time series data. You can use overrides to combine multiple styles in the same graph.
- Lines
- Bars
- Points
![Style modes](/static/img/docs/time-series-panel/style-modes-v9.png)
### Bar alignment
Set the position of the bar relative to a data point. In the examples below, **Show points** is set to **Always** which makes it easier to see the difference this setting makes. The points do not change; the bars change in relationship to the points.
- **Before** ![Bar alignment before icon](/static/img/docs/time-series-panel/bar-alignment-before.png)
The bar is drawn before the point. The point is placed on the trailing corner of the bar.
- **Center** ![Bar alignment center icon](/static/img/docs/time-series-panel/bar-alignment-center.png)
The bar is drawn around the point. The point is placed in the center of the bar. This is the default.
- **After** ![Bar alignment after icon](/static/img/docs/time-series-panel/bar-alignment-after.png)
The bar is drawn after the point. The point is placed on the leading corner of the bar.
### Line width
Line width is a slider that controls the thickness for series lines or the outline for bars.
![Line thickness 5 example](/static/img/docs/time-series-panel/line-width-5.png)
### Fill opacity
Use opacity to specify the series area fill color.
![Fill opacity examples](/static/img/docs/time-series-panel/fill-opacity.png)
### Gradient mode
Gradient mode specifies the gradient fill, which is based on the series color. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}).
- **None:** No gradient fill. This is the default setting.
- **Opacity:** An opacity gradient where the opacity of the fill increases as Y-axis values increase.
- **Hue:** A subtle gradient that is based on the hue of the series color.
- **Scheme:** A color gradient defined by your [Color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}). This setting is used for the fill area and line. For more information about scheme, refer to [Scheme gradient mode]({{< relref "#cheme-gradient-mode" >}}).
Gradient appearance is influenced by the **Fill opacity** setting. The following image show, the **Fill opacity** is set to 50.
![Gradient mode examples](/static/img/docs/time-series-panel/gradient-modes-v9.png)
### Show points
You can configure your visualization to add points to lines or bars.
- **Auto:** Grafana determines to show or not to show points based on the density of the data. If the density is low, then points appear.
- **Always:** Show the points regardless of how dense the data set is.
- **Never:** Do not show points.
### Point size
Set the size of the points, from 1 to 40 pixels in diameter.
### Line interpolation
This option controls how the graph interpolates the series line.
![Line interpolation option](/static/img/docs/time-series-panel/line-interpolation-option.png)
- **Linear:** Points are joined by straight lines.
- **Smooth:** Points are joined by curved lines that smooths transitions between points.
- **Step before:** The line is displayed as steps between points. Points are rendered at the end of the step.
- **Step after:** The line is displayed as steps between points. Points are rendered at the beginning of the step.
### Line style
Set the style of the line. To change the color, use the standard [color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}) field option.
![Line style option](/static/img/docs/time-series-panel/line-style-option-v9.png)
- **Solid:** Display a solid line. This is the default setting.
- **Dash:** Display a dashed line. When you choose this option, a list appears for you to select the length and gap (length, gap) for the line dashes. Dash spacing set to 10, 10 (default).
- **Dots:** Display dotted lines. When you choose this option, a list appears for you to select the gap (length = 0, gap) for the dot spacing. Dot spacing set to 0, 10 (default)
![Line styles examples](/static/img/docs/time-series-panel/line-styles-examples-v9.png)
### Connect null values
Choose how null values, which are gaps in the data, appear on the graph. Null values can be connected to form a continuous line or set to a threshold above which gaps in the data are no longer connected.
![Connect null values option](/static/img/docs/time-series-panel/connect-null-values-option-v9.png)
- **Never:** Time series data points with gaps in the the data are never connected.
- **Always:** Time series data points with gaps in the the data are always connected.
- **Threshold:** Specify a threshold above which gaps in the data are no longer connected. This can be useful when the connected gaps in the data are of a known size and/or within a known range, and gaps outside this range should no longer be connected.
### Stack series
_Stacking_ allows Grafana to display series on top of each other. Be cautious when using stacking in the visualization as it can easily create misleading graphs. To read more about why stacking might not be the best approach, refer to [Stacked Area Graphs Are Not Your Friend](https://everydayanalytics.ca/2014/08/stacked-area-graphs-are-not-your-friend.html).
![Stack option](/static/img/docs/time-series-panel/stack-option-v9.png)
- **Off:** Turns off series stacking. When **Off**, all series share the same space in the visualization.
- **Normal:** Stacks series on top of each other.
- **100%:** Stack by percentage where all series add up to 100%.
#### Stack series in groups
The stacking group option is only available as an override. For more information about creating an override, refer to [Configure field overrides]({{< relref "../../configure-overrides" >}}).
1. Edit the panel and click **Overrides**.
1. Create a field override for the **Stack series** option.
1. In stacking mode, click **Normal**.
1. Name the stacking group in which you want the series to appear.
The stacking group name option is only available when you create an override.
### Fill below to
The **Fill below to** option fills the area between two series. This option is only available as a series/field override.
1. Edit the panel and click **Overrides**.
1. Select the fields to fill below.
1. In **Add override property**, select **Fill below to**.
1. Select the series for which you want the fill to stop.
The following example shows three series: Min, Max, and Value. The Min and Max series have **Line width** set to 0. Max has a **Fill below to** override set to Min, which fills the area between Max and Min with the Max line color.
{{< figure src="/static/img/docs/time-series-panel/fill-below-to-7-4.png" max-width="600px" caption="Fill below to example" >}}
## Axis options
Options under the axis category change how the X and Y axes are rendered. Some options do not take effect until you click outside of the field option box you are editing. You can also or press `Enter`.
### Placement
Select the placement of the Y-axis.
- **Auto:** Automatically assigns the Y-axis to the series. When there are two or more series with different units, Grafana assigns the left axis to the first unit and the right axis to the units that follow.
- **Left:** Display all Y-axes on the left side.
- **Right:** Display all Y-axes on the right side.
- **Hidden:** Hide all axes.
To selectively hide axes, [Add a field override]({{< relref "../../configure-overrides#add-a-field-override" >}}) that targets specific fields.
### Label
Set a Y-axis text label. If you have more than one Y-axis, then you can assign different labels using an override.
### Width
Set a fixed width of the axis. By default, Grafana dynamically calculates the width of an axis.
By setting the width of the axis, data with different axes types can share the same display proportions. This setting makes it easier for you to compare more than one graph’s worth of data because the axes are not shifted or stretched within visual proximity to each other.
### Soft min and soft max
Set a **Soft min** or **soft max** option for better control of Y-axis limits. By default, Grafana sets the range for the Y-axis automatically based on the dataset.
**Soft min** and **soft max** settings can prevent blips from turning into mountains when the data is mostly flat, and hard min or max derived from standard min and max field options can prevent intermittent spikes from flattening useful detail by clipping the spikes past a specific point.
To define hard limits of the Y-axis, You can set standard min/max options. For more information, refer to [Configure standard options]({{< relref "../../configure-standard-options/#max" >}}).
![Label example](/static/img/docs/time-series-panel/axis-soft-min-max-7-4.png)
### Scale
Set the Y-axis values scale.
- **Linear:** Divides the scale into equal parts.
- **Logarithmic:** Use a logarithmic scale. When you select this option, a list appears for you to choose a binary (base 2) or common (base 10) logarithmic scale.
### Transform
Use this option to transform the series values without affecting the values shown in the tooltip, context menu, or legend.
- **Negative Y transform:** Flip the results to negative values on the Y axis.
- **Constant:** Show the first value as a constant line.
> **Note:** The transform option is only available as an override.
## Color options
By default, the graph uses the standard [Color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}} option to assign series colors. You can also use the legend to open the color picker by clicking the legend series color icon. Setting
color this way automatically creates an override rule that set's a specific color for a specific series.
### Classic palette
The most common setup is to use the **Classic palette** for graphs. This scheme automatically assigns a color for each field or series based on its order. If the order of a field changes in your query, the color also changes. You can manually configure a color for a specific field using an override rule.
### Single color
Use this mode to specify a color. You can also click the colored line icon next to each series in the Legend to open the color picker. This automatically creates a new override that sets the color scheme to single color and the selected color.
### By value color schemes
If you select a by value color scheme like **From thresholds (by value)** or **Green-Yellow-Red (by value)**, the **Color series by** option appears. This option controls which value (Last, Min, Max) to use to assign the series its color.
### Scheme gradient mode
The **Gradient mode** option located under the **Graph styles** has a mode named **Scheme**. When you enable **Scheme**, the line or bar receives a gradient color defined from the selected **Color scheme**.
#### From thresholds
If the **Color scheme** is set to **From thresholds (by value)** and **Gradient mode** is set to **Scheme**, then the line or bar color changes as they cross the defined thresholds.
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_thresholds_line.png" max-width="1200px" caption="Colors scheme: From thresholds" >}}
The following image shows bars mode enabled.
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_thresholds_bars.png" max-width="1200px" caption="Color scheme: From thresholds" >}}
#### Gradient color schemes
The following image shows a line chart with the **Green-Yellow-Red (by value)** color scheme option selected.
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_line.png" max-width="1200px" caption="Color scheme: Green-Yellow-Red" >}}
The following image shows a bar chart with the **Green-Yellow-Red (by value)** color scheme option selected.
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_bars.png" max-width="1200px" caption="Color scheme: Green-Yellow-Red" >}}
docs/sources/panels-visualizations/visualizations/traces/index.md
+27
View File
@@ -0,0 +1,27 @@
---
aliases:
- /docs/grafana/latest/visualizations/traces/
- /docs/grafana/latest/panels-visualizations/visualizations/traces/
keywords:
- grafana
- dashboard
- documentation
- panels
- traces
title: Traces
weight: 850
---
# Traces panel
> **Note:** This panel is currently in beta. Expect changes in future releases.
_Traces_ are a visualization that enables you to track and log a request as it traverses the services in your infrastructure.
For more information about traces and how to use them, refer to the following documentation:
- [What are traces](https://grafana.com/docs/grafana-cloud/traces)
- [Tracing in expliore]({{< relref "../../../explore/trace-integration/" >}})
- [Getting started with Tempo](https://grafana.com/docs/tempo/latest/getting-started)
{{< figure src="/static/img/docs/explore/explore-trace-view-full-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view" >}}