139 lines
4.2 KiB
Plaintext
139 lines
4.2 KiB
Plaintext
[[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]
|
|
[[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.
|
|
|
|
[float]
|
|
[[tsvb-style-markdown]]
|
|
==== Style Markdown text
|
|
|
|
Style your Markdown visualization using http://lesscss.org/features/[less syntax].
|
|
|
|
. Select *Markdown*.
|
|
|
|
. Select *Panel options*.
|
|
|
|
. Enter styling rules in *Custom CSS* section
|
|
+
|
|
Less in TSVB does not support custom plugins or inline JavaScript.
|