Merge pull request #1750 from influxdata/beta-17-visualization-types

Add band visualization type

content/influxdb/v2.0/visualize-data/visualization-types/band.md

@@ -0,0 +1,73 @@
+---
+title: Band visualization
+list_title: Band
+list_image: /img/influxdb/2-0-visualizations-Band-example.png
+description:
+weight: 206
+menu:
+  influxdb_2_0:
+    name: Band
+    parent: Visualization types
+---
+
+The **Band** visualization displays the upper and lower boundaries for groups of data over time.
+
+{{< img-hd src="/img/influxdb/2-0-visualizations-Band-example.png" alt="Band example" />}}
+
+To view a band chart, select the **Band** option from the visualization dropdown in the upper left.
+
+## 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:
+    - `YYYY-MM-DD HH:mm:ss ZZ`
+    - `DD/MM/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.SSS`
+    - `YYYY/MM/DD HH:mm:ss`
+    - `hh:mm a`
+    - `HH:mm`
+    - `HH:mm:ss`
+    - `HH:mm:ss.sss`
+    - `MMMM D, YYYY HH:mm:ss`
+    - `dddd, MMMM D, YYYY HH:mm:ss`
+
+###### 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**:
+  - **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.
+- **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.
+
+###### 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.
+- **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.

content/influxdb/v2.0/visualize-data/visualization-types/gauge.md

