mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
[DOCS] Changed Visual Builder to TSVB (#39539)
* [DOCS] Changed Visual Builder to TSVB * Reorg of interface changes * Content reorg * Updated image * Added task content * Content conslidation * Final clean up * Comments from Gail
This commit is contained in:
Kaarina Tungseth
GitHub
parent
f41290bec2
commit
94a9b91c8f
4 changed files with 123 additions and 224 deletions
|
|
@ -6,7 +6,7 @@ beta[]
|
|||
|
||||
You can visualize your rolled up data in a variety of charts, tables, maps, and
|
||||
more. Most visualizations support rolled up data, with the exception of
|
||||
Timelion, Visual Builder, and Vega visualizations.
|
||||
Timelion, TSVB, and Vega visualizations.
|
||||
|
||||
You create an index pattern for rolled up data the same way you do for any data,
|
||||
in *Management > Kibana > Index patterns*. Clicking *Create index pattern* includes
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ locations.
|
|||
[horizontal]
|
||||
<<time-series-intro,Timelion>>:: Compute and combine data from multiple time series
|
||||
data sets.
|
||||
<<time-series-visual-builder,Time Series Visual Builder>>:: Visualize time series data using pipeline aggregations.
|
||||
<<TSVB,TSVB>>:: Visualize time series data using pipeline aggregations.
|
||||
* *Other*
|
||||
[horizontal]
|
||||
<<controls,Controls>>:: Controls provide the ability to add interactive inputs to Kibana Dashboards.
|
||||
|
|
@ -158,9 +158,7 @@ include::visualize/tilemap.asciidoc[]
|
|||
|
||||
include::visualize/regionmap.asciidoc[]
|
||||
|
||||
include::visualize/timelion.asciidoc[]
|
||||
|
||||
include::visualize/time-series-visual-builder.asciidoc[]
|
||||
include::visualize/tsvb.asciidoc[]
|
||||
|
||||
include::visualize/tagcloud.asciidoc[]
|
||||
|
||||
|
|
|
|||
|
|
@ -1,219 +0,0 @@
|
|||
[[time-series-visual-builder]]
|
||||
== Time Series Visual Builder
|
||||
|
||||
Time Series Visual Builder is a time series data visualizer with an emphasis
|
||||
on allowing you to use the full power of Elasticsearch aggregation framework.
|
||||
Time Series Visual Builder allows you to combine an infinite number of
|
||||
aggregations and pipeline aggregations to display complex data in a meaningful way.
|
||||
|
||||
image:images/tsvb-screenshot.png["Time Series Visual Builder Interface"]
|
||||
|
||||
[[time-series-visualizations]]
|
||||
=== Featured Visualizations
|
||||
|
||||
Time Series Visual Build comes with 6 different visualization types. You can
|
||||
switch between each visualization type using the tabbed picker at the top of the
|
||||
interface.
|
||||
|
||||
|
||||
==== Time Series
|
||||
|
||||
A histogram visualization that supports area, line, bar, and steps along with
|
||||
multiple y-axis. You can fully customize the colors, points, line thickness
|
||||
and fill opacity. This visualization also supports time shifting to compare two
|
||||
time periods. This visualization also supports annotations which can be loaded from
|
||||
a separate index based on a query.
|
||||
|
||||
image:images/tsvb-screenshot.png["Time Series Visualization"]
|
||||
|
||||
|
||||
==== Metric
|
||||
|
||||
A visualization for displaying the latest number in a series. This visualization
|
||||
supports 2 metrics; a primary metric and a secondary metric. The labels and
|
||||
backgrounds can be fully customizable based on a set of rules.
|
||||
|
||||
image:images/tsvb-metric.png["Metric Visualization"]
|
||||
|
||||
|
||||
==== Top N
|
||||
|
||||
This is a horizontal bar chart where the y-axis is based on a series of metrics
|
||||
and the x-axis is the latest value in those series; sorted in descending order.
|
||||
The color of the bars are fully customizable based on set of rules.
|
||||
|
||||
image:images/tsvb-top-n.png["Top N Visualization"]
|
||||
|
||||
|
||||
==== Gauge
|
||||
|
||||
This is a single value gauge visualization based on the latest value in a series.
|
||||
The face of the gauge can either be a half-circle gauge or full-circle. You
|
||||
can customize the thicknesses of the inner and outer lines to achieve a desired
|
||||
design aesthetic. The color of the gauge and the text are fully customizable based
|
||||
on a set of rules.
|
||||
|
||||
image:images/tsvb-gauge.png["Gauge Visualization"]
|
||||
|
||||
|
||||
==== Markdown
|
||||
|
||||
This visualization allows you to enter Markdown text and embed Mustache
|
||||
template syntax to customize the Markdown with data based on a set of series.
|
||||
|
||||
image:images/tsvb-markdown.png["Markdown Visualization"]
|
||||
|
||||
|
||||
==== Table
|
||||
|
||||
A table visualization allows you to display data from multiple time series.
|
||||
You define which field group to show in the rows and what columns of data to display.
|
||||
|
||||
image:images/tsvb-table.png["Table Visualization"]
|
||||
|
||||
|
||||
[[time-series-interface]]
|
||||
=== Interface Overview
|
||||
|
||||
The user interface for each visualization is compose of a "Data" tab and "Panel
|
||||
Options". The only exception to that is the Time Series and Markdown visualizations;
|
||||
the Time Series has a third tab for annotations and the Markdown has a third tab for
|
||||
the editor.
|
||||
|
||||
==== Data Tab
|
||||
|
||||
The data tab is used for configuring the series for each visualization. This tab
|
||||
allows you to add multiple series, depending on what the visualization
|
||||
supports, with multiple aggregations composed together to create a single metric.
|
||||
Here is a breakdown of the significant components of the data tab UI.
|
||||
|
||||
===== Series Label and Color
|
||||
|
||||
Each series supports a label which will be used for legends and titles depending on
|
||||
which visualization type is selected. For series that are grouped by a term, you
|
||||
can specify a mustache variable of `{{key}}` to substitute the term. For most
|
||||
visualizations you can also choose a color by clicking on the swatch, this will display
|
||||
the color picker.
|
||||
|
||||
image:images/tsvb-data-tab-label.png["Label Example"]
|
||||
|
||||
===== Metrics
|
||||
|
||||
Each series supports multiple metrics (aggregations); the last metric (aggregation)
|
||||
is the value that will be displayed for the series, this is indicated with the "eye"
|
||||
icon to the left of the metric. Metrics can be composed using pipeline aggregations.
|
||||
A common use case is to create a metric with a "max" aggregation then create a "derivative"
|
||||
metric and choose the previous "max" metric as the source; this will create a rate.
|
||||
|
||||
image:images/tsvb-data-tab-derivative-example.png["Derivative Example"]
|
||||
|
||||
===== Series Options
|
||||
|
||||
Each series also supports a set of options which are dependent on the type of
|
||||
visualizations you have selected. Universal across each visualization type
|
||||
you can configure:
|
||||
|
||||
* Data format
|
||||
* Time range offset
|
||||
* Index pattern, timestamp, and interval override
|
||||
|
||||
|
||||
image:images/tsvb-data-tab-series-options.png["Default Series Options"]
|
||||
|
||||
For the Time Series visualization you can also configure:
|
||||
|
||||
* Chart type
|
||||
* Options for each chart type
|
||||
* Legend Visibility
|
||||
* Y-Axis options
|
||||
* Split color theme
|
||||
|
||||
image:images/tsvb-data-tab-series-options-time-series.png["Time Series Series Options"]
|
||||
|
||||
===== Group By Controls
|
||||
|
||||
At the bottom of the metrics there is a set of "Group By" controls that allows you
|
||||
to specify how the series should be grouped or split. There are four choices:
|
||||
|
||||
* Everything
|
||||
* Filter (single)
|
||||
* Filters (multiple with configurable colors)
|
||||
* Terms
|
||||
|
||||
By default the series is grouped by everything.
|
||||
|
||||
==== Panel Options Tab
|
||||
|
||||
The panel options tab is used for configuring the entire panel; the set of options
|
||||
available is dependent on which visualization you have selected. Below is a list
|
||||
of the options available per visualization:
|
||||
|
||||
*Time Series*
|
||||
|
||||
* Index pattern, timestamp, and Interval
|
||||
* Y-Axis min and max
|
||||
* Y-Axis position
|
||||
* Background color
|
||||
* Legend visibility
|
||||
* Legend position
|
||||
* Panel filter
|
||||
|
||||
*Metric*
|
||||
|
||||
* Index pattern, timestamp, and interval
|
||||
* Panel filter
|
||||
* Color rules for background and primary value
|
||||
|
||||
*Top N*
|
||||
|
||||
* Index pattern, timestamp, and interval
|
||||
* Panel filter
|
||||
* Background color
|
||||
* Item URL
|
||||
* Color rules for bar colors
|
||||
|
||||
*Gauge*
|
||||
|
||||
* Index pattern, timestamp, and interval
|
||||
* Panel filter
|
||||
* Background color
|
||||
* Gauge max
|
||||
* Gauge style
|
||||
* Inner gauge color
|
||||
* Inner gauge width
|
||||
* Gauge line width
|
||||
* Color rules for gauge line
|
||||
|
||||
*Markdown*
|
||||
|
||||
* Index pattern, timestamp, and interval
|
||||
* Panel filter
|
||||
* Background color
|
||||
* Scroll bar visibility
|
||||
* Vertical alignment of content
|
||||
* Custom Panel CSS with support for Less syntax
|
||||
|
||||
==== Annotations Tab
|
||||
|
||||
The annotations tab is used for adding annotation data sources to the Time Series
|
||||
Visualization. You can configure the following options:
|
||||
|
||||
* Index pattern and time field
|
||||
* Annotation color
|
||||
* Annotation icon
|
||||
* Fields to include in message
|
||||
* Format of message
|
||||
* Filtering options at the panel and global level
|
||||
|
||||
image:images/tsvb-annotations.png["Annotation Tab"]
|
||||
|
||||
==== Markdown Tab
|
||||
|
||||
The markdown tab is used for editing the source for the Markdown visualization.
|
||||
The user interface has an editor on the left side and the available variables from
|
||||
the data tab on the right side. You can click on the variable names to insert
|
||||
the mustache template variable into the markdown at the cursor position. The mustache
|
||||
syntax uses the Handlebar.js processor which is an extended version of the Mustache
|
||||
template language.
|
||||
|
||||
image:images/tsvb-markdown.png["Markdown Tab"]
|
||||
120
docs/visualize/tsvb.asciidoc
Normal file
120
docs/visualize/tsvb.asciidoc
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
[[TSVB]]
|
||||
== Visualizing your data with TSVB
|
||||
|
||||
TSVB is a time series data visualizer that allows you to use the full power of the
|
||||
Elasticsearch aggregation framework. With TSVB, you can combine an infinite
|
||||
number of aggregations to display complex data.
|
||||
|
||||
NOTE: In Elasticsearch version 7.3.0 and later, the time series data visualizer is now referred to as TSVB instead of Time Series Visual Builder.
|
||||
|
||||
TSVB comes with these types of visualizations:
|
||||
|
||||
Time Series:: A histogram visualization that supports area, line, bar, and steps along with multiple y-axis.
|
||||
|
||||
[role="screenshot"]
|
||||
image:images/tsvb-screenshot.png["Time series visualization"]
|
||||
|
||||
Metric:: A metric that displays the latest number in a data series.
|
||||
|
||||
[role="screenshot"]
|
||||
image:images/tsvb-metric.png["Metric visualization"]
|
||||
|
||||
Top N:: A horizontal bar chart where the y-axis is based on a series of metrics, and the x-axis is the latest value in the series.
|
||||
|
||||
[role="screenshot"]
|
||||
image:images/tsvb-top-n.png["Top N visualization"]
|
||||
|
||||
Gauge:: A single value gauge visualization based on the latest value in a series.
|
||||
|
||||
[role="screenshot"]
|
||||
image:images/tsvb-gauge.png["Gauge visualization"]
|
||||
|
||||
Markdown:: Edit the data using using Markdown text and Mustache template syntax.
|
||||
|
||||
[role="screenshot"]
|
||||
image:images/tsvb-markdown.png["Markdown visualization"]
|
||||
|
||||
Table:: Display data from multiple time series by defining the field group to show in the rows, and the columns of data to display.
|
||||
|
||||
[role="screenshot"]
|
||||
image:images/tsvb-table.png["Table visualization"]
|
||||
|
||||
[float]
|
||||
[[create-tsvb-visualization]]
|
||||
=== Create TSVB visualizations
|
||||
|
||||
To create a TSVB visualization, choose the data series you want to display, then choose how you want to display the data. The options available are dependent on the visualization.
|
||||
|
||||
[float]
|
||||
[[tsvb-data-series-options]]
|
||||
=== Configure the data series
|
||||
|
||||
To create a single metric, add multiple data series with multiple aggregations.
|
||||
|
||||
. Select the visualization type.
|
||||
|
||||
. Specify the data series labels and colors.
|
||||
|
||||
.. Select *Data*.
|
||||
+
|
||||
If you are using the *Table* visualization, select *Columns*.
|
||||
|
||||
.. In the *Label* field, enter a name for the data series, which is used on legends and titles.
|
||||
+
|
||||
For series that are grouped by a term, you can specify a mustache variable of `{{key}}` to substitute the term.
|
||||
|
||||
.. If supported by the visualization, click the swatch and choose a color for the data series.
|
||||
|
||||
.. To add another data series, click *+*, then repeat the steps to specify the labels and colors.
|
||||
|
||||
. Specify the data series metrics.
|
||||
|
||||
.. Select *Metrics*.
|
||||
|
||||
.. From the dropdown lists, choose your options.
|
||||
|
||||
.. To add another metric, click *+*.
|
||||
+
|
||||
When you add more than one metric, the last metric value is displayed, which is indicated by the eye icon.
|
||||
|
||||
. To specify the format and display options, select *Options*.
|
||||
|
||||
. To specify how to group or split the data, choose an option from the *Group by* drop down list.
|
||||
+
|
||||
By default, the data series are grouped by everything.
|
||||
|
||||
[float]
|
||||
[[tsvb-panel-options]]
|
||||
=== Configure the panel
|
||||
|
||||
Change the data that you want to display and choose the style options for the panel.
|
||||
|
||||
. Select *Panel options*.
|
||||
|
||||
. Under *Data*, specify how much of the data that you want to display in the visualization.
|
||||
|
||||
. Under *Style*, specify how you want the visualization to look.
|
||||
|
||||
[float]
|
||||
[[tsvb-add-annotations]]
|
||||
=== Add annotations
|
||||
|
||||
If you are using the Time Series visualization, add annotation data sources.
|
||||
|
||||
. Select *Annotations*.
|
||||
|
||||
. Click *Add data source*, then specify the options.
|
||||
|
||||
[float]
|
||||
[[tsvb-enter-markdown]]
|
||||
=== Enter Markdown text
|
||||
|
||||
Edit the source for the Markdown visualization.
|
||||
|
||||
. Select *Markdown*.
|
||||
|
||||
. In the editor, enter enter your Markdown text, then press Enter.
|
||||
|
||||
. To insert the mustache template variable into the editor, click the variable name.
|
||||
+
|
||||
The http://mustache.github.io/mustache.5.html[mustache syntax] uses the Handlebar.js processor, which is an extended version of the Mustache template language.
|
||||
Loading…
Add table
Add a link
Reference in a new issue