diff --git a/content/influxdb/cloud/visualize-data/visualization-types/band.md b/content/influxdb/cloud/visualize-data/visualization-types/band.md index 18aa146b3..94bd3a764 100644 --- a/content/influxdb/cloud/visualize-data/visualization-types/band.md +++ b/content/influxdb/cloud/visualize-data/visualization-types/band.md @@ -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. diff --git a/content/influxdb/cloud/visualize-data/visualization-types/graph-single-stat.md b/content/influxdb/cloud/visualize-data/visualization-types/graph-single-stat.md index 20ddc9032..785ce36a9 100644 --- a/content/influxdb/cloud/visualize-data/visualization-types/graph-single-stat.md +++ b/content/influxdb/cloud/visualize-data/visualization-types/graph-single-stat.md @@ -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" />}} diff --git a/content/influxdb/cloud/visualize-data/visualization-types/graph.md b/content/influxdb/cloud/visualize-data/visualization-types/graph.md index 79884d3b0..24a68fc37 100644 --- a/content/influxdb/cloud/visualize-data/visualization-types/graph.md +++ b/content/influxdb/cloud/visualize-data/visualization-types/graph.md @@ -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. + + +- **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" />}} + + + + diff --git a/content/influxdb/v2.0/visualize-data/visualization-types/band.md b/content/influxdb/v2.0/visualize-data/visualization-types/band.md index 5430615fc..13e43c87e 100644 --- a/content/influxdb/v2.0/visualize-data/visualization-types/band.md +++ b/content/influxdb/v2.0/visualize-data/visualization-types/band.md @@ -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. diff --git a/content/influxdb/v2.0/visualize-data/visualization-types/graph-single-stat.md b/content/influxdb/v2.0/visualize-data/visualization-types/graph-single-stat.md index babacc0bc..bf0e21942 100644 --- a/content/influxdb/v2.0/visualize-data/visualization-types/graph-single-stat.md +++ b/content/influxdb/v2.0/visualize-data/visualization-types/graph-single-stat.md @@ -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. diff --git a/content/influxdb/v2.0/visualize-data/visualization-types/graph.md b/content/influxdb/v2.0/visualize-data/visualization-types/graph.md index 3af8f5f2f..3312816da 100644 --- a/content/influxdb/v2.0/visualize-data/visualization-types/graph.md +++ b/content/influxdb/v2.0/visualize-data/visualization-types/graph.md @@ -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.