From 2ff7c0af7af950e3bf29deca9ef693dcd583b45d Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Thu, 10 Apr 2025 12:46:23 -0400 Subject: [PATCH] [release-11.0.12] Docs: trend visualization refactor (#103807) --- .../visualizations/trend/index.md | 90 ++++++++++++++----- .../shared/visualizations/axis-options-2.md | 2 +- 2 files changed, 67 insertions(+), 25 deletions(-) diff --git a/docs/sources/panels-visualizations/visualizations/trend/index.md b/docs/sources/panels-visualizations/visualizations/trend/index.md index 7c8900b0f4f..ebafce90b60 100644 --- a/docs/sources/panels-visualizations/visualizations/trend/index.md +++ b/docs/sources/panels-visualizations/visualizations/trend/index.md @@ -25,53 +25,95 @@ refs: # Trend -Trend visualizations should be used for datasets that have a sequential, numeric X that is not time. Some examples are function graphs, rpm/torque curves, supply/demand relationships, and elevation or heart rate plots along a race course (with x as distance or duration from start). +Trend visualizations should be used for datasets that have a sequential, numeric x-field that is not time. Some examples are function graphs, rpm/torque curves, supply/demand relationships, and elevation or heart rate plots along a race course (with x as distance or duration from start). + +For example, you could represent engine power and torque versus speed where speed is plotted on the x-axis and power and torque are plotted on the y-axes: + +{{< figure src="/media/docs/grafana/screenshot-trend-visualization-v12.0.png" max-width="750px" alt="Trend engine power and torque curves" >}} Trend visualizations support all visual styles and options available in the [time series visualization](ref:time-series-visualization) with these exceptions: - No annotations or time regions - No shared cursor/crosshair -- No multi-timezone x axis -- No ability to change the dashboard time range via drag-selection +- No multi-timezone x-axis +- No ability to change the dashboard time range using drag-selection -## X Field selection +## Configuration options -Use this option to select a field that contains increasing numeric values. +{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="" >}} -{{< figure src="/media/docs/grafana/screenshot-grafana-10-0-trend-speed-xvalue.png" max-width="750px" caption="Trend x value selection" >}} - -For example, you could represent engine power and torque versus speed where speed is plotted on the x axis and power and torque are plotted on the y axes. - -{{< figure src="/media/docs/grafana/screenshot-grafana-10-0-trend-panel-new-colors.png" max-width="750px" caption="Trend engine power and torque curves" >}} - -## Panel options +### Panel options {{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="" >}} -## Standard options +### X axis options -{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="" >}} +In the **X field** option, select a field that contains increasing numeric values. -## Legend options +### Tooltip options + +Tooltip options control the information overlay that appears when you hover over data points in the visualization. + +| Option | Description | +| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| [Tooltip mode](#tooltip-mode) | When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. | +| [Values sort order](#values-sort-order) | This option controls the order in which values are listed in a tooltip. | +| [Hover proximity](#hover-proximity) | Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display. | + +#### Tooltip mode + +When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. + +- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. +- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. +- **Hidden -** Do not display the tooltip when you interact with the visualization. + +Use an override to hide individual series from the tooltip. + +#### Values sort order + +When you set the **Tooltip mode** to **All**, the **Values sort order** option is displayed. This option controls the order in which values are listed in a tooltip. Choose from the following: + +- **None** - Grafana automatically sorts the values displayed in a tooltip. +- **Ascending** - Values in the tooltip are listed from smallest to largest. +- **Descending** - Values in the tooltip are listed from largest to smallest. + +#### Hover proximity + +Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display. + +![Adding a hover proximity limit for tooltips](/media/docs/grafana/gif-grafana-10-4-hover-proximity.gif) + +### Legend options {{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="" >}} -## Tooltip options +### Graph styles options -{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="" >}} +The options under the **Graph styles** section let you control the general appearance of the graph, excluding [color](#standard-options). -## Data links +{{< docs/shared lookup="visualizations/graph-styles-options.md" source="grafana" version="" >}} + +### Axis options + +{{< docs/shared lookup="visualizations/axis-options-2.md" source="grafana" version="" leveloffset="+1" >}} + +### Standard options + +{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="" >}} + +### Data links {{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} -## Thresholds - -{{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="" >}} - -## Value mappings +### Value mappings {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} -## Field overrides +### Thresholds + +{{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="" >}} + +### Field overrides {{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="" >}} diff --git a/docs/sources/shared/visualizations/axis-options-2.md b/docs/sources/shared/visualizations/axis-options-2.md index 40c3d3c54fc..fd08cf660c7 100644 --- a/docs/sources/shared/visualizations/axis-options-2.md +++ b/docs/sources/shared/visualizations/axis-options-2.md @@ -3,7 +3,7 @@ title: Axis options comments: | There are two axis options shared files, axis-options-1.md and axis-options-2.md to cover the most common combinations of options. Using shared files ensures that content remains consistent across visualizations that share the same options and users don't have to figure out which options apply to a specific visualization when reading that content. - This file is used in the following visualizations: candlestick, xy chart + This file is used in the following visualizations: candlestick, trend, xy chart --- Options under the **Axis** section control how the x- and y-axes are rendered. Some options don't take effect until you click outside of the field option box you're editing. You can also press `Enter`.