diff --git a/content/v2.0/visualize-data/visualization-types/_index.md b/content/v2.0/visualize-data/visualization-types/_index.md new file mode 100644 index 000000000..b6b713070 --- /dev/null +++ b/content/v2.0/visualize-data/visualization-types/_index.md @@ -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 >}} diff --git a/content/v2.0/visualize-data/visualization-types/gauge.md b/content/v2.0/visualize-data/visualization-types/gauge.md index 30e3e7d52..c09b7a67f 100644 --- a/content/v2.0/visualize-data/visualization-types/gauge.md +++ b/content/v2.0/visualize-data/visualization-types/gauge.md @@ -1,3 +1,15 @@ +--- +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. diff --git a/content/v2.0/visualize-data/visualization-types/graph-single-stat.md b/content/v2.0/visualize-data/visualization-types/graph-single-stat.md index f779b5012..5e9edc1d1 100644 --- a/content/v2.0/visualize-data/visualization-types/graph-single-stat.md +++ b/content/v2.0/visualize-data/visualization-types/graph-single-stat.md @@ -1,3 +1,16 @@ +--- +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. @@ -14,7 +27,7 @@ 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. +- **Y Column**: Select a column to display on the y-axis. ###### Options - **Line Colors**: Select a color scheme to use for your graph. diff --git a/content/v2.0/visualize-data/visualization-types/graph.md b/content/v2.0/visualize-data/visualization-types/graph.md index 37077e971..df07b7018 100644 --- a/content/v2.0/visualize-data/visualization-types/graph.md +++ b/content/v2.0/visualize-data/visualization-types/graph.md @@ -1,3 +1,16 @@ +--- +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 diff --git a/content/v2.0/visualize-data/visualization-types/heatmap.md b/content/v2.0/visualize-data/visualization-types/heatmap.md index 6d318f896..ba7bbbe20 100644 --- a/content/v2.0/visualize-data/visualization-types/heatmap.md +++ b/content/v2.0/visualize-data/visualization-types/heatmap.md @@ -1,4 +1,16 @@ -### Heatmap +--- +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. diff --git a/content/v2.0/visualize-data/visualization-types/histogram.md b/content/v2.0/visualize-data/visualization-types/histogram.md index 8e0487128..c5abef006 100644 --- a/content/v2.0/visualize-data/visualization-types/histogram.md +++ b/content/v2.0/visualize-data/visualization-types/histogram.md @@ -1,3 +1,17 @@ +--- +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. diff --git a/content/v2.0/visualize-data/visualization-types/scatter.md b/content/v2.0/visualize-data/visualization-types/scatter.md index 4d5052e67..886b99f7f 100644 --- a/content/v2.0/visualize-data/visualization-types/scatter.md +++ b/content/v2.0/visualize-data/visualization-types/scatter.md @@ -1,4 +1,17 @@ -The **Scatter** option uses a scatter plot to display time series data. +--- +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" />}} @@ -12,7 +25,7 @@ to the visualization dropdown in the upper right. - **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. +- **Y Column**: Select a column to display on the y-axis. ###### Options - **Color Scheme**: Select a color scheme to use for your scatter plot. diff --git a/content/v2.0/visualize-data/visualization-types/single-stat.md b/content/v2.0/visualize-data/visualization-types/single-stat.md index c98dc1415..f5dafc906 100644 --- a/content/v2.0/visualize-data/visualization-types/single-stat.md +++ b/content/v2.0/visualize-data/visualization-types/single-stat.md @@ -1,3 +1,16 @@ +--- +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" />}} diff --git a/content/v2.0/visualize-data/visualization-types/table.md b/content/v2.0/visualize-data/visualization-types/table.md index 865a96ed5..3449c2bb1 100644 --- a/content/v2.0/visualize-data/visualization-types/table.md +++ b/content/v2.0/visualize-data/visualization-types/table.md @@ -1,3 +1,16 @@ +--- +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. diff --git a/layouts/shortcodes/children.html b/layouts/shortcodes/children.html index f2d948c6f..0ae52a9d0 100644 --- a/layouts/shortcodes/children.html +++ b/layouts/shortcodes/children.html @@ -21,6 +21,17 @@ {{ else }}{{- .Summary | markdownify -}} {{ end -}}

+ {{ if .Params.list_image }} + {{ $img := .Params.list_image }} + {{ if (fileExists ( print "/static" $img )) }} + {{ with (imageConfig ( print "/static" $img )) }} + {{ $imageWidth := div .Width 3 }} + + {{ end }} + {{ else }} + + {{ end }} + {{ end }} {{ end }} {{ else if (eq $type "functions") }}