@@ -15,7 +15,7 @@ The **Gauge** visualization displays the most recent value for a time series in
 
 {{< 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.
+Select the **Gauge** option from the visualization dropdown in the upper left.
 
 ## Gauge behavior
 The gauge visualization displays a single numeric data point within a defined spectrum (_default is 0-100_).

content/influxdb/v2.0/visualize-data/visualization-types/graph-single-stat.md

@@ -20,7 +20,7 @@ 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.
+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.
@@ -44,15 +44,35 @@ 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:
+    - `YYYY-MM-DD HH:mm:ss ZZ`
+    - `DD/MM/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.SSS`
+    - `YYYY/MM/DD HH:mm:ss`
+    - `hh:mm a`
+    - `HH:mm`
+    - `HH:mm:ss`
+    - `HH:mm:ss.sss`
+    - `MMMM D, YYYY HH:mm:ss`
+    - `dddd, MMMM D, YYYY HH:mm:ss`
 
 ###### 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.
 
 ###### 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 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.
 - **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.

content/influxdb/v2.0/visualize-data/visualization-types/graph.md

@@ -16,7 +16,7 @@ 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.
+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.
@@ -31,6 +31,18 @@ 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:
+    - `YYYY-MM-DD HH:mm:ss ZZ`
+    - `DD/MM/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.SSS`
+    - `YYYY/MM/DD HH:mm:ss`
+    - `hh:mm a`
+    - `HH:mm`
+    - `HH:mm:ss`
+    - `HH:mm:ss.sss`
+    - `MMMM D, YYYY HH:mm:ss`
+    - `dddd, MMMM D, YYYY HH:mm:ss`
 
 ###### Options
 - **Interpolation**: Select from the following options:
@@ -41,11 +53,15 @@ the visualization dropdown.
   <!-- - **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.
 
 ###### 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 Prefix**: Prefix to be added to y-value.
+- **Y Axis 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.

content/influxdb/v2.0/visualize-data/visualization-types/heatmap.md

@@ -19,7 +19,7 @@ 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.
+Select the **Heatmap** option from the visualization dropdown in the upper left.
 
 ## Heatmap behavior
 Heatmaps divide data points into "bins" – segments of the visualization with upper
@@ -35,6 +35,18 @@ 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:
+    - `YYYY-MM-DD HH:mm:ss ZZ`
+    - `DD/MM/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.SSS`
+    - `YYYY/MM/DD HH:mm:ss`
+    - `hh:mm a`
+    - `HH:mm`
+    - `HH:mm:ss`
+    - `HH:mm:ss.sss`
+    - `MMMM D, YYYY HH:mm:ss`
+    - `dddd, MMMM D, YYYY HH:mm:ss`
 
 ###### Options
 - **Color Scheme**: Select a color scheme to use for your heatmap.

content/influxdb/v2.0/visualize-data/visualization-types/histogram.md

@@ -17,7 +17,7 @@ The y-axis is dedicated to count, and the X-axis is divided into bins.
 
 {{< img-hd src="/img/influxdb/2-0-visualizations-histogram-example.png" alt="Histogram example" />}}
 
-Select the **Histogram** option from the visualization dropdown in the upper right.
+Select the **Histogram** option from the visualization dropdown in the upper left.
 
 ## Histogram behavior
 The Histogram visualization is a bar graph that displays the number of data points

content/influxdb/v2.0/visualize-data/visualization-types/scatter.md

@@ -17,7 +17,7 @@ The **Scatter** view uses a scatter plot to display time series data.
 
 {{< img-hd src="/img/influxdb/2-0-visualizations-scatter-example.png" alt="Scatter plot example" />}}
 
-Select the **Scatter** option from the visualization dropdown in the upper right.
+Select the **Scatter** option from the visualization dropdown in the upper left.
 
 ## Scatter behavior
 The scatter visualization maps each data point to X and Y coordinates.
@@ -35,6 +35,18 @@ the visualization dropdown.
 - **Fill Column**: Define a column containing values that should be differentiated with fill color.
 - **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:
+    - `YYYY-MM-DD HH:mm:ss ZZ`
+    - `DD/MM/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.SSS`
+    - `YYYY/MM/DD HH:mm:ss`
+    - `hh:mm a`
+    - `HH:mm`
+    - `HH:mm:ss`
+    - `HH:mm:ss.sss`
+    - `MMMM D, YYYY HH:mm:ss`
+    - `dddd, MMMM D, YYYY HH:mm:ss`
 
 ###### Options
 - **Color Scheme**: Select a color scheme to use for your scatter plot.

content/influxdb/v2.0/visualize-data/visualization-types/single-stat.md

@@ -15,7 +15,7 @@ The **Single Stat** view displays the most recent value of the specified time se
 
 {{< img-hd src="/img/influxdb/2-0-visualizations-single-stat-example-8.png" alt="Single stat example" />}}
 
-Select the **Single Stat** option from the visualization dropdown in the upper right.
+Select the **Single Stat** option from the visualization dropdown in the upper left.
 
 ## Single Stat behavior
 The Single Stat visualization displays a single numeric data point.

content/influxdb/v2.0/visualize-data/visualization-types/table.md

@@ -17,7 +17,7 @@ sometimes easier to analyze than graph views of data.
 
 {{< img-hd src="/img/influxdb/2-0-visualizations-table-example.png" alt="Table example" />}}
 
-Select the **Table** option from the visualization dropdown in the upper right.
+Select the **Table** option from the visualization dropdown in the upper left.
 
 ## Table behavior
 The table visualization renders queried data in structured, easy-to-read tables.
@@ -32,14 +32,17 @@ the visualization dropdown.
 
 - **Default Sort Field**: Select the default sort field. Default is **time**.
 - **Time Format**: Select the time format. Options include:
-    - `MM/DD/YYYY HH:mm:ss` (default)
+    - `YYYY-MM-DD HH:mm:ss ZZ`
+    - `DD/MM/YYYY HH:mm:ss.sss`
+    - `MM/DD/YYYY HH:mm:ss.sss`
     - `MM/DD/YYYY HH:mm:ss.SSS`
-    - `YYYY-MM-DD HH:mm:ss`
+    - `YYYY/MM/DD HH:mm:ss`
+    - `hh:mm a`
+    - `HH:mm`
     - `HH:mm:ss`
-    - `HH:mm:ss.SSS`
+    - `HH:mm:ss.sss`
     - `MMMM D, YYYY HH:mm:ss`
     - `dddd, MMMM D, YYYY HH:mm:ss`
-    - `Custom`
 - **Decimal Places**: Enter the number of decimal places. Default (empty field) is **unlimited**.
     - **Auto** or **Custom**: Enable or disable auto-setting.