Skip to content

Commit

Permalink
InfluxDB 2.0.5 additions (#2449)
Browse files Browse the repository at this point in the history 
* InfluxDB 2.0.5 release notes

* Apply suggestions from code review

Co-authored-by: kelseiv <[email protected]>

* updated influxdb 2.0.5 release notes to address PR feedback

* last minute additiosn to 2.0.5 release notes

* last minute updates to oss, closes #2306, closes 1825

* deduped viz type content

* added missing viz options

Co-authored-by: kelseiv <[email protected]>
  • Loading branch information
@sanderson @kelseiv
sanderson and kelseiv authored Apr 27, 2021
1 parent c34bdfd commit 331ec2e
Show file tree
Hide file tree
Showing 23 changed files with 149 additions and 677 deletions.
5 changes: 5 additions & 0 deletions content/influxdb/cloud/visualize-data/dashboards/control-dashboard.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ Click the timezone dropdown to select a timezone to use for the dashboard. Selec

Click the refresh button (**{{< icon "refresh" >}}**) to manually refresh the dashboard's data.

#### Refresh a single dashboard cell

1. Click the **{{< icon "gear" >}}** on the dashboard cell you want to refresh.
2. Click **{{< icon "refresh" >}} Refresh**.

### Select time range

1. Select from the time range options in the dropdown menu.
Expand Down
4 changes: 2 additions & 2 deletions content/influxdb/cloud/visualize-data/visualization-types/band.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Band Plot visualization
title: Band visualization
list_title: Band
list_image: /img/influxdb/2-0-visualizations-Band-example.png
description:
weight: 206
weight: 201
menu:
influxdb_cloud:
name: Band
Expand Down
57 changes: 2 additions & 55 deletions content/influxdb/cloud/visualize-data/visualization-types/gauge.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,64 +4,11 @@ list_title: Gauge
list_image: /img/influxdb/2-0-visualizations-gauge-example.png
description: >
The Gauge view displays the single value most recent value for a time series in a gauge view.
weight: 206
weight: 201
menu:
influxdb_cloud:
name: Gauge
parent: Visualization types
---

The **Gauge** visualization displays the most recent value for a time series in a gauge.

{{< img-hd src="/img/influxdb/2-0-visualizations-gauge-example-8.png" alt="Gauge example" />}}

Select the **Gauge** option from the visualization dropdown in the upper right.

## Gauge behavior
The gauge visualization displays a single numeric data point within a defined spectrum (_default is 0-100_).
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 Gauge displaying inconsistent data.
For consistent results, the Gauge query should return a single table.
{{% /note %}}

## Gauge Controls
To view **Gauge** controls, click **{{< icon "gear" >}} Customize** next to
the visualization dropdown.

- **Prefix**: Prefix to add to the gauge.
- **Suffix**: Suffix to add to the gauge.
- **Decimal Places**: The number of decimal places to display for the gauge.
- **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 gauge based on the current value.
- **Value is**: Enter the value at which the gauge should appear in the selected color.
Choose a color from the dropdown menu next to the value.

## Gauge examples
Gauge visualizations are useful for showing the current value of a metric and displaying
where it falls within a spectrum.

### Steam pressure gauge
The following example queries sensor data that tracks the pressure of steam pipes
in a facility and displays it as a gauge.

###### Query pressure data from a specific sensor
```js
from(bucket: "example-bucket")
|> range(start: -1m)
|> filter(fn: (r) =>
r._measurement == "steam-sensors" and
r._field == "psi"
r.sensorID == "a211i"
)
```

###### Visualization options for pressure gauge
{{< img-hd src="/img/influxdb/2-0-visualizations-gauge-pressure-8.png" alt="Pressure guage example" />}}
{{< duplicate-oss >}}
80 changes: 1 addition & 79 deletions content/influxdb/cloud/visualize-data/visualization-types/graph-single-stat.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,82 +15,4 @@ related:
- /influxdb/cloud/visualize-data/visualization-types/single-stat
---

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 right.

## 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.

###### Options
- **Line Colors**: Select a color scheme to use for your graph.
- **Shade Area Below Lines**: Shade in the area below the graph lines.

###### Y Axis
- **Y Axis Label**: Label for the y-axis.
- **Y Tick Prefix**: Prefix to be added to y-value.
- **Y Tick Suffix**: Suffix to be added to y-value.
- **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.

## 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" />}}
{{< duplicate-oss >}}
62 changes: 1 addition & 61 deletions content/influxdb/cloud/visualize-data/visualization-types/graph.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,64 +11,4 @@ menu:
parent: Visualization types
---

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 right.

## 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.

###### 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.

###### Y Axis
- **Y Axis Label**: Label for the y-axis.
- **Y Tick Prefix**: Prefix to be added to y-value.
- **Y Tick Suffix**: Suffix to be added to y-value.
- **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.


## 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" />}} -->
{{< duplicate-oss >}}
102 changes: 2 additions & 100 deletions content/influxdb/cloud/visualize-data/visualization-types/heatmap.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ list_image: /img/influxdb/2-0-visualizations-heatmap-example.png
description: >
A Heatmap displays the distribution of data on an x and y axes where color
represents different concentrations of data points.
weight: 203
weight: 202
menu:
influxdb_cloud:
name: Heatmap
Expand All @@ -14,102 +14,4 @@ related:
- /influxdb/cloud/visualize-data/visualization-types/scatter
---

A **Heatmap** displays the distribution of data on an x and y axes where color
represents different concentrations of data points.

{{< img-hd src="/img/influxdb/2-0-visualizations-heatmap-example.png" alt="Heatmap example" />}}

Select the **Heatmap** option from the visualization dropdown in the upper right.

## Heatmap behavior
Heatmaps divide data points into "bins" – segments of the visualization with upper
and lower bounds for both [X and Y axes](#data).
The [Bin Size option](#options) determines the bounds for each bin.
The total number of points that fall within a bin determine the its value and color.
Warmer or brighter colors represent higher bin values or density of points within the bin.

## Heatmap Controls
To view **Heatmap** 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.

###### Options
- **Color Scheme**: Select a color scheme to use for your heatmap.
- **Bin Size**: Specify the size of each bin. Default is 10.

###### X Axis
- **X Axis Label**: Label for the x-axis.
- **X Tick Prefix**: Prefix to be added to x-value.
- **X Tick Suffix**: Suffix to be added to x-value.
- **X Axis Domain**: The x-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 x-axis value.
- **Max**: Maximum x-axis value.

###### Y Axis
- **Y Axis Label**: Label for the y-axis.
- **Y Tick Prefix**: Prefix to be added to y-value.
- **Y Tick Suffix**: Suffix to be added to y-value.
- **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.

## Heatmap examples

### Cross-measurement correlation
The following example explores possible correlation between CPU and Memory usage.
It uses data collected with the Telegraf [Mem](/{{< latest "telegraf" >}}/plugins//#mem)
and [CPU](/{{< latest "telegraf" >}}/plugins//#cpu) input plugins.

###### Join CPU and memory usage
The following query joins CPU and memory usage on `_time`.
Each row in the output table contains `_value_cpu` and `_value_mem` columns.

```js
cpu = from(bucket: "example-bucket")
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|> filter(fn: (r) =>
r._measurement == "cpu" and
r._field == "usage_system" and
r.cpu == "cpu-total"
)

mem = from(bucket: "example-bucket")
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|> filter(fn: (r) =>
r._measurement == "mem" and
r._field == "used_percent"
)

join(tables: {cpu: cpu, mem: mem}, on: ["_time"], method: "inner")
```

###### Use a heatmap to visualize correlation
In the Heatmap visualization controls, `_value_cpu` is selected as the [X Column](#data)
and `_value_mem` is selected as the [Y Column](#data).
The domain for each axis is also customized to account for the scale difference
between column values.

{{< img-hd src="/img/influxdb/2-0-visualizations-heatmap-correlation.png" alt="Heatmap correlation example" />}}


## Important notes

### Differences between a heatmap and a scatter plot
Heatmaps and [Scatter plots](/influxdb/cloud/visualize-data/visualization-types/scatter/)
both visualize the distribution of data points on X and Y axes.
However, in certain cases, heatmaps provide better visibility into point density.

For example, the dashboard cells below visualize the same query results:

{{< img-hd src="/img/influxdb/2-0-visualizations-heatmap-vs-scatter.png" alt="Heatmap vs Scatter plot" />}}

The heatmap indicates isolated high point density, which isn't visible in the scatter plot.
In the scatter plot visualization, points that share the same X and Y coordinates
appear as a single point.
{{< duplicate-oss >}}
Loading

0 comments on commit 331ec2e

Please sign in to comment.