Merge pull request #268 from influxdata/alpha-12

Alpha 12
pull/270/head
Scott Anderson 2019-06-13 14:11:16 -06:00 committed by GitHub
commit f87ed46a4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 455 additions and 328 deletions

View File

@ -27,7 +27,7 @@ This article describes how to get started with InfluxDB OSS. To get started with
### Download and install InfluxDB v2.0 alpha ### Download and install InfluxDB v2.0 alpha
Download InfluxDB v2.0 alpha for macOS. Download InfluxDB v2.0 alpha for macOS.
<a class="btn download" href="https://dl.influxdata.com/influxdb/releases/influxdb_2.0.0-alpha.11_darwin_amd64.tar.gz" download>InfluxDB v2.0 alpha (macOS)</a> <a class="btn download" href="https://dl.influxdata.com/influxdb/releases/influxdb_2.0.0-alpha.12_darwin_amd64.tar.gz" download>InfluxDB v2.0 alpha (macOS)</a>
### Unpackage the InfluxDB binaries ### Unpackage the InfluxDB binaries
Unpackage the downloaded archive. Unpackage the downloaded archive.
@ -36,7 +36,7 @@ _**Note:** The following commands are examples. Adjust the file paths to your ow
```sh ```sh
# Unpackage contents to the current working directory # Unpackage contents to the current working directory
gunzip -c ~/Downloads/influxdb_2.0.0-alpha.11_darwin_amd64.tar.gz | tar xopf - gunzip -c ~/Downloads/influxdb_2.0.0-alpha.12_darwin_amd64.tar.gz | tar xopf -
``` ```
If you choose, you can place `influx` and `influxd` in your `$PATH`. If you choose, you can place `influx` and `influxd` in your `$PATH`.
@ -44,7 +44,7 @@ You can also prefix the executables with `./` to run then in place.
```sh ```sh
# (Optional) Copy the influx and influxd binary to your $PATH # (Optional) Copy the influx and influxd binary to your $PATH
sudo cp influxdb_2.0.0-alpha.11_darwin_amd64/{influx,influxd} /usr/local/bin/ sudo cp influxdb_2.0.0-alpha.12_darwin_amd64/{influx,influxd} /usr/local/bin/
``` ```
{{% note %}} {{% note %}}
@ -90,8 +90,8 @@ influxd --reporting-disabled
### Download and install InfluxDB v2.0 alpha ### Download and install InfluxDB v2.0 alpha
Download the InfluxDB v2.0 alpha package appropriate for your chipset. Download the InfluxDB v2.0 alpha package appropriate for your chipset.
<a class="btn download" href="https://dl.influxdata.com/influxdb/releases/influxdb_2.0.0-alpha.11_linux_amd64.tar.gz" download >InfluxDB v2.0 alpha (amd64)</a> <a class="btn download" href="https://dl.influxdata.com/influxdb/releases/influxdb_2.0.0-alpha.12_linux_amd64.tar.gz" download >InfluxDB v2.0 alpha (amd64)</a>
<a class="btn download" href="https://dl.influxdata.com/influxdb/releases/influxdb_2.0.0-alpha.11_linux_arm64.tar.gz" download >InfluxDB v2.0 alpha (arm)</a> <a class="btn download" href="https://dl.influxdata.com/influxdb/releases/influxdb_2.0.0-alpha.12_linux_arm64.tar.gz" download >InfluxDB v2.0 alpha (arm)</a>
### Place the executables in your $PATH ### Place the executables in your $PATH
Unpackage the downloaded archive and place the `influx` and `influxd` executables in your system `$PATH`. Unpackage the downloaded archive and place the `influx` and `influxd` executables in your system `$PATH`.
@ -100,10 +100,10 @@ _**Note:** The following commands are examples. Adjust the file names, paths, an
```sh ```sh
# Unpackage contents to the current working directory # Unpackage contents to the current working directory
tar xvzf path/to/influxdb_2.0.0-alpha.11_linux_amd64.tar.gz tar xvzf path/to/influxdb_2.0.0-alpha.12_linux_amd64.tar.gz
# Copy the influx and influxd binary to your $PATH # Copy the influx and influxd binary to your $PATH
sudo cp influxdb_2.0.0-alpha.11_linux_amd64/{influx,influxd} /usr/local/bin/ sudo cp influxdb_2.0.0-alpha.12_linux_amd64/{influx,influxd} /usr/local/bin/
``` ```
{{% note %}} {{% note %}}

View File

