2019-07-22 23:00:15 +02:00
[[TSVB]]
2019-08-08 23:17:01 +02:00
== TSVB
2019-07-22 23:00:15 +02:00
2020-01-21 21:01:28 +01:00
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
2019-07-22 23:00:15 +02:00
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.
2019-08-08 23:17:01 +02:00
[float]
[[tsvb-visualization-types]]
=== Types of TSVB visualizations
2019-07-22 23:00:15 +02:00
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"]
2020-01-21 21:01:28 +01:00
[float]
[[tsvb-aggregation]]
=== Supported aggregations
TSVB supports the following aggregations:
* <<visualize-metric-aggregations,Metric>>
* <<visualize-parent-pipeline-aggregations,Parent pipeline>>
* <<visualize-sibling-pipeline-aggregations,Sibling pipeline>>
2019-07-22 23:00:15 +02:00
[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]]
2019-08-08 23:17:01 +02:00
==== Configure the data series
2019-07-22 23:00:15 +02:00
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*.
2020-01-21 21:01:28 +01:00
+
2019-07-22 23:00:15 +02:00
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 *+*.
+
2020-01-21 21:01:28 +01:00
When you add more than one metric, the last metric value is displayed, which is indicated by the eye icon.
2019-07-22 23:00:15 +02:00
. 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]]
2019-08-08 23:17:01 +02:00
==== Configure the panel
2019-07-22 23:00:15 +02:00
Change the data that you want to display and choose the style options for the panel.
. Select *Panel options*.
2020-01-21 21:01:28 +01:00
. Under *Data*, specify how much of the data that you want to display in the visualization.
2019-07-22 23:00:15 +02:00
. Under *Style*, specify how you want the visualization to look.
[float]
[[tsvb-add-annotations]]
2019-08-08 23:17:01 +02:00
==== Add annotations
2019-07-22 23:00:15 +02:00
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]]
2019-08-08 23:17:01 +02:00
==== Enter Markdown text
2019-07-22 23:00:15 +02:00
2020-01-21 21:01:28 +01:00
Edit the source for the Markdown visualization.
2019-07-22 23:00:15 +02:00
. 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.