Move static legend to cloud-only (#2798)
* Add static legend (addresses #2568 ) * Update content/influxdb/v2.0/visualize-data/visualization-types/band.md Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com> * Update content/influxdb/v2.0/visualize-data/visualization-types/band.md Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com> * Update content/influxdb/v2.0/visualize-data/visualization-types/graph-single-stat.md Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com> * Update content/influxdb/v2.0/visualize-data/visualization-types/graph.md Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com> * Update content/influxdb/v2.0/visualize-data/visualization-types/graph-single-stat.md Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com> * Update content/influxdb/v2.0/visualize-data/visualization-types/graph.md Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com> * Move static legend changes to cloud only * Update hover/static controls to reflect changes Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com>pull/2849/head
noramullen1
GitHub
parent
12568e3019
commit
4b2a5aef61
content/influxdb
cloud/visualize-data/visualization-types
v2.0/visualize-data/visualization-types
|
|
@ -10,4 +10,165 @@ menu:
|
|||
parent: Visualization types
|
||||
---
|
||||
|
||||
{{< duplicate-oss >}}
|
||||
The **Band** visualization displays the upper and lower boundaries for groups of data over time. Boundaries are determined by applying aggregate functions to your data for a specified window period, and then setting the aggregate functions for a specified upper, main, or lower boundary.
|
||||
|
||||
## Set up the Band visualization
|
||||
|
||||
To see bands (boundaries) in the **Band Plot** visualization, you must set up two or three boundaries for comparison.
|
||||
|
||||
### Set up the band visualization in the Data Explorer
|
||||
|
||||
1. Click the **Data Explorer** icon in the navigation bar.
|
||||
|
||||
{{< nav-icon "data-explorer" >}}
|
||||
|
||||
2. Enter your query (see [Explore data with Flux and the Data Explorer](/influxdb/v2.0/visualize-data/explore-metrics/#explore-data-with-flux-and-the-data-explorer)). You must include the aggregate functions used to determine the Band Plot visualization boundaries in your query.
|
||||
3. Select the **Band Plot** option from the visualization dropdown in the upper left, and then click **Customize**.
|
||||
4. Under **Data**, select the following:
|
||||
- For **X Column** and **Y Column**, select the columns to display for the x- and y- axes.
|
||||
- For **Time Format**, select the timestamp format to display in the visualization.
|
||||
5. Under **Aggregate Functions**, select a function to determine each boundary (column) for comparison (select two or three):
|
||||
- In the **Upper Column Name** field, select a function for the upper boundary.
|
||||
- In the **Main Column Name** field, select a function for the main boundary.
|
||||
- In the **Lower Column Name** field, select a function for the lower boundary.
|
||||
6. (Optional) Continue to customize your visualization, including options such as interpolation, color, hover dimension, and y-axis settings. For more information, see [Options](#options) and [Y Axis](#y-axis) below.
|
||||
|
||||
**Tip:** If you do not see shaded boundaries in the **Band Plot** visualization, verify the query window period includes a sufficient number of data points for the selected aggregate function. By default, the window period is automatically set to ten seconds (`10s`). To adjust your window period, select **Custom**, and then enter a supported time unit (for example nanoseconds (`ns`), microseconds (`us`), milliseconds (`ms`), seconds (`s`), or hours (`h`).
|
||||
|
||||
{{< img-hd src="/img/influxdb/2-0-visualizations-Band-example.png" alt="Band example" />}}
|
||||
|
||||
### Set up the band plot visualization in the Script Editor
|
||||
|
||||
1. Click the **Data Explorer** icon in the navigation bar.
|
||||
|
||||
{{< nav-icon "data-explorer" >}}
|
||||
|
||||
2. Click **Script Editor**.
|
||||
3. Select the **Band Plot** option from the visualization dropdown in the upper left.
|
||||
4. Create three aggregate functions: one for the main boundary, one for the upper boundary, and one for the lower boundary. The following example uses the [`mean()`](/influxdb/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/mean/), [`max()`](/influxdb/v2.0/reference/flux/stdlib/built-in/transformations/selectors/max/), and [`min()`](/influxdb/v2.0/reference/flux/stdlib/built-in/transformations/selectors/min) functions:
|
||||
|
||||
```js
|
||||
from(bucket: "bucket_1")
|
||||
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|
||||
|> filter(fn: (r) => r["_measurement"] == "cpu")
|
||||
|> filter(fn: (r) => r["_field"] == "usage_system")
|
||||
|> filter(fn: (r) => r["cpu"] == "cpu0" or r["cpu"] == "cpu1")
|
||||
|> aggregateWindow(every: 15s, fn: mean, createEmpty: false)
|
||||
|> yield(name: "mean")
|
||||
|
||||
from(bucket: "bucket_1")
|
||||
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|
||||
|> filter(fn: (r) => r["_measurement"] == "cpu")
|
||||
|> filter(fn: (r) => r["_field"] == "usage_system")
|
||||
|> filter(fn: (r) => r["cpu"] == "cpu0" or r["cpu"] == "cpu1")
|
||||
|> aggregateWindow(every: 15s, fn: max, createEmpty: false)
|
||||
|> yield(name: "max")
|
||||
|
||||
from(bucket: "bucket_1")
|
||||
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|
||||
|> filter(fn: (r) => r["_measurement"] == "cpu")
|
||||
|> filter(fn: (r) => r["_field"] == "usage_system")
|
||||
|> filter(fn: (r) => r["cpu"] == "cpu0" or r["cpu"] == "cpu1")
|
||||
|> aggregateWindow(every: 15s, fn: min, createEmpty: false)
|
||||
|> yield(name: "min")
|
||||
```
|
||||
|
||||
5. (Optional) Customize the name of the yielded results for each function by editing the `name` parameter in the [`yield()`](/influxdb/v2.0/reference/flux/stdlib/built-in/outputs/yield/) function.
|
||||
For example, to change the name of the first function from `mean` to `Average`, modify the last line to the following:
|
||||
```js
|
||||
|> yield(name: "Average")
|
||||
```
|
||||
6. Click **Customize** in the upper left.
|
||||
7. Under **Aggregate Functions**, enter the functions you created to determine each boundary (column) for comparison. If you changed the `yield` name for any of the functions above, enter the modified name here instead of the function name:
|
||||
- In the **Upper Column Name** field, enter the result set to use for the upper boundary.
|
||||
- In the **Main Column Name** field, enter the result set to use for the main boundary.
|
||||
- In the **Lower Column Name** field, enter the function for the lower boundary.
|
||||
7. (Optional) Continue to customize your visualization, including options such as interpolation, color, hover dimension, and y-axis settings. For more information, see [Options](#options) and [Y Axis](#y-axis) below.
|
||||
|
||||
### Customize column names
|
||||
|
||||
## Band behavior
|
||||
|
||||
Like a line graph, the band visualization shows how values change over time. Additionally, it displays upper and lower "bands" for the measurements.
|
||||
|
||||
For example, in the band chart above, the lines represent the mean `usage_system` values for the `cpu` measurement for `cpu0` and `cpu1`. The upper and lower limits of the bands are defined by the `max` and `min` aggregate functions, respectively.
|
||||
|
||||
## Band controls
|
||||
|
||||
To view **Band** controls, click **{{< icon "gear" >}} Customize** next to the visualization dropdown.
|
||||
|
||||
###### Data
|
||||
|
||||
- **X Column**: Select a column to display on the x-axis.
|
||||
- **Y Column**: Select a column to display on the y-axis.
|
||||
- **Time Format**: Select the time format. Options include:
|
||||
{{< ui/timestamp-formats >}}
|
||||
|
||||
###### Aggregate functions
|
||||
|
||||
- **Upper Column Name**: Aggregate function to display for upper bounds of data.
|
||||
- **Main Column Name**: Aggregate function to display for main graph line.
|
||||
- **Lower Column Name**: Aggregate function to display for lower bounds of data.
|
||||
|
||||
###### Options
|
||||
|
||||
- **Interpolation**:
|
||||
- **Linear**: Display a time series in a line graph.
|
||||
- **Smooth**: Display a time series in a line graph with smooth point interpolation.
|
||||
- **Step**: Display a time series in a staircase graph.
|
||||
- **Line Colors**: Select a color scheme to use for your graph.
|
||||
- **Hover Dimension**: Select the data to display in the tooltip when you hover over the graph:
|
||||
- **auto** or **X-Axis**: Show all points with the same x value along the y-axis.
|
||||
- **Y-Axis**: Show all points with the same y value along the x-axis.
|
||||
- **X-Y Axis**: Show only the point being currently hovered over.
|
||||
|
||||
###### X-Axis
|
||||
|
||||
- **Generate X-Axis Tick Marks**: Select the method to generate x-axis tick marks:
|
||||
- **Auto**: Select to automatically generate tick marks.
|
||||
- **Custom**: To customize the number of x-axis tick marks, select this option, and then enter the following:
|
||||
- **Total Tick Marks**: Enter the total number of timestamp ticks to display.
|
||||
- **Start Tick Marks At**: Enter the time, in RFC3339 format, to start displaying ticks. Use the **Date Picker** field to automatically generate an RFC3339 formatted timestamp for this field.
|
||||
- **Tick Mark Interval**: Enter the number of milliseconds in between each timestamp tick.
|
||||
|
||||
###### Y-Axis
|
||||
|
||||
- **Y Axis Label**: Enter the label for the y-axis.
|
||||
- **Y-Value Unit Prefix**: Select the prefix to add to the y-value:
|
||||
- **None**: Select to add no prefix.
|
||||
- **SI**: (default) Select to add an International System of Units (SI) or metric prefix.
|
||||
- **Binary**: Select to add a binary multiple prefix.
|
||||
- **Y Axis Prefix**: Enter the prefix to add to the y-value.
|
||||
- **Y Axis Suffix**: Enter the suffix to add to the y-value.
|
||||
- **Generate Y-Axis Tick Marks**: Select the method to generate y-axis tick marks:
|
||||
- **Auto**: Select to automatically generate tick marks.
|
||||
- **Custom**: To customize the number of y-axis tick marks, select this option, and then enter the following:
|
||||
- **Total Tick Marks**: Enter the total number of ticks to display.
|
||||
- **Start Tick Marks At**: Enter the value to start ticks at.
|
||||
- **Tick Mark Interval**: Enter the interval in between each tick.
|
||||
- **Y Axis Domain**: Select the method to generate the y-axis value range:
|
||||
- **Auto**: Select to automatically determine the value range based on values in the data set.
|
||||
- **Custom**: To customize the y-axis domain, manually specify the minimum y-axis value, maximum y-axis value, or range by including both.
|
||||
- **Min**: Enter the minimum y-axis value.
|
||||
- **Max**: Enter the maximum y-axis value.
|
||||
|
||||
|
||||
###### Legend
|
||||
- **Hover Legend**:
|
||||
- **Hide**: Hide the legend that appears upon hover.
|
||||
- **Show**: Show the legend upon hover.
|
||||
- **Orientation**: Select the orientation of the legend:
|
||||
- **Horizontal**: Select to display the legend horizontally.
|
||||
- **Vertical**: Select to display the legend vertically.
|
||||
- **Opacity**: Adjust the hover legend opacity using the slider.
|
||||
- **Colorize Rows**: Select to display hover legend rows in colors.
|
||||
- **Static Legend**:
|
||||
- **Hide**: Hide the static legend.
|
||||
- **Show**: Always show the static legend.
|
||||
- **Orientation**: Select the orientation of the legend:
|
||||
- **Horizontal**: Select to display the legend horizontally.
|
||||
- **Vertical**: Select to display the legend vertically.
|
||||
- **Opacity**: Adjust the static legend opacity using the slider.
|
||||
- **Colorize Rows**: Select to display static legend rows in colors.
|
||||
- **Displayed Value**: Select **Latest Y Axis** or **Latest X Axis** to determine whether the y or x axis appears on the legend.
|
||||
- **Height**: Adjust the height of the static legend using the slider.
|
||||
|
|
|
|||
|
|
@ -11,8 +11,130 @@ menu:
|
|||
name: Graph + Single Stat
|
||||
parent: Visualization types
|
||||
related:
|
||||
- /influxdb/cloud/visualize-data/visualization-types/graph
|
||||
- /influxdb/cloud/visualize-data/visualization-types/single-stat
|
||||
- /influxdb/v2.0/visualize-data/visualization-types/graph
|
||||
- /influxdb/v2.0/visualize-data/visualization-types/single-stat
|
||||
---
|
||||
|
||||
{{< duplicate-oss >}}
|
||||
The **Graph + Single Stat** view displays the specified time series in a line graph
|
||||
and overlays the single most recent value as a large numeric value.
|
||||
|
||||
{{< img-hd src="/img/influxdb/2-0-visualizations-line-graph-single-stat-example-8.png" alt="Line Graph + Single Stat example" />}}
|
||||
|
||||
Select the **Graph + Single Stat** option from the visualization dropdown in the upper left.
|
||||
|
||||
## Graph + Single Stat behavior
|
||||
The Graph visualization color codes each table (or series) in the queried data set.
|
||||
When multiple series are present, it automatically assigns colors based on the selected [Line Colors option](#options).
|
||||
|
||||
The Single Stat visualization displays a single numeric data point.
|
||||
It uses the latest point in the first table (or series) returned by the query.
|
||||
|
||||
{{% note %}}
|
||||
#### Queries should return one table
|
||||
Flux does not guarantee the order in which tables are returned.
|
||||
If a query returns multiple tables (or series), the table order can change between query executions
|
||||
and result in the Single Stat visualization displaying inconsistent data.
|
||||
For consistent Single Stat results, the query should return a single table.
|
||||
{{% /note %}}
|
||||
|
||||
## Graph + Single Stat Controls
|
||||
To view **Graph + Single Stat** controls, click **{{< icon "gear" >}} Customize** next to
|
||||
the visualization dropdown.
|
||||
|
||||
###### Data
|
||||
- **X Column**: Select a column to display on the x-axis.
|
||||
- **Y Column**: Select a column to display on the y-axis.
|
||||
- **Time Format**: Select the time format. Options include:
|
||||
{{< ui/timestamp-formats >}}
|
||||
|
||||
###### Options
|
||||
- **Line Colors**: Select a color scheme to use for your graph.
|
||||
- **Shade Area Below Lines**: Shade in the area below the graph lines.
|
||||
- **Hover Dimension**: Select the data to display in the tooltip when you hover over the graph:
|
||||
- **auto** or **X Axis**: Show all points with the same x value along the y-axis.
|
||||
- **Y Axis**: Show all points with the same y value along the x-axis.
|
||||
- **X & Y Axis**: Show only the point currently being hovered over.
|
||||
|
||||
###### X Axis
|
||||
- **Generate X-Axis Tick Marks**: Select the method to generate x-axis tick marks:
|
||||
- **Auto**: Select to automatically generate tick marks.
|
||||
- **Custom**: To customize the number of x-axis tick marks, select this option, and then enter the following:
|
||||
- **Total Tick Marks**: Enter the total number of ticks to display.
|
||||
- **Start Tick Marks At**: Enter the value to start ticks at.
|
||||
- **Tick Mark Interval**: Enter the interval in between each tick.
|
||||
|
||||
###### Y Axis
|
||||
- **Y Axis Label**: Label for the y-axis.
|
||||
- **Y Value Unit Prefix**:
|
||||
- **None**: No prefix.
|
||||
- **SI**: International System of Units (SI) or metric prefix.
|
||||
- **Binary**: Binary multiple prefix.
|
||||
- **Y Axis Prefix**: Prefix to be added to y-value.
|
||||
- **Y Axis Suffix**: Suffix to be added to y-value.
|
||||
- **Generate Y-Axis Tick Marks**: Select the method to generate y-axis tick marks:
|
||||
- **Auto**: Select to automatically generate tick marks.
|
||||
- **Custom**: To customize the number of y-axis tick marks, select this option, and then enter the following:
|
||||
- **Total Tick Marks**: Enter the total number of ticks to display.
|
||||
- **Start Tick Marks At**: Enter the value to start ticks at.
|
||||
- **Tick Mark Interval**: Enter the interval in between each tick.
|
||||
- **Y Axis Domain**: The y-axis value range.
|
||||
- **Auto**: Automatically determine the value range based on values in the data set.
|
||||
- **Custom**: Manually specify the minimum y-axis value, maximum y-axis value, or range by including both.
|
||||
- **Min**: Minimum y-axis value.
|
||||
- **Max**: Maximum y-axis value.
|
||||
- **Positioning**:
|
||||
- **Overlaid**: Display graph lines overlaid on each other.
|
||||
- **Stacked**: Display graph lines stacked on top of each other.
|
||||
|
||||
###### Customize Single-Stat
|
||||
- **Prefix**: Prefix to be added to the single stat.
|
||||
- **Suffix**: Suffix to be added to the single stat.
|
||||
- **Decimal Places**: The number of decimal places to display for the single stat.
|
||||
- **Auto** or **Custom**: Enable or disable auto-setting.
|
||||
|
||||
###### Colorized Thresholds
|
||||
- **Base Color**: Select a base or background color from the selection list.
|
||||
- **Add a Threshold**: Change the color of the single stat based on the current value.
|
||||
- **Value is**: Enter the value at which the single stat should appear in the selected color.
|
||||
Choose a color from the dropdown menu next to the value.
|
||||
- **Colorization**: Choose **Text** for the single stat to change color based on the configured thresholds.
|
||||
Choose **Background** for the background of the graph to change color based on the configured thresholds.
|
||||
|
||||
###### Legend
|
||||
- **Hover Legend**:
|
||||
- **Hide**: Hide the legend that appears upon hover.
|
||||
- **Show**: Show the legend upon hover.
|
||||
- **Orientation**: Select the orientation of the legend:
|
||||
- **Horizontal**: Select to display the legend horizontally.
|
||||
- **Vertical**: Select to display the legend vertically.
|
||||
- **Opacity**: Adjust the hover legend opacity using the slider.
|
||||
- **Colorize Rows**: Select to display hover legend rows in colors.
|
||||
- **Static Legend**:
|
||||
- **Hide**: Hide the static legend.
|
||||
- **Show**: Always show the static legend.
|
||||
- **Orientation**: Select the orientation of the legend:
|
||||
- **Horizontal**: Select to display the legend horizontally.
|
||||
- **Vertical**: Select to display the legend vertically.
|
||||
- **Opacity**: Adjust the static legend opacity using the slider.
|
||||
- **Colorize Rows**: Select to display static legend rows in colors.
|
||||
- **Displayed Value**: Select **Latest Y Axis** or **Latest X Axis** to determine whether the y or x axis appears on the legend.
|
||||
- **Height**: Adjust the height of the static legend using the slider.
|
||||
|
||||
## Graph + Single Stat examples
|
||||
The primary use case for the Graph + Single Stat visualization is to show the current or latest
|
||||
value as well as historical values.
|
||||
|
||||
### Show current value and historical values
|
||||
The following example shows the current percentage of memory used as well as memory usage over time:
|
||||
|
||||
###### Query memory usage percentage
|
||||
```js
|
||||
from(bucket: "example-bucket")
|
||||
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|
||||
|> filter(fn: (r) =>
|
||||
r._measurement == "mem" and
|
||||
r._field == "used_percent"
|
||||
)
|
||||
```
|
||||
###### Memory allocations visualization
|
||||
{{< img-hd src="/img/influxdb/2-0-visualizations-graph-single-stat-mem-8.png" alt="Graph + Single Stat Memory Usage Example" />}}
|
||||
|
|
|
|||
|
|
@ -11,4 +11,103 @@ menu:
|
|||
parent: Visualization types
|
||||
---
|
||||
|
||||
{{< duplicate-oss >}}
|
||||
The Graph visualization provides several types of graphs, each configured through
|
||||
the [Graph controls](#graph-controls).
|
||||
|
||||
{{< img-hd src="/img/influxdb/2-0-visualizations-line-graph-example-8.png" alt="Line Graph example" />}}
|
||||
|
||||
Select the **Graph** option from the visualization dropdown in the upper left.
|
||||
|
||||
## Graph behavior
|
||||
The Graph visualization color codes each table (or series) in the queried data set.
|
||||
When multiple series are present, it automatically assigns colors based on the selected [Line Colors option](#options).
|
||||
|
||||
When using a line graph, all points within a single table are connected. When multiple series are present, it automatically assigns colors based on the selected [Line Colors option](#options).
|
||||
|
||||
## Graph controls
|
||||
To view **Graph** controls, click **{{< icon "gear" >}} Customize** next to
|
||||
the visualization dropdown.
|
||||
|
||||
###### Data
|
||||
- **X Column**: Select a column to display on the x-axis.
|
||||
- **Y Column**: Select a column to display on the y-axis.
|
||||
- **Time Format**: Select the time format. Options include:
|
||||
{{< ui/timestamp-formats >}}
|
||||
|
||||
###### Options
|
||||
- **Interpolation**: Select from the following options:
|
||||
- **Line**: Display a time series in a line graph
|
||||
- **Smooth**: Display a time series in a line graph with smooth point interpolation.
|
||||
- **Step**: Display a time series in a staircase graph.
|
||||
<!-- - **Bar**: Display the specified time series using a bar chart. -->
|
||||
<!-- - **Stacked**: Display multiple time series bars as segments stacked on top of each other. -->
|
||||
- **Line Colors**: Select a color scheme to use for your graph.
|
||||
- **Shade Area Below Lines**: Shade in the area below the graph lines.
|
||||
- **Hover Dimension**: Select the data to display in the tooltip when you hover over the graph:
|
||||
- **auto** or **X Axis**: Show all points with the same x value along the y-axis.
|
||||
- **Y Axis**: Show all points with the same y value along the x-axis.
|
||||
- **X & Y Axis**: Show only the point currently being hovered over.
|
||||
|
||||
###### X Axis
|
||||
- **Generate X-Axis Tick Marks**: Select the method to generate x-axis tick marks:
|
||||
- **Auto**: Select to automatically generate tick marks.
|
||||
- **Custom**: To customize the number of x-axis tick marks, select this option, and then enter the following:
|
||||
- **Total Tick Marks**: Enter the total number of ticks to display.
|
||||
- **Start Tick Marks At**: Enter the value to start ticks at.
|
||||
- **Tick Mark Interval**: Enter the interval in between each tick.
|
||||
|
||||
###### Y Axis
|
||||
- **Y Axis Label**: Label for the y-axis.
|
||||
- **Y Axis Prefix**: Prefix to be added to y-value.
|
||||
- **Y Axis Suffix**: Suffix to be added to y-value.
|
||||
- **Generate Y-Axis Tick Marks**: Select the method to generate y-axis tick marks:
|
||||
- **Auto**: Select to automatically generate tick marks.
|
||||
- **Custom**: To customize the number of y-axis tick marks, select this option, and then enter the following:
|
||||
- **Total Tick Marks**: Enter the total number of ticks to display.
|
||||
- **Start Tick Marks At**: Enter the value to start ticks at.
|
||||
- **Tick Mark Interval**: Enter the interval in between each tick.
|
||||
- **Y Axis Domain**: The y-axis value range.
|
||||
- **Auto**: Automatically determine the value range based on values in the data set.
|
||||
- **Custom**: Manually specify the minimum y-axis value, maximum y-axis value, or range by including both.
|
||||
- **Min**: Minimum y-axis value.
|
||||
- **Max**: Maximum y-axis value.
|
||||
- **Positioning**:
|
||||
- **Overlaid**: Display graph lines overlaid on each other.
|
||||
- **Stacked**: Display graph lines stacked on top of each other.
|
||||
|
||||
###### Legend
|
||||
- **Hover Legend**:
|
||||
- **Hide**: Hide the legend that appears upon hover.
|
||||
- **Show**: Show the legend upon hover.
|
||||
- **Orientation**: Select the orientation of the legend:
|
||||
- **Horizontal**: Select to display the legend horizontally.
|
||||
- **Vertical**: Select to display the legend vertically.
|
||||
- **Opacity**: Adjust the hover legend opacity using the slider.
|
||||
- **Colorize Rows**: Select to display hover legend rows in colors.
|
||||
- **Static Legend**:
|
||||
- **Hide**: Hide the static legend.
|
||||
- **Show**: Always show the static legend.
|
||||
- **Orientation**: Select the orientation of the legend:
|
||||
- **Horizontal**: Select to display the legend horizontally.
|
||||
- **Vertical**: Select to display the legend vertically.
|
||||
- **Opacity**: Adjust the static legend opacity using the slider.
|
||||
- **Colorize Rows**: Select to display static legend rows in colors.
|
||||
- **Displayed Value**: Select **Latest Y Axis** or **Latest X Axis** to determine whether the y or x axis appears on the legend.
|
||||
- **Height**: Adjust the height of the static legend using the slider.
|
||||
|
||||
## Graph Examples
|
||||
|
||||
##### Graph with linear interpolation
|
||||
{{< img-hd src="/img/influxdb/2-0-visualizations-line-graph-example-8.png" alt="Line Graph example" />}}
|
||||
|
||||
##### Graph with smooth interpolation
|
||||
{{< img-hd src="/img/influxdb/2-0-visualizations-line-graph-smooth-example-8.png" alt="Step-Plot Graph example" />}}
|
||||
|
||||
##### Graph with step interpolation
|
||||
{{< img-hd src="/img/influxdb/2-0-visualizations-line-graph-step-example-8.png" alt="Step-Plot Graph example" />}}
|
||||
|
||||
<!-- ##### Stacked Graph example
|
||||
{{< img-hd src="/img/2-0-visualizations-stacked-graph-example.png" alt="Stacked Graph example" />}} -->
|
||||
|
||||
<!-- ##### Bar Graph example
|
||||
{{< img-hd src="/img/2-0-visualizations-bar-graph-example.png" alt="Bar Graph example" />}} -->
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ To view **Band** controls, click **{{< icon "gear" >}} Customize** next to the v
|
|||
|
||||
###### Legend
|
||||
|
||||
- **Legend Orientation**: Select the orientation of the legend that appears upon hover:
|
||||
- **Orientation**: Select the orientation of the legend:
|
||||
- **Horizontal**: Select to display the legend horizontally.
|
||||
- **Vertical**: Select to display the legend vertically.
|
||||
- **Opacity**: Adjust the legend opacity using the slider.
|
||||
|
|
|
|||
|
|
@ -101,12 +101,13 @@ the visualization dropdown.
|
|||
Choose **Background** for the background of the graph to change color based on the configured thresholds.
|
||||
|
||||
###### Legend
|
||||
- **Legend Orientation**: Select the orientation of the legend that appears upon hover:
|
||||
- **Orientation**: Select the orientation of the legend that appears:
|
||||
- **Horizontal**: Select to display the legend horizontally.
|
||||
- **Vertical**: Select to display the legend vertically.
|
||||
- **Opacity**: Adjust the legend opacity using the slider.
|
||||
- **Colorize Rows**: Select to display legend rows in colors.
|
||||
|
||||
|
||||
## Graph + Single Stat examples
|
||||
The primary use case for the Graph + Single Stat visualization is to show the current or latest
|
||||
value as well as historical values.
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ the visualization dropdown.
|
|||
- **Stacked**: Display graph lines stacked on top of each other.
|
||||
|
||||
###### Legend
|
||||
- **Legend Orientation**: Select the orientation of the legend that appears upon hover:
|
||||
- **Orientation**: Select the orientation of the legend that appears:
|
||||
- **Horizontal**: Select to display the legend horizontally.
|
||||
- **Vertical**: Select to display the legend vertically.
|
||||
- **Opacity**: Adjust the legend opacity using the slider.
|
||||
|
|
|
|||
Loading…
Reference in New Issue