@ -9,11 +9,30 @@ menu:
--- ---
{{% note %}} {{% note %}}
_The latest release of InfluxDB v2.0 alpha includes **Flux v0.31.0**. _The latest release of InfluxDB v2.0 alpha includes **Flux v0.32.1**.
Though newer versions of Flux may be available, they will not be included with Though newer versions of Flux may be available, they will not be included with
InfluxDB until the next InfluxDB v2.0 release._ InfluxDB until the next InfluxDB v2.0 release._
{{% /note %}} {{% /note %}}
## v0.32.1 [2019-06-10]
### Bug fixes
- Identify memory limit exceeded errors in dispatcher.
## v0.32.0 [2019-06-05]
### Breaking changes
- Remove the control package.
### Bug fixes
- Changelog generator now handles merge commits better.
- Return count of errors when checking AST.
## v0.31.1 [2019-05-29]
### Bug fixes
- Do not call done after calling the function.
## v0.31.0 [2019-05-28] ## v0.31.0 [2019-05-28]
### Breaking changes ### Breaking changes

View File

@ -6,6 +6,15 @@ menu:
name: Release notes name: Release notes
weight: 1 weight: 1
--- ---
## v2.0.0-alpha.12 [2019-06-13]
## Features
- Enable formatting line graph y ticks with binary prefix.
- Add x and y column pickers to graph types.
- Add option to shade area below line graphs.
## Bug Fixes
- Fix performance regression in graph tooltips.
## v2.0.0-alpha.11 [2019-05-31] ## v2.0.0-alpha.11 [2019-05-31]

View File

@ -1,320 +0,0 @@
---
title: Visualization types
description: >
InfluxDB dashboards support multiple visualization types including line graphs,
gauges, tables, and more.
menu:
v2_0:
name: Visualization types
parent: Visualize data
weight: 101
---
The InfluxDB's user interface's (UI) dashboard views support the following visualization types,
which can be selected in the **Visualization Type** selection view of the
[Data Explorer](/v2.0/visualize-data/explore-metrics).
Each of the available visualization types and available user controls are described below.
- [Graph](#graph)
- [Graph + Single Stat](#graph-single-stat)
- [Heatmap](#heatmap)
- [Histogram](#histogram)
- [Single Stat](#single-stat)
- [Gauge](#gauge)
- [Table](#table)
- [Scatter](#scatter)
### Graph
There are several types of graphs you can create.
To select this view, select the **Graph** option from the visualization dropdown
in the upper right.
{{< img-hd src="/img/2-0-visualizations-line-graph-example.png" alt="Line Graph example" />}}
#### Graph controls
To view **Graph** controls, click the settings icon ({{< icon "gear" >}}) next
to the visualization dropdown in the upper right.
###### 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.
###### 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 value range of the y-axis.
- **Min**: Minimum y-axis value.
- **Max**: Maximum y-axis value.
##### Graph with linear interpolation
{{< img-hd src="/img/2-0-visualizations-line-graph-example.png" alt="Line Graph example" />}}
##### Graph with smooth interpolation
{{< img-hd src="/img/2-0-visualizations-line-graph-smooth-example.png" alt="Step-Plot Graph example" />}}
##### Graph with step interpolation
{{< img-hd src="/img/2-0-visualizations-line-graph-step-example.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" />}} -->
### Graph + 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/2-0-visualizations-line-graph-single-stat-example.png" alt="Line Graph + Single Stat example" />}}
To select this view, select the **Graph + Single Stat** option from the visualization
dropdown in the upper right.
#### Graph + Single Stat Controls
To view **Graph + Single Stat** controls, click the settings icon ({{< icon "gear" >}})
next to the visualization dropdown in the upper right.
###### Options
- **Line Colors**: Select a color scheme to use for your graph.
###### 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 value range of the y-axis.
- **Min**: Minimum y-axis value.
- **Max**: Maximum y-axis value.
###### 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.
### Heatmap
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/2-0-visualizations-heatmap-example.png" alt="Heatmap example" />}}
To select this view, select the **Heatmap** option from the visualization dropdown in the upper right.
#### Heatmap Controls
To view **Heatmap** controls, click the settings icon ({{< icon "gear" >}})
next to the visualization dropdown in the upper right.
###### Data
- **X Column**: Select the column to use for the x-axis.
- **Y Column**: Select the column to use for 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 value range of the x-axis.
- **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 value range of the y-axis.
- **Min**: Minimum y-axis value.
- **Max**: Maximum y-axis value.
### Histogram
A histogram is a way to view the distribution of data. Unlike column charts, histograms have no time axis.
The y-axis is dedicated to count, and the x-axis is divided into bins.
{{< img-hd src="/img/2-0-visualizations-histogram-example.png" alt="Histogram example" />}}
To select this view, select the **Histogram** option from the visualization dropdown in the upper right.
#### Histogram Controls
To view **Histogram** controls, click the settings icon ({{< icon "gear" >}}) next
to the visualization dropdown in the upper right.
###### Data
- **Column**: The column to select data from.
- **Group By**: The column to group by.
###### Options
- **Color Scheme**: Select a color scheme to use for your graph.
- **Positioning**: Select **Stacked** to stack groups in a bin on top of each other.
Select **Overlaid** to overlay groups in each bin.
- **Bins**: Enter a number of bins to divide data into or select Auto to automatically
calculate the number of bins.
- **Auto** or **Custom**: Enable or disable auto-setting.
###### X Axis
- **X Axis Label**: Label for the x-axis.
- **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 value range of the x-axis.
- **Min**: Minimum x-axis value.
- **Max**: Maximum x-axis value.
### Single Stat
The **Single Stat** view displays the most recent value of the specified time series as a numerical value.
{{< img-hd src="/img/2-0-visualizations-single-stat-example.png" alt="Single stat example" />}}
To select this view, select the **Single Stat** option from the visualization dropdown in the upper right.
#### Single Stat Controls
To view **Single Stat** controls, click the settings icon ({{< icon "gear" >}})
next to the visualization dropdown in the upper right.
- **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.
### Gauge
The **Gauge** view displays the single value most recent value for a time series in a gauge view.
{{< img-hd src="/img/2-0-visualizations-gauge-example.png" alt="Gauge example" />}}
To select this view, select the **Gauge** option from the visualization dropdown in the upper right.
#### Gauge Controls
To view **Gauge** controls, click the settings icon ({{< icon "gear" >}}) next to
the visualization dropdown in the upper right.
- **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 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.
### Table
The **Table** option displays the results of queries in a tabular view, which is
sometimes easier to analyze than graph views of data.
{{< img-hd src="/img/2-0-visualizations-table-example.png" alt="Table example" />}}
To select this view, select the **Table** option from the visualization dropdown in the upper right.
#### Table Controls
To view **Table** controls, click the settings icon ({{< icon "gear" >}}) next to
the visualization dropdown in the upper right.
- **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)
- `MM/DD/YYYY HH:mm:ss.SSS`
- `YYYY-MM-DD HH:mm:ss`
- `HH:mm:ss`
- `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.
###### Column Settings
- **First Column**: Toggle to **Fixed** to lock the first column so that the listings are always visible.
Threshold settings do not apply in the first column when locked.
- **Table Columns**:
- Enter a new name to rename any of the columns.
- Click the eye icon next to a column to hide it.
- [additional]: Enter name for each additional column.
- Change the order of the columns by dragging to the desired position.
###### Colorized Thresholds
- **Base Color**: Select a base or background color from the selection list.
- **Add a Threshold**: Change the color of the table based on the current value.
- **Value is**: Enter the value at which the table should appear in the selected color.
Choose a color from the dropdown menu next to the value.
### Scatter
The **Scatter** option uses a scatter plot to display time series data.
{{< img-hd src="/img/2-0-visualizations-scatter-example.png" alt="Scatter plot example" />}}
To select this view, select the **Scatter** option from the visualization dropdown in the upper right.
#### Scatter controls
To view **Scatter** controls, click the settings icon ({{< icon "gear" >}}) next
to the visualization dropdown in the upper right.
###### Data
- **Symbol column**: Define a column containing values that should be differentiated with symbols.
- **Fill column**: Define a column containing values that should be differentiated with fill color.
###### Options
- **Color Scheme**: Select a color scheme to use for your scatter plot.
###### X Axis
- **X Axis Label**: Label for the x-axis.
###### 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 value range of the y-axis.
- **Min**: Minimum y-axis value.
- **Max**: Maximum y-axis value.

View File

@ -0,0 +1,17 @@
---
title: Visualization types
description: >
The InfluxDB UI provides multiple visualization types to visualize your data in
a format that makes to the most sense for your use case. Use to available customization
options to customize each visualization.
menu:
v2_0:
parent: Visualize data
weight: 101
---
The InfluxDB UI provides multiple visualization types to visualize your data in
a format that makes to the most sense for your use case. Use to available customization
options to customize each visualization.
{{< children >}}

View File

@ -0,0 +1,34 @@
---
title: Gauge visualization
list_title: Gauge
list_image: /img/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
menu:
v2_0:
name: Gauge
parent: Visualization types
---
The **Gauge** view displays the single value most recent value for a time series in a gauge view.
{{< img-hd src="/img/2-0-visualizations-gauge-example.png" alt="Gauge example" />}}
To select this view, select the **Gauge** option from the visualization dropdown in the upper right.
#### Gauge Controls
To view **Gauge** controls, click the settings icon ({{< icon "gear" >}}) next to
the visualization dropdown in the upper right.
- **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 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.

View File

@ -0,0 +1,58 @@
---
title: Graph + Single Stat visualization
list_title: Graph + Single Stat
list_image: /img/2-0-visualizations-line-graph-single-stat-example.png
description: >
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.
weight: 202
menu:
v2_0:
name: Graph + Single Stat
parent: Visualization types
---
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/2-0-visualizations-line-graph-single-stat-example.png" alt="Line Graph + Single Stat example" />}}
To select this view, select the **Graph + Single Stat** option from the visualization
dropdown in the upper right.
#### Graph + Single Stat Controls
To view **Graph + Single Stat** controls, click the settings icon ({{< icon "gear" >}})
next to the visualization dropdown in the upper right.
###### 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 value range of the y-axis.
- **Min**: Minimum y-axis value.
- **Max**: Maximum y-axis value.
###### 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.

View File

@ -0,0 +1,68 @@
---
title: Graph visualization
list_title: Graph
list_image: /img/2-0-visualizations-line-graph-example.png
description: >
The Graph view lets you select from multiple graph types such as line graphs and bar graphs *(Coming)*.
weight: 201
menu:
v2_0:
name: Graph
parent: Visualization types
---
There are several types of graphs you can create.
To select this view, select the **Graph** option from the visualization dropdown
in the upper right.
{{< img-hd src="/img/2-0-visualizations-line-graph-example.png" alt="Line Graph example" />}}
#### Graph controls
To view **Graph** controls, click the settings icon ({{< icon "gear" >}}) next
to the visualization dropdown in the upper right.
###### 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 value range of the y-axis.
- **Min**: Minimum y-axis value.
- **Max**: Maximum y-axis value.
##### Graph with linear interpolation
{{< img-hd src="/img/2-0-visualizations-line-graph-example.png" alt="Line Graph example" />}}
##### Graph with smooth interpolation
{{< img-hd src="/img/2-0-visualizations-line-graph-smooth-example.png" alt="Step-Plot Graph example" />}}
##### Graph with step interpolation
{{< img-hd src="/img/2-0-visualizations-line-graph-step-example.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" />}} -->

View File

@ -0,0 +1,53 @@
---
title: Heatmap visualization
list_title: Heatmap
list_image: /img/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
menu:
v2_0:
name: Heatmap
parent: Visualization types
---
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/2-0-visualizations-heatmap-example.png" alt="Heatmap example" />}}
To select this view, select the **Heatmap** option from the visualization dropdown in the upper right.
#### Heatmap Controls
To view **Heatmap** controls, click the settings icon ({{< icon "gear" >}})
next to the visualization dropdown in the upper right.
###### 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 value range of the x-axis.
- **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 value range of the y-axis.
- **Min**: Minimum y-axis value.
- **Max**: Maximum y-axis value.

View File

@ -0,0 +1,45 @@
---
title: Histogram visualization
list_title: Histogram
list_image: /img/2-0-visualizations-histogram-example.png
description: >
A histogram is a way to view the distribution of data. Unlike column charts, histograms have no time axis.
The y-axis is dedicated to count, and the x-axis is divided into bins.
weight: 204
menu:
v2_0:
name: Histogram
parent: Visualization types
---
A histogram is a way to view the distribution of data. Unlike column charts, histograms have no time axis.
The y-axis is dedicated to count, and the x-axis is divided into bins.
{{< img-hd src="/img/2-0-visualizations-histogram-example.png" alt="Histogram example" />}}
To select this view, select the **Histogram** option from the visualization dropdown in the upper right.
#### Histogram Controls
To view **Histogram** controls, click the settings icon ({{< icon "gear" >}}) next
to the visualization dropdown in the upper right.
###### Data
- **Column**: The column to select data from.
- **Group By**: The column to group by.
###### Options
- **Color Scheme**: Select a color scheme to use for your graph.
- **Positioning**: Select **Stacked** to stack groups in a bin on top of each other.
Select **Overlaid** to overlay groups in each bin.
- **Bins**: Enter a number of bins to divide data into or select Auto to automatically
calculate the number of bins.
- **Auto** or **Custom**: Enable or disable auto-setting.
###### X Axis
- **X Axis Label**: Label for the x-axis.
- **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 value range of the x-axis.
- **Min**: Minimum x-axis value.
- **Max**: Maximum x-axis value.

View File

@ -0,0 +1,44 @@
---
title: Scatter visualization
list_title: Scatter
list_image: /img/2-0-visualizations-scatter-example.png
description: >
The Scatter view uses a scatter plot to display time series data.
weight: 208
menu:
v2_0:
name: Scatter
parent: Visualization types
---
The **Scatter** view uses a scatter plot to display time series data.
{{< img-hd src="/img/2-0-visualizations-scatter-example.png" alt="Scatter plot example" />}}
To select this view, select the **Scatter** option from the visualization dropdown in the upper right.
#### Scatter controls
To view **Scatter** controls, click the settings icon ({{< icon "gear" >}}) next
to the visualization dropdown in the upper right.
###### Data
- **Symbol column**: Define a column containing values that should be differentiated with symbols.
- **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.
###### Options
- **Color Scheme**: Select a color scheme to use for your scatter plot.
###### X Axis
- **X Axis Label**: Label for the x-axis.
###### 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 value range of the y-axis.
- **Min**: Minimum y-axis value.
- **Max**: Maximum y-axis value.

View File

@ -0,0 +1,36 @@
---
title: Single Stat visualization
list_title: Single stat
list_image: /img/2-0-visualizations-single-stat-example.png
description: >
The Single Stat view displays the most recent value of the specified time series as a numerical value.
weight: 205
menu:
v2_0:
name: Single Stat
parent: Visualization types
---
The **Single Stat** view displays the most recent value of the specified time series as a numerical value.
{{< img-hd src="/img/2-0-visualizations-single-stat-example.png" alt="Single stat example" />}}
To select this view, select the **Single Stat** option from the visualization dropdown in the upper right.
#### Single Stat Controls
To view **Single Stat** controls, click the settings icon ({{< icon "gear" >}})
next to the visualization dropdown in the upper right.
- **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.

View File

@ -0,0 +1,53 @@
---
title: Table visualization
list_title: Single stat
list_image: /img/2-0-visualizations-table-example.png
description: >
The Table option displays the results of queries in a tabular view, which is
sometimes easier to analyze than graph views of data.
weight: 207
menu:
v2_0:
name: Table
parent: Visualization types
---
The **Table** option displays the results of queries in a tabular view, which is
sometimes easier to analyze than graph views of data.
{{< img-hd src="/img/2-0-visualizations-table-example.png" alt="Table example" />}}
To select this view, select the **Table** option from the visualization dropdown in the upper right.
#### Table Controls
To view **Table** controls, click the settings icon ({{< icon "gear" >}}) next to
the visualization dropdown in the upper right.
- **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)
- `MM/DD/YYYY HH:mm:ss.SSS`
- `YYYY-MM-DD HH:mm:ss`
- `HH:mm:ss`
- `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.
###### Column Settings
- **First Column**: Toggle to **Fixed** to lock the first column so that the listings are always visible.
Threshold settings do not apply in the first column when locked.
- **Table Columns**:
- Enter a new name to rename any of the columns.
- Click the eye icon next to a column to hide it.
- [additional]: Enter name for each additional column.
- Change the order of the columns by dragging to the desired position.
###### Colorized Thresholds
- **Base Color**: Select a base or background color from the selection list.
- **Add a Threshold**: Change the color of the table based on the current value.
- **Value is**: Enter the value at which the table should appear in the selected color.
Choose a color from the dropdown menu next to the value.

View File

@ -21,6 +21,17 @@
{{ else }}{{- .Summary | markdownify -}} {{ else }}{{- .Summary | markdownify -}}
{{ end -}} {{ end -}}
</p> </p>
{{ if .Params.list_image }}
{{ $img := .Params.list_image }}
{{ if (fileExists ( print "/static" $img )) }}
{{ with (imageConfig ( print "/static" $img )) }}
{{ $imageWidth := div .Width 3 }}
<img src='{{ $img }}' width='{{ $imageWidth }}' />
{{ end }}
{{ else }}
<img src='{{ $img }}'/>
{{ end }}
{{ end }}
{{ end }} {{ end }}
{{ else if (eq $type "functions") }} {{ else if (eq $type "functions") }}