[DOCS] TSVB and Timelion clean up
This commit is contained in:
KOTungseth
parent
b03c1e1415
commit
1e30a66fe7
|
|
@ -1,5 +1,5 @@
|
|||
[[timelion]]
|
||||
== Visualizing your data with Timelion
|
||||
== Timelion
|
||||
|
||||
Timelion is a time series data visualizer that enables you to combine totally
|
||||
independent data sources within a single visualization. It's driven by a simple
|
||||
|
|
@ -20,13 +20,13 @@ In this tutorial, you'll use the time series data from https://www.elastic.co/gu
|
|||
|
||||
[float]
|
||||
[[time-series-intro]]
|
||||
== Create time series visualizations
|
||||
=== Create time series visualizations
|
||||
|
||||
To compare the real-time percentage of CPU time spent in user space to the results offset by one hour, create a time series visualization.
|
||||
|
||||
[float]
|
||||
[[time-series-define-functions]]
|
||||
=== Define the functions
|
||||
==== Define the functions
|
||||
|
||||
To start tracking the real-time percentage of CPU, enter the following in the *Timelion Expression* field:
|
||||
|
||||
|
|
@ -35,12 +35,13 @@ To start tracking the real-time percentage of CPU, enter the following in the *T
|
|||
.es(index=metricbeat-*, timefield='@timestamp', metric='avg:system.cpu.user.pct')
|
||||
----------------------------------
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-create01.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[time-series-compare-data]]
|
||||
=== Compare the data
|
||||
==== Compare the data
|
||||
|
||||
To compare the two data sets, add another series with data from the previous hour, separated by a comma:
|
||||
|
||||
|
|
@ -51,12 +52,13 @@ To compare the two data sets, add another series with data from the previous hou
|
|||
|
||||
<1> `offset` offsets the data retrieval by a date expression. In this example, `-1h` offsets the data back by one hour.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-create02.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[time-series-add-labels]]
|
||||
=== Add label names
|
||||
==== Add label names
|
||||
|
||||
To easily distinguish between the two data sets, add the label names:
|
||||
|
||||
|
|
@ -67,12 +69,13 @@ To easily distinguish between the two data sets, add the label names:
|
|||
|
||||
<1> `.label()` adds custom labels to the visualization.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-create03.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[time-series-title]]
|
||||
=== Add a title
|
||||
==== Add a title
|
||||
|
||||
Add a meaningful title:
|
||||
|
||||
|
|
@ -83,12 +86,13 @@ Add a meaningful title:
|
|||
|
||||
<1> `.title()` adds a title with a meaningful name. Titles make is easier for unfamiliar users to understand the purpose of the visualization.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-customize01.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[time-series-change-chart-type]]
|
||||
=== Change the chart type
|
||||
==== Change the chart type
|
||||
|
||||
To differentiate between the current hour data and the last hour data, change the chart type:
|
||||
|
||||
|
|
@ -99,12 +103,13 @@ To differentiate between the current hour data and the last hour data, change th
|
|||
|
||||
<1> `.lines()` changes the appearance of the chart lines. In this example, `.lines(fill=1,width=0.5)` sets the fill level to `1`, and the border width to `0.5`.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-customize02.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[time-series-change-color]]
|
||||
=== Change the line colors
|
||||
==== Change the line colors
|
||||
|
||||
To make the current hour data stand out, change the line colors:
|
||||
|
||||
|
|
@ -115,12 +120,13 @@ To make the current hour data stand out, change the line colors:
|
|||
|
||||
<1> `.color()` changes the color of the data. Supported color types include standard color names, hexadecimal values, or a color schema for grouped data. In this example, `.color(gray)` represents the last hour, and `.color(#1E90FF)` represents the current hour.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-customize03.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[time-series-adjust-legend]]
|
||||
=== Make adjustments to the legend
|
||||
==== Make adjustments to the legend
|
||||
|
||||
Change the position and style of the legend:
|
||||
|
||||
|
|
@ -131,18 +137,19 @@ Change the position and style of the legend:
|
|||
|
||||
<1> `.legend()` sets the position and style of the legend. In this example, `.legend(columns=2, position=nw)` places the legend in the north west position of the visualization with two columns.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-customize04.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[mathematical-functions-intro]]
|
||||
== Create visualizations with mathematical functions
|
||||
=== Create visualizations with mathematical functions
|
||||
|
||||
To create a visualization for inbound and outbound network traffic, use mathematical functions.
|
||||
|
||||
[float]
|
||||
[[mathematical-functions-define-functions]]
|
||||
=== Define the functions
|
||||
==== Define the functions
|
||||
|
||||
To start tracking the inbound and outbound network traffic, enter the following in the *Timelion Expression* field:
|
||||
|
||||
|
|
@ -151,12 +158,13 @@ To start tracking the inbound and outbound network traffic, enter the following
|
|||
.es(index=metricbeat*, timefield=@timestamp, metric=max:system.network.in.bytes)
|
||||
----------------------------------
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-math01.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[mathematical-functions-plot-change]]
|
||||
=== Plot the rate of change
|
||||
==== Plot the rate of change
|
||||
|
||||
Change how the data is displayed so that you can easily monitor the inbound traffic:
|
||||
|
||||
|
|
@ -167,6 +175,7 @@ Change how the data is displayed so that you can easily monitor the inbound traf
|
|||
|
||||
<1> `.derivative` plots the change in values over time.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-math02.png[]
|
||||
{nbsp}
|
||||
|
||||
|
|
@ -179,12 +188,13 @@ Add a similar calculation for outbound traffic:
|
|||
|
||||
<1> `.multiply()` multiplies the data series by a number, the result of a data series, or a list of data series. For this example, `.multiply(-1)` converts the outbound network traffic to a negative value since the outbound network traffic is leaving your machine.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-math03.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[mathematical-functions-convert-data]]
|
||||
=== Change the data metric
|
||||
==== Change the data metric
|
||||
|
||||
To make the visualization easier to analyze, change the data metric from bytes to megabytes:
|
||||
|
||||
|
|
@ -195,12 +205,13 @@ To make the visualization easier to analyze, change the data metric from bytes t
|
|||
|
||||
<1> `.divide()` accepts the same input as `.multiply()`, then divides the data series by the defined divisor.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-math04.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[mathematical-functions-add-labels]]
|
||||
=== Customize and format the visualization
|
||||
==== Customize and format the visualization
|
||||
|
||||
Customize and format the visualization using functions:
|
||||
|
||||
|
|
@ -215,12 +226,13 @@ Customize and format the visualization using functions:
|
|||
<4> `.color()` changes the color of the data. Supported color types include standard color names, hexadecimal values, or a color schema for grouped data. In this example, `.color(green)` represents the inbound network traffic, and `.color(blue)` represents the outbound network traffic.
|
||||
<5> `.legend()` sets the position and style of the legend. For this example, `legend(columns=2, position=nw)` places the legend in the north west position of the visualization with two columns.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-math05.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[timelion-conditional-intro]]
|
||||
== Create visualizations with conditional logic and tracking trends
|
||||
=== Create visualizations with conditional logic and tracking trends
|
||||
|
||||
To easily detect outliers and discover patterns over time, modify time series data with conditional logic and create a trend with a moving average.
|
||||
|
||||
|
|
@ -236,7 +248,7 @@ With Timelion conditional logic, you can use the following operator values to co
|
|||
|
||||
[float]
|
||||
[[conditional-define-functions]]
|
||||
=== Define the functions
|
||||
==== Define the functions
|
||||
|
||||
To chart the maximum value of `system.memory.actual.used.bytes`, enter the following in the *Timelion Expression* field:
|
||||
|
||||
|
|
@ -245,12 +257,13 @@ To chart the maximum value of `system.memory.actual.used.bytes`, enter the follo
|
|||
.es(index=metricbeat-*, timefield='@timestamp', metric='max:system.memory.actual.used.bytes')
|
||||
----------------------------------
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-conditional01.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[conditional-track-memory]]
|
||||
=== Track used memory
|
||||
==== Track used memory
|
||||
|
||||
To track the amount of memory used, create two thresholds:
|
||||
|
||||
|
|
@ -262,12 +275,13 @@ To track the amount of memory used, create two thresholds:
|
|||
<1> Timelion conditional logic for the _greater than_ operator. In this example, the warning threshold is 11.3GB (`11300000000`), and the severe threshold is 11.375GB (`11375000000`). If the threshold values are too high or low for your machine, adjust the values accordingly.
|
||||
<2> `if()` compares each point to a number. If the condition evaluates to `true`, adjust the styling. If the condition evaluates to `false`, use the default styling.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-conditional02.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[conditional-determine-trend]]
|
||||
=== Determine the trend
|
||||
==== Determine the trend
|
||||
|
||||
To determine the trend, create a new data series:
|
||||
|
||||
|
|
@ -278,12 +292,13 @@ To determine the trend, create a new data series:
|
|||
|
||||
<1> `mvavg()` calculates the moving average over a specified period of time. In this example, `.mvavg(10)` creates a moving average with a window of 10 data points.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-conditional03.png[]
|
||||
{nbsp}
|
||||
|
||||
[float]
|
||||
[[conditional-format-visualization]]
|
||||
=== Customize and format the visualization
|
||||
==== Customize and format the visualization
|
||||
|
||||
Customize and format the visualization using functions:
|
||||
|
||||
|
|
@ -298,6 +313,7 @@ Customize and format the visualization using functions:
|
|||
<4> `.lines()` changes the appearance of the chart lines. In this example, .lines(width=5) sets border width to `5`.
|
||||
<5> `.legend()` sets the position and style of the legend. For this example, `(columns=4, position=nw)` places the legend in the north west position of the visualization with four columns.
|
||||
|
||||
[role="screenshot"]
|
||||
image::images/timelion-conditional04.png[]
|
||||
{nbsp}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[[TSVB]]
|
||||
== Visualizing your data with 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
|
||||
|
|
@ -7,6 +7,10 @@ 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.
|
||||
|
|
@ -47,7 +51,7 @@ To create a TSVB visualization, choose the data series you want to display, then
|
|||
|
||||
[float]
|
||||
[[tsvb-data-series-options]]
|
||||
=== Configure the data series
|
||||
==== Configure the data series
|
||||
|
||||
To create a single metric, add multiple data series with multiple aggregations.
|
||||
|
||||
|
|
@ -85,7 +89,7 @@ By default, the data series are grouped by everything.
|
|||
|
||||
[float]
|
||||
[[tsvb-panel-options]]
|
||||
=== Configure the panel
|
||||
==== Configure the panel
|
||||
|
||||
Change the data that you want to display and choose the style options for the panel.
|
||||
|
||||
|
|
@ -97,7 +101,7 @@ Change the data that you want to display and choose the style options for the pa
|
|||
|
||||
[float]
|
||||
[[tsvb-add-annotations]]
|
||||
=== Add annotations
|
||||
==== Add annotations
|
||||
|
||||
If you are using the Time Series visualization, add annotation data sources.
|
||||
|
||||
|
|
@ -107,7 +111,7 @@ If you are using the Time Series visualization, add annotation data sources.
|
|||
|
||||
[float]
|
||||
[[tsvb-enter-markdown]]
|
||||
=== Enter Markdown text
|
||||
==== Enter Markdown text
|
||||
|
||||
Edit the source for the Markdown visualization.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue