From dc52d1b252aa58c958886faa55efcdae2cb5e7f5 Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Wed, 18 Dec 2024 12:40:39 -0500 Subject: [PATCH] Docs: Gauge visualization refactor (#98143) --- .../visualizations/gauge/index.md | 128 +++++++----------- 1 file changed, 47 insertions(+), 81 deletions(-) diff --git a/docs/sources/panels-visualizations/visualizations/gauge/index.md b/docs/sources/panels-visualizations/visualizations/gauge/index.md index 0c8553138d9..bfcd1c89549 100644 --- a/docs/sources/panels-visualizations/visualizations/gauge/index.md +++ b/docs/sources/panels-visualizations/visualizations/gauge/index.md @@ -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 | -![Gauge with single numeric value](/media/docs/grafana/panels-visualizations/screenshot-grafana-12.2-gauge-example1.png 'Gauge with single numeric value') +![Gauge with single numeric value](/media/docs/grafana/panels-visualizations/screenshot-grafana-12.2-gauge-example1.png) 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. -![Gauge with single numeric value and hardcoded max and min](/media/docs/grafana/panels-visualizations/screenshot-grafana-12.2-gauge-example2.png 'Gauge with single numeric value and hardcoded max-min') +![Gauge with single numeric value and hardcoded max and min](/media/docs/grafana/panels-visualizations/screenshot-grafana-12.2-gauge-example2.png) ### Example - One row, multiple values @@ -73,7 +73,7 @@ The gauge visualization can support multiple fields in a dataset. -Choose how Grafana displays your data. +| Option | Description | +| ------ | ----------- | +| Show | Set how Grafana displays your data. Choose from: | +| 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 + -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 + -Choose a stacking direction. +| Option | Description | +| ------ | ----------- | +| Orientation | Choose a stacking direction: | +| 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: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. + -### 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 +![Gauge viz with multiple rows and columns of numeric values showing all the values and thresholds defined for 0-6-11](/media/docs/grafana/panels-visualizations/screenshot-grafana-12.2-gauge-example8.png) -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="" >}} -## Data links +### Data links {{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} -## Value mappings +### Value mappings {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} -## Thresholds +### Thresholds {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} -Last, gauge colors and thresholds (the outer bar markers) of the gauge can be configured as described above. - -![Gauge viz with multiple rows and columns of numeric values showing all the values and thresholds defined for 0-6-11](/media/docs/grafana/panels-visualizations/screenshot-grafana-12.2-gauge-example8.png 'Gauge viz with multiple rows and columns of numeric values showing all the values and thresholds defined for 0-6-11') - -## Field overrides +### Field overrides {{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="" >}}