diff --git a/docs/management/rollups/visualize_rollup_data.asciidoc b/docs/management/rollups/visualize_rollup_data.asciidoc index 3c9100246138d..5f64e4bdd0ac5 100644 --- a/docs/management/rollups/visualize_rollup_data.asciidoc +++ b/docs/management/rollups/visualize_rollup_data.asciidoc @@ -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 diff --git a/docs/visualize.asciidoc b/docs/visualize.asciidoc index 01ec011d02eb1..f117b1a948a76 100644 --- a/docs/visualize.asciidoc +++ b/docs/visualize.asciidoc @@ -44,7 +44,7 @@ locations. [horizontal] <>:: Compute and combine data from multiple time series data sets. -<>:: Visualize time series data using pipeline aggregations. +<>:: Visualize time series data using pipeline aggregations. * *Other* [horizontal] <>:: 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[] diff --git a/docs/visualize/time-series-visual-builder.asciidoc b/docs/visualize/time-series-visual-builder.asciidoc deleted file mode 100644 index 62e016da5f925..0000000000000 --- a/docs/visualize/time-series-visual-builder.asciidoc +++ /dev/null @@ -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"] diff --git a/docs/visualize/tsvb.asciidoc b/docs/visualize/tsvb.asciidoc new file mode 100644 index 0000000000000..b52066a71837d --- /dev/null +++ b/docs/visualize/tsvb.asciidoc @@ -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.