From f1bc2319c26387ddb39ad5aefd33fa3303850fa1 Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Thu, 10 Apr 2025 12:50:08 -0400 Subject: [PATCH] [release-11.3.6] Docs: trend visualization refactor (#103810) --- .../visualizations/trend/index.md | 56 +++++++++++-------- .../shared/visualizations/axis-options-2.md | 2 +- 2 files changed, 35 insertions(+), 23 deletions(-) diff --git a/docs/sources/panels-visualizations/visualizations/trend/index.md b/docs/sources/panels-visualizations/visualizations/trend/index.md index 7c8900b0f4f..dc2e81f0d3e 100644 --- a/docs/sources/panels-visualizations/visualizations/trend/index.md +++ b/docs/sources/panels-visualizations/visualizations/trend/index.md @@ -25,53 +25,65 @@ 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" >}} +### Panel options -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" >}} +{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="" >}} -## Panel options +### X axis options -{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="" >}} +In the **X field** option, select a field that contains increasing numeric values. -## Standard options +### Tooltip options -{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="" leveloffset="+1" >}} -## Legend options +### 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="" >}} -{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} +### Axis options -## Thresholds +{{< docs/shared lookup="visualizations/axis-options-2.md" source="grafana" version="" leveloffset="+1" >}} -{{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="" >}} +### Standard options -## Value mappings +{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="" >}} + +### Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + +### 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 735c744ad1b..57dd11756b8 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 three 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`.