[[TSVB]]
== 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.

[float]
[[tsvb-visualization-types]]
=== Types of TSVB visualizations

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]
[[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>>

[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.