mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Docs: Gauge visualization refactor (#98143)
This commit is contained in:
Isabel Matwawana
GitHub
parent
4837585cab
commit
dc52d1b252
@ -27,7 +27,7 @@ refs:
|
||||
|
||||
Gauges are single-value visualizations that allow you to quickly visualize where a value falls within a defined or calculated min and max range. With repeat options, you can display multiple gauges, each corresponding to a different series, column, or row.
|
||||
|
||||
{{< figure src="/static/img/docs/v66/gauge_panel_cover.png" max-width="1025px" alt="A gauge visualization">}}
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-gauge-visualization-v11.4.png" alt="A gauge visualization">}}
|
||||
|
||||
You can use gauges if you need to track:
|
||||
|
||||
@ -35,11 +35,11 @@ You can use gauges if you need to track:
|
||||
- How full a piece of equipment is
|
||||
- How fast a vehicle is moving within a set of limits
|
||||
- Network latency
|
||||
- Equipment state with setpoint and alarm thresholds
|
||||
- Equipment state with set point and alarm thresholds
|
||||
- CPU consumption (0-100%)
|
||||
- RAM availability
|
||||
|
||||
## Configure a time series visualization
|
||||
## Configure a gauge visualization
|
||||
|
||||
The following video provides beginner steps for creating gauge panels. You'll learn the data requirements and caveats, special customizations, and much more:
|
||||
|
||||
@ -57,13 +57,13 @@ To create a gauge visualization you need a dataset containing at least one numer
|
||||
| --------- | ---------- |
|
||||
| MyGauge | 5 |
|
||||
|
||||
|
||||
|
||||
|
||||
This dataset generates a visualization with one empty gauge showing the numeric value. This is because the gauge visualization automatically defines the upper and lower range from the minimum and maximum values in the dataset. This dataset has only one value, so it’s set as both minimum and maximum.
|
||||
|
||||
If you only have one value, but you want to define a different minimum and maximum, you can set them manually in the [Standard options](#standard-options) settings to generate a more typical looking gauge.
|
||||
|
||||
|
||||
|
||||
|
||||
### Example - One row, multiple values
|
||||
|
||||
@ -73,7 +73,7 @@ The gauge visualization can support multiple fields in a dataset. <!-- In this c
|
||||
| ---------- | ------ | ------ | ------ |
|
||||
| Gauges | 5 | 3 | 10 |
|
||||
|
||||
|
||||
|
||||
|
||||
When there are multiple values in the dataset, the visualization displays multiple gauges and automatically defines the minimum and maximum. In this case, those are 3 and 10. Because the minimum and maximum values are defined, each gauge is shaded in to show that value in relation to the minimum and maximum.
|
||||
|
||||
@ -87,7 +87,7 @@ The gauge visualization can display datasets with multiple rows of data or even
|
||||
| Indicators | 6 | 9 | 15 |
|
||||
| Defaults | 1 | 4 | 8 |
|
||||
|
||||
|
||||
|
||||
|
||||
By default, the visualization is configured to [calculate](#value-options) a single value per column or series and to display only the last row of data. However, it derives the minimum and maximum from the full dataset, even if those values aren’t visible.
|
||||
|
||||
@ -95,7 +95,7 @@ In this example, that means only the last row of data is displayed in the gauges
|
||||
|
||||
If you want to show one gauge per table cell, you can change the **Show** setting from **Calculate** to **All values**, and each gauge is labeled by concatenating the text column with each value's column name.
|
||||
|
||||
|
||||
|
||||
|
||||
### Example - Defined min and max
|
||||
|
||||
@ -105,118 +105,84 @@ You can also define minimum and maximum values as part of the dataset.
|
||||
| ---------- | ----- | --- | --- |
|
||||
| Gauges | 5 | 10 | 2 |
|
||||
|
||||
|
||||
|
||||
|
||||
If you don’t want to display gauges for the `min` and `max` values, you can configure only one field to be displayed as described in the [value options](#value-options) section.
|
||||
|
||||
|
||||
|
||||
|
||||
Even when minimum and maximum values aren’t displayed, the visualization still pulls the range from them.
|
||||
|
||||
## Panel options
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Value options
|
||||
### Value options
|
||||
|
||||
Use the following options to refine how your visualization displays the value:
|
||||
|
||||
### Show
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
Choose how Grafana displays your data.
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Show | Set how Grafana displays your data. Choose from:<ul><li>**Calculate** - Show a calculated value based on all rows.</li><li>**All values** - Show a separate value for every row. If you select this option, then you can also limit the number of rows to display.</li></ul> |
|
||||
| Calculation | If you chose **Calculate** as your **Show** option, 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](ref:calculation-types). |
|
||||
| Limit | If you chose **All values** as your **Show** option, enter the maximum number of rows to display. The default is 5,000. |
|
||||
| Fields | Select the fields display in the panel. |
|
||||
|
||||
#### Calculate
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
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](ref: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
|
||||
### Gauge options
|
||||
|
||||
Adjust how the gauge is displayed.
|
||||
|
||||
### Orientation
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
Choose a stacking direction.
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Orientation | Choose a stacking direction:<ul><li>**Auto** - Gauges display in rows and columns.</li><li>**Horizontal** - Gauges display top to bottom.</li><li>**Vertical** - Gauges display left to right.</li></ul> |
|
||||
| Show threshold labels | Controls if threshold values are shown. |
|
||||
| [Show threshold markers](#show-threshold-markers) | Controls if a threshold band is shown outside the inner gauge value band. |
|
||||
| Gauge size | Choose a gauge size mode:<ul><li>**Auto** - Grafana determines the best gauge size.</li><li>**Manual** - Manually configure the gauge size.</li></ul>This option only applies when **Orientation** is set to **Horizontal** or **Vertical**. |
|
||||
| Min width | Set the minimum width of vertically-oriented gauges. If you set a minimum width, the x-axis scrollbar is automatically displayed when there's a large amount of data. This option only applies when **Gauge size** is set to **Manual**. |
|
||||
| Min height | Set the minimum height of horizontally-oriented gauges. If you set a minimum height, the y-axis scrollbar is automatically displayed when there's a large amount of data. This option only applies when **Gauge size** is set to **Manual**. |
|
||||
| Neutral | Set the starting value from which every gauge will be filled. |
|
||||
|
||||
- **Auto -** Gauges display in rows and columns.
|
||||
- **Horizontal -** Gauges display top to bottom.
|
||||
- **Vertical -** Gauges display left to right.
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Show threshold labels
|
||||
#### Show threshold markers
|
||||
|
||||
Controls if threshold values are shown.
|
||||
Controls if a threshold band is shown around the inner gauge value band.
|
||||
|
||||
### Show threshold markers
|
||||
|
||||
|
||||
Controls if a threshold band is shown outside the inner gauge value band.
|
||||
|
||||
### Gauge size
|
||||
|
||||
Choose a gauge size mode.
|
||||
|
||||
- **Auto -** Grafana determines the best gauge size.
|
||||
- **Manual -** Manually configure the gauge size.
|
||||
|
||||
### Min width
|
||||
|
||||
Set the minimum width of vertically-oriented gauges.
|
||||
|
||||
If you set a minimum width, the x-axis scrollbar is automatically displayed when there's a large amount of data.
|
||||
|
||||
{{% admonition type="note" %}}
|
||||
This option only applies when gauge size is set to manual.
|
||||
{{% /admonition %}}
|
||||
|
||||
### Min height
|
||||
|
||||
Set the minimum height of horizontally-oriented gauges.
|
||||
|
||||
If you set a minimum height, the y-axis scrollbar is automatically displayed when there's a large amount of data.
|
||||
|
||||
{{% admonition type="note" %}}
|
||||
This option only applies when gauge size is set to manual.
|
||||
{{% /admonition %}}
|
||||
|
||||
### Neutral
|
||||
|
||||
Set the starting value from which every gauge will be filled.
|
||||
|
||||
## Text size
|
||||
### 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.
|
||||
- **Title** - Enter a numeric value for the gauge title size.
|
||||
- **Value** - Enter a numeric value for the gauge value size.
|
||||
|
||||
## Standard options
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Data links
|
||||
### Data links
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Value mappings
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Thresholds
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
Last, gauge colors and thresholds (the outer bar markers) of the gauge can be configured as described above.
|
||||
|
||||
|
||||
|
||||
## Field overrides
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user