maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'KOTungseth-docs/dashboard'

Browse source
This commit is contained in:
KOTungseth 2020-12-07 12:00:42 -06:00
parent 4a44804041 0668571182
commit a1116af74b
17 changed files with 935 additions and 1184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
docs/canvas/canvas-elements.asciidoc
View file

@ -1,167 +0,0 @@
[role="xpack"]
[[add-canvas-elements]]
=== Add elements
Create a story about your data by adding elements to your workpad that include images, text, charts, and more. You can create your own elements and connect them to your data sources, add saved objects, and add your own images.
[float]
[[create-canvas-element]]
==== Create an element
Choose the type of element you want to use, then connect it to your own data.
. Click *Add element*, then select the element you want to use.
+
[role="screenshot"]
image::images/canvas-element-select.gif[Canvas elements]
. To familiarize yourself with the element, use the preconfigured data demo data.
+
By default, most of the elements you create use demo data until you change the data source. The demo data includes a small data set that you can use to experiment with your element.
. To connect the element to your data, select *Data*, then select one of the following data sources:
* *{es} SQL* — Access your data in {es} using SQL syntax. For information about SQL syntax, refer to {ref}/sql-spec.html[SQL language].
* *{es} documents* &mdash; Access your data in {es} without using aggregations. To use, select an index and fields, and optionally enter a query using the <<lucene-query,Lucene Query Syntax>>. Use the *{es} documents* data source when you have low volume datasets, to view raw documents, or to plot exact, non-aggregated values on a chart.
* *Timelion* &mdash; Access your time series data using <<timelion,Timelion>> queries. To use Timelion queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
Each element can display a different data source. Pages and workpads often contain multiple data sources.
[float]
[[canvas-add-object]]
==== Add a saved object
Add <<managing-saved-objects,saved objects>> to your workpad, such as maps and visualizations.
. Click *Add element > Add from Visualize Library*.
. Select the saved object you want to add.
+
[role="screenshot"]
image::images/canvas-map-embed.gif[]
. To use the customization options, click the panel menu, then select one of the following options:
* *Edit map* &mdash; Opens <<maps,Maps>> or <<create-panels,Dashboard>> so that you can edit the original saved object.
* *Edit panel title* &mdash; Adds a title to the saved object.
* *Customize time range* &mdash; Exposes a time filter dedicated to the saved object.
* *Inspect* &mdash; Allows you to drill down into the element data.
[float]
[[canvas-add-image]]
==== Add your own image
To personalize your workpad, add your own logos and graphics.
. Click *Add element > Manage assets*.
. On the *Manage workpad assets* window, drag and drop your images.
. To add the image to the workpad, click the *Create image element* icon.
+
[role="screenshot"]
image::images/canvas-add-image.gif[]
[float]
[[move-canvas-elements]]
==== Organize elements
Move and resize your elements to meet your design needs.
* To move, click and hold the element, then drag to the new location.
* To move by 1 pixel, select the element, press and hold Shift, then use your arrow keys.
* To move by 10 pixels, select the element, then use your arrow keys.
* To resize, click and drag the resize handles to the new dimensions.
[float]
[[format-canvas-elements]]
==== Format elements
For consistency and readability across your workpad pages, align, distribute, and reorder elements.
To align two or more elements:
. Press and hold Shift, then select the elements you want to align.
. Click *Edit > Alignment*, then select the alignment option.
To distribute three or more elements:
. Press and hold Shift, then select the elements you want to distribute.
. Click *Edit > Distribution*, then select the distribution option.
To reorder elements:
. Select the element you want to reorder.
. Click *Edit > Order*, then select the order option.
[float]
[[data-display]]
==== Change the element display options
Each element has its own display options to fit your design needs.
To choose the display options, click *Display*, then make your changes.
To define the appearance of the container and border:
. Next to *Element style*, click *+*, then select *Container style*.
. Expand *Container style*.
. Change the *Appearance* and *Border* options.
To apply CSS overrides:
. Next to *Element style*, click *+*, then select *CSS*.
. Enter the *CSS*.
+
For example, to center the Markdown element, enter:
+
[source,text]
--------------------------------------------------
.canvasRenderEl h1 {
text.align: center;
}
--------------------------------------------------
. Click *Apply stylesheet*.
[float]
[[save-elements]]
==== Save elements
To use the elements across all workpads, save the elements.
When you're ready to save your element, select the element, then click *Edit > Save as new element*.
[role="screenshot"]
image::images/canvas_save_element.png[]
To save a group of elements, press and hold Shift, select the elements you want to save, then click *Edit > Save as new element*.
To access your saved elements, click *Add element > My elements*.
[float]
[[delete-elements]]
==== Delete elements
When you no longer need an element, delete it from your workpad.
. Select the element you want to delete.
. Click *Edit > Delete*.
+
[role="screenshot"]
image::images/canvas_element_options.png[]

4
docs/getting-started/quick-start-guide.asciidoc
View file

@ -106,7 +106,7 @@ For more information, refer to <<dashboard,*Dashboard*>>.
[[create-a-visualization]]
=== Create a visualization panel
To create a treemap panel that shows the top regions and manufacturers, use *Lens*, then add the treemap panel to the dashboard.
Create a treemap panel that shows the top regions and manufacturers, then add the panel to the dashboard.
. From the toolbar, click *Edit*, then click *Create new*.
@ -132,7 +132,7 @@ The treemap appears as the last visualization panel on the dashboard.
[role="screenshot"]
image::getting-started/images/tutorial-final-dashboard.gif[Final dashboard with new treemap visualization]
+
For more information, refer to <<lens, *Lens*>>.
For more information, refer to <<dashboard,Dashboard>>.
[float]
[[quick-start-whats-next]]

5
docs/redirects.asciidoc
View file

@ -96,11 +96,6 @@ More information on this new feature is available in <<apm-alerts>>.
This content has moved to the <<development-rbac, Security>> page.
[role="exclude",id="TSVB"]
== TSVB
This page was deleted. See <<tsvb>>.
[role="exclude",id="managing-cross-cluster-replication"]
== Cross-Cluster Replication

64
docs/user/dashboard/advanced-editors.asciidoc Normal file
View file

@ -0,0 +1,64 @@
[[add-panels-with-advanced-editors]]
== Add panels with advanced editors
{kib} provides you with three advanced editors that you can use to create dashboard panels.
[float]
[[tsvb-advanced-editor]]
=== TSVB
A time series data visualization builder that allows you to use the full power of the Elasticsearch aggregation framework. To use *TSVB*,
you can combine an infinite number of <<aggregation-reference,aggregations>> to display your data.
With *TSVB*, you can:
* Create visualizations, data tables, and markdown panels.
* Create visualizations with multiple indices.
* Change the aggregations and labels to customize the data.
image::images/tsvb.png[TSVB UI]
[float]
[[vega-advanced-editor]]
=== Vega
Build custom visualizations using *Vega* and *Vega-Lite*, backed by one or more data sources including {es}, Elastic Map Service,
URL, or static data. Use the {kib} extensions to embed *Vega* in your dashboard, and add interactive tools. With *Vega*, then types of
visualizations you can create are endless.
Use *Vega* and *Vega-Lite* when you want to create a visualization for:
* Aggregations that use `nested` or `parent/child` mapping
* Aggregations without an index pattern
* Queries that use custom time filters
* Complex calculations
* Extracting data from _source instead of aggregations
* Scatter charts, sankey charts, and custom maps
* Using an unsupported visual theme
*Vega* and *Vega-Lite* are declarative formats that:
* Create complex visualizations
* Use JSON and a different syntax for declaring visualizations
* Are not fully interchangeable
image::images/vega.png[Vega UI]
[float]
[[timelion-advanced-editor]]
=== Timelion
Displays your data along a scale that changes color according to where your data falls on the expected scale. Use the gauge to show how metric
values relate to reference threshold values, or determine how a specified field is performing versus how it is expected to perform.
*Timelion* is driven by a simple expression language that you use to:
* Retrieve time series data
* Perform calculation to tease out the answers to complex questions
* Visualize the results
image:images/gauge.png[Gauge]
include::tsvb.asciidoc[]
include::vega.asciidoc[]
include::timelion.asciidoc[]

163
docs/user/dashboard/aggregation-based.asciidoc Normal file
View file

@ -0,0 +1,163 @@
[[add-aggregation-based-visualization-panels]]
== Add aggregation-based visualization panels
Aggregation-based visualization panels allow you to visualize aggregated data from a <<save-open-search,saved search>> or <<index-patterns, index pattern>>.
[float]
[[types-of-visualization-panels]]
=== Types of aggregation-based panels
{kib} supports the following types of aggregation-based panels.
[cols="50, 50"]
|===
a| *Area*
Displays data points, connected by a line, where the area between the line and axes are shaded.
Use area charts to compare two or more categories over time, and display the magnitude of trends.
| image:images/area.png[Area chart]
a| *Data table*
Displays your raw data or aggregation results in a tabular format. Use data tables to display server configuration details, track counts, min,
or max values for a specific field, and monitor the status of key services.
| image:images/data_table.png[Data table]
a| *Gauge*
Displays your data along a scale that changes color according to where your data falls on the expected scale. Use the gauge to show how metric
values relate to reference threshold values, or determine how a specified field is performing versus how it is expected to perform.
| image:images/gauge.png[Gauge]
a| *Goal*
Displays how your metric progresses toward a fixed goal. Use the goal to display an easy to read visual of the status of your goal progression.
| image:images/goal.png[Goal]
a| *Heat map*
Displays graphical representations of data where the individual values are represented by colors. Use heat maps when your data set includes
categorical data. For example, use a heat map to see the flights of origin countries compared to destination countries using the sample flight data.
| image:images/heat_map.png[Heat map]
a| *Horizontal Bar*
Displays bars side-by-side where each bar represents a category. Use bar charts to compare data across a
large number of categories, display data that includes categories with negative values, and easily identify
the categories that represent the highest and lowest values. {kib} also supports vertical bar charts.
| image:images/bar.png[Bar chart]
a| *Line*
Displays data points that are connected by a line. Use line charts to visualize a sequence of values, discover
trends over time, and forecast future values.
| image:images/line.png[Line chart]
a| *Metric*
Displays a single numeric value for an aggregation. Use the metric visualization when you have a numeric value that is powerful enough to tell
a story about your data.
| image:images/metric.png[Metric]
a| *Pie*
Displays slices that represent a data category, where the slice size is proportional to the quantity it represents.
Use pie charts to show comparisons between multiple categories, illustrate the dominance of one category over others,
and show percentage or proportional data.
| image:images/pie.png[Pie chart]
a| *Tag cloud*
Graphical representations of how frequently a word appears in the source text. Use tag clouds to easily produce a summary of large documents and
create visual art for a specific topic.
| image:images/tag_cloud.png[Tag cloud]
|===
[float]
[[create-aggregation-based-panel]]
=== Create an aggregation-based visualization panel
Choose the type of visualization panel you want to create, then use the editor to configure the visualization. Each visualization supports different options.
. Make sure you have {ref}/getting-started-index.html[data indexed into {es}] and an <<index-patterns,index pattern>>.
. Click *Create new*, then click *Aggregation based* on the *New visualization* window.
.. Click the type of visualization panel you want to create.
.. Click the data source you want to visualize.
. From the editor, add the <<aggregation-reference,aggregations>> you want to visualize, then click *Update*.
. To change the order, drag the aggregations along the editor.
+
[role="screenshot"]
image:images/bar-chart-tutorial-3.png[Option to change the order of aggregations]
. To customize the series colors, click the series in the legend, then select the color you want to use.
+
[role="screenshot"]
image:images/aggregation-based-color-picker.png[Color picker]
[float]
[[try-it-aggregation-based-panel]]
=== Try it: Create an aggregation-based bar chart
Create a bar chart that display the top five log traffic sources for every three hours.
. Add the <<get-started,sample web logs data>>.
. Click *Create new*.
.. On the *New visualization* window, click *Aggregation based > Vertical Bar*.
.. On the *Choose a source* window, click *kibana_sample_data_logs*.
. Change the <<set-time-filter, date time filter>>> to *Last 7 days*.
[float]
[[tutorial-configure-the-bar-chart]]
==== Configure the bar chart
To specify the bar chart options, use the editor.
. Add a *Buckets* aggregation.
.. Click *Add*, then select *X-axis*.
.. From the *Aggregation* dropdown, select *Data Histogram*.
.. Click *Update*.
+
[role="screenshot"]
image:images/bar-chart-tutorial-1.png[Bar chart with sample logs data]
. To show the top five log traffic sources, add a sub aggregation.
.. Click *Add*, then select *Split series*.
.. From the *Sub aggregation* dropdown, select *Terms*.
.. From the *Field* dropdown, select *geo.src*.
.. Click *Update*.
+
[role="screenshot"]
image:images/bar-chart-tutorial-2.png[Bar chart with sample logs data]

508
docs/user/dashboard/dashboard.asciidoc
View file

@ -4,25 +4,23 @@
[partintro]
--
A _dashboard_ is a collection of panels that you use to analyze your data. On a dashboard, you can add a variety of panels that
you can rearrange and tell a story about your data. Panels contain everything you need, including visualizations,
A _dashboard_ is a collection of panels that you use to analyze your data. On a dashboard, add a variety of panels, then rearrange
the panels to tell a story about your data. Panels contain everything you need, including visualizations,
interactive controls, markdown, and more.
With *Dashboard*, you can:
* Add multiple panels to see many aspects and views of your data in one place.
* Add multiple types of panels and view various aspects of your data in one place, then arrange the panels to compare your data.
* Arrange panels for analysis and comparison.
* Add text and images to provide context to the panels.
* Add text and images to provide context to the panels and make them easy to consume.
* Create and apply filters to focus on the data you want to display.
* Create and apply filters to focus in on the data you want to display.
* Control who can use your data, and share the dashboard with a small or large audience.
* Generate reports based on your findings.
To begin, open the main menu, click *Dashboard*, then click *Create dashboard*.
To begin, open the main menu, then click *Dashboard*.
[role="screenshot"]
image:images/Dashboard_example.png[Example dashboard]
@ -39,470 +37,158 @@ dashboards are not visible. For more information, see <<xpack-security-authoriza
image::images/dashboard-read-only-badge.png[Example of Dashboard read only access indicator in Kibana header]
[float]
[[types-of-panels]]
== Types of panels
[[add-panels]]
== Add visualization panels
Panels contain everything you need to tell a story about you data, including visualizations,
interactive controls, Markdown, and more.
Create panels with visualizations of your data.
[cols="50, 50"]
|===
. Make sure you have {ref}/getting-started-index.html[data indexed into {es}] and an <<index-patterns,index pattern>>.
a| *Area*
Displays data points, connected by a line, where the area between the line and axes are shaded.
Use area charts to compare two or more categories over time, and display the magnitude of trends.
| image:images/area.png[Area chart]
a| *Stacked area*
Displays the evolution of the value of several data groups. The values of each group are displayed
on top of each other. Use stacked area charts to visualize part-to-whole relationships, and to show
how each category contributes to the cumulative total.
| image:images/stacked_area.png[Stacked area chart]
a| *Bar*
Displays bars side-by-side where each bar represents a category. Use bar charts to compare data across a
large number of categories, display data that includes categories with negative values, and easily identify
the categories that represent the highest and lowest values. Kibana also supports horizontal bar charts.
| image:images/bar.png[Bar chart]
a| *Stacked bar*
Displays numeric values across two or more categories. Use stacked bar charts to compare numeric values between
levels of a categorical value. Kibana also supports stacked horizontal bar charts.
| image:images/stacked_bar.png[Stacked area chart]
a| *Line*
Displays data points that are connected by a line. Use line charts to visualize a sequence of values, discover
trends over time, and forecast future values.
| image:images/line.png[Line chart]
a| *Pie*
Displays slices that represent a data category, where the slice size is proportional to the quantity it represents.
Use pie charts to show comparisons between multiple categories, illustrate the dominance of one category over others,
and show percentage or proportional data.
| image:images/pie.png[Pie chart]
a| *Donut*
Similar to the pie chart, but the central circle is removed. Use donut charts when you’d like to display multiple statistics at once.
| image:images/donut.png[Donut chart]
a| *Tree map*
Relates different segments of your data to the whole. Each rectangle is subdivided into smaller rectangles, or sub branches, based on
its proportion to the whole. Use treemaps to make efficient use of space to show percent total for each category.
| image:images/treemap.png[Tree map]
a| *Heat map*
Displays graphical representations of data where the individual values are represented by colors. Use heat maps when your data set includes
categorical data. For example, use a heat map to see the flights of origin countries compared to destination countries using the sample flight data.
| image:images/heat_map.png[Heat map]
a| *Goal*
Displays how your metric progresses toward a fixed goal. Use the goal to display an easy to read visual of the status of your goal progression.
| image:images/goal.png[Goal]
a| *Gauge*
Displays your data along a scale that changes color according to where your data falls on the expected scale. Use the gauge to show how metric
values relate to reference threshold values, or determine how a specified field is performing versus how it is expected to perform.
| image:images/gauge.png[Gauge]
a| *Metric*
Displays a single numeric value for an aggregation. Use the metric visualization when you have a numeric value that is powerful enough to tell
a story about your data.
| image:images/metric.png[Metric]
a| *Data table*
Displays your raw data or aggregation results in a tabular format. Use data tables to display server configuration details, track counts, min,
or max values for a specific field, and monitor the status of key services.
| image:images/data_table.png[Data table]
a| *Tag cloud*
Graphical representations of how frequently a word appears in the source text. Use tag clouds to easily produce a summary of large documents and
create visual art for a specific topic.
| image:images/tag_cloud.png[Tag cloud]
a| *Maps*
For all your mapping needs, use <<maps,Maps>>.
| image:images/maps.png[Maps]
|===
[float]
[[create-panels]]
== Create panels
To create a panel, make sure you have {ref}/getting-started-index.html[data indexed into {es}] and an <<index-patterns,index pattern>>
to retrieve the data from {es}. If you aren’t ready to use your own data, {kib} comes with several pre-built dashboards that you can test out. For more information,
refer to <<add-sample-data, Explore {kib} using sample data>>.
To begin, click *Create new*, then choose one of the following options on the
*New Visualization* window:
* Click on the type of panel you want to create, then configure the options.
* Select an editor to help you create the panel.
[role="screenshot"]
image:images/Dashboard_add_new_visualization.png[Example add new visualization to dashboard]
{kib} provides you with several editors that help you create panels.
[float]
[[lens]]
=== Create panels with Lens
*Lens* is the simplest and fastest way to create powerful visualizations of your data. To use *Lens*, you drag and drop as many data fields
as you want onto the visualization builder pane, and *Lens* uses heuristics to decide how to apply each field to the visualization.
With *Lens*, you can:
* Use the automatically generated suggestions to change the visualization type.
* Create visualizations with multiple layers and indices.
* Change the aggregation and labels to customize the data.
[role="screenshot"]
image::images/lens_drag_drop.gif[Drag and drop]
TIP: Drag-and-drop capabilities are available only when *Lens* knows how to use the data. If *Lens* is unable to automatically generate a
visualization, configure the customization options for your visualization.
. Click *Create new*, then click *Lens* on the *New visualization* window.
[float]
[[fiter-the-data-fields]]
==== Filter the data fields
=== Change the list of fields
The data fields that are displayed are based on the selected <<index-patterns,index pattern>> and the <<set-time-filter,time filter>>.
The fields that appear are based on the selected index pattern, time filter, and filters.
To view the data fields in a different index pattern, click the *Change Index Pattern* dropdown, then select a new one.
. To view the fields in a different <<index-patterns,index pattern>>, click the *Change Index Pattern* dropdown, then select the index pattern you want to view.
To filter the data fields:
. To view the fields within a different time range, change the <<set-time-filter,time filter>>.
* Enter the data field name in *Search field names*.
. To filter the fields, use the following options:
* Enter the field name in *Search field names*.
* Click *Field filters*, then select the filter.
[float]
[[view-data-summaries]]
==== View data field summaries
=== View summaries of the fields
To help you decide exactly the data you want to display, get a quick summary of each data field. The summary shows the distribution of
To explore the data, get a quick summary of each field. The summary shows the distribution of
values within the specified time range.
To view the data field summary information, navigate to the field, then click *i*.
To view the data summary, click *i* next to a field.
[role="screenshot"]
image::images/lens_data_info.png[Data summary window]
[float]
[[change-the-visualization-type]]
==== Change the visualization type
[[create-the-lens-visualization]]
=== Create the visualization
Use the automatically generated suggestions to change the visualization type, or manually select the type of visualization you want to view.
*Suggestions* are shortcuts to alternative visualizations that *Lens* generates for you.
Drag and drop the fields onto the visualization builder. *Lens* using heuristics to apply each field and create the visualization.
. From the *Avialable fields* list, drag and drop the fields onto the visualization builder.
+
[role="screenshot"]
image::images/lens_suggestions.gif[Visualization suggestions]
image::images/lens_drag_drop.gif[Drag and drop]
+
Drag-and-drop capabilities are available only when *Lens* knows how to use the data.
If you’d like to use a visualization type outside of the suggestions, click the visualization type, then select a new one.
. To change the visualization, use the following options:
[role="screenshot"]
image::images/lens_viz_types.png[]
* Click one of the *Suggestions*.
When there is an exclamation point (!) next to a visualization type, *Lens* is unable to transfer your data, but still allows you to make the change.
[float]
[[customize-the-data]]
==== Customize the data
For each visualization type, you can customize the aggregation and labels. The options available depend on the selected visualization type.
. From the editor, click a data field, or click *Drop a field or click to add*.
. Change the options, then click *Close*.
* Click the visualization type dropdown, then select the visualization you want to view.
+
When there is an exclamation point (!) next to a visualization, *Lens* is unable to transfer your data, but still allows you to change the visualization.
[float]
[[add-layers-and-indices]]
==== Add layers and indices
=== Add layers and indices
To compare and analyze data from different sources, you can visualize multiple data layers and indices. Multiple layers and indices are
To compare and analyze data from different sources, visualize multiple data layers and indices. Multiple layers and indices are
supported in area, line, and bar charts.
To add a layer, click *+*, then drag and drop the data fields for the new layer.
. To add a layer, click *+*, then drag and drop the data fields for the new layer.
+
[role="screenshot"]
image::images/lens_layers.png[Add layers]
To view a different index, click the index name in the editor, then select a new one.
. To view a different index, click the index name in the editor, then select a new one.
+
[role="screenshot"]
image::images/lens_index_pattern.png[Add index pattern]
Ready to try out *Lens*? Refer to the <<lens-tutorial,step-by-step tutorial>>.
[float]
[[tsvb]]
=== Create panels with TSVB
[[save-the-panel]]
=== Save the panel
*TSVB* is a time series data visualizer that allows you to use the full power of the Elasticsearch aggregation framework. To use *TSVB*,
you can combine an infinite number of <<aggregation-reference,aggregations>> to display your data.
With *TSVB*, you can:
* Create visualizations, data tables, and markdown panels.
* Create visualizations with multiple indices.
* Change the aggregation and labels to customize the data.
+
[role="screenshot"]
image::images/tsvb.png[TSVB UI]
[float]
[[configure-the-data]]
==== Configure the data
With *TSVB*, you can add and display multiple data sets to compare and analyze. {kib} uses many types of <<aggregation-reference,aggregations>> that you can use to build
complex summaries of that data.
. Select *Data*. If you are using *Table*, select *Columns*.
. From the *Aggregation* drop down, select the aggregation you want to visualize.
+
If you don’t see any data, change the <<set-time-filter,time filter>>.
+
To add multiple aggregations, click *+*.
. From the *Group by* drop down, select how you want to group or split the data.
. To add another data set, click *+*.
+
When you have more than one aggregation, the last value is displayed, which is indicated by the eye icon.
[float]
[[change-the-data-display]]
==== Change the data display
To find the best way to display your data, *TSVB* supports several types of panels and charts.
To change the *Time Series* chart type:
. Click *Data > Options*.
. Select the *Chart type*.
To change the panel type, click on the panel options:
[role="screenshot"]
image::images/tsvb_change_display.gif[TSVB change the panel type]
[float]
[[custommize-the-data]]
==== Customize the data
View data in a different <<index-patterns,index pattern>>, and change the data label name and colors. The options available depend on the panel type.
To change the index pattern, click *Panel options*, then enter the new *Index Pattern*.
To override the index pattern for a data set, click *Data > Options*. Select *Yes* to override, then enter the new *Index pattern*.
To change the data labels and colors:
. Click *Data*.
. Enter the *Label* name, which *TSVB* uses on the legends and data labels.
. Click the color picker, then select the color for the data.
+
[role="screenshot"]
image::images/tsvb_color_picker.png[TSVB color picker]
[float]
[[add-annotations]]
==== Add annotations
You can overlay annotation events on top of your *Time Series* charts. The options available depend on the data source.
To begin, click *Annotations*, click *Add data source*, then configure the options.
[role="screenshot"]
image::images/tsvb_annotations.png[TSVB annotations]
[float]
[[filter-the-panel]]
==== Filter the panel
The data that displays on the panel is based on the <<index-patterns,index pattern>> and <<set-time-filter,time filter>>.
You can filter the data on the panels using the <<lucene-query,Lucene query syntax>>.
Click *Panel options*, then enter the syntax in the *Panel Filter* field.
If you want to ignore filters from all of {kib}, select *Yes* for *Ignore global filter*.
[float]
[[vega]]
=== Create custom panels with Vega
Build custom visualizations using *Vega* and *Vega-Lite*, backed by one or more data sources including {es}, Elastic Map Service,
URL, or static data. Use the {kib} extensions to embed *Vega* in your dashboard, and add interactive tools.
Use *Vega* and *Vega-Lite* when you want to create a visualization for:
* Aggregations that use `nested` or `parent/child` mapping
* Aggregations without an index pattern
* Queries that use custom time filters
* Complex calculations
* Extracting data from _source instead of aggregations
* Scatter charts, sankey charts, and custom maps
* Using an unsupported visual theme
[role="screenshot"]
image::images/vega.png[Vega UI]
*Vega* and *Vega-Lite* are declarative formats that:
* Create complex visualizations
* Use JSON and a different syntax for declaring visualizations
* Are not fully interchangeable
For more information about *Vega* and *Vega-Lite*, refer to:
* <<vega-lite-tutorial-create-your-first-visualizations,Create your first visualization>>
* <<vega-tutorial-update-kibana-filters-from-vega,Update Kibana filters>>
* <<reference-for-kibana-extensions,Reference for Kibana extensions>>
* <<resources-and-examples,Resources and examples>>
[float]
[[timelion]]
=== Create panels with Timelion
*Timelion* is a time series data visualizer that enables you to combine independent data sources within a single visualization.
*Timelion* is driven by a simple expression language that you use to:
* Retrieve time series data
* Perform calculation to tease out the answers to complex questions
* Visualize the results
[role="screenshot"]
image::images/timelion.png[Timelion UI]
Ready to try out Timelion? For step-by-step tutorials, refer to:
* <<timelion-tutorial-create-time-series-visualizations,Create time series visualizations>>
* <<timelion-tutorial-create-visualizations-with-mathematical-functions,Create visualizations with mathematical functions>>
* <<timelion-tutorial-create-visualizations-withconditional-logic-and-tracking-trends,Create visualizations with conditional logic and tracking trends>>
[float]
[[timelion-deprecation]]
==== Timelion app deprecation
In 7.0 and later, *Timelion* app is deprecated. In 8.0 and later, *Timelion* app is removed from {kib}. To prepare for the removal of *Timelion* app, you must migrate *Timelion* app worksheets to a dashboard.
NOTE: Only *Timelion* app is deprecated. {kib} continues to support *Timelion*
visualizations in *Dashboard*, *Visualize*, and *Canvas*.
To migrate a *Timelion* worksheet to a dashboard:
. Open the main menu, click *Dashboard*, then click *Create dashboard*.
. For each *Timelion* app worksheet, complete the following steps.
.. On the dashboard, click *Create New*, then click *Timelion* on the *New Visualization* window.
.. Open a new tab, open the *Timelion* app, select the chart you want to copy, then copy the chart expression.
+
[role="screenshot"]
image::images/timelion-copy-expression.png[Timelion app chart]
.. Go to *Timelion*, paste the chart expression in the *Timelion expression* field, then click *Update*.
+
[role="screenshot"]
image::images/timelion-vis-paste-expression.png[Timelion advanced editor UI]
.. In the toolbar, click *Save*.
.. On the *Save visualization* window, enter the visualization *Title*, then click *Save and return*.
+
The Timelion visualization panel appears on the dashboard.
+
[role="screenshot"]
image::images/timelion-dashboard.png[Final dashboard with saved Timelion app worksheet]
[float]
[[save-panels]]
== Save panels
When you’ve finished making changes, save the panels.
Save and add the visualization panel to the dashboard.
. In the toolbar, click *Save*.
. Add the *Title* and optional *Description*.
. Click *Save and return*.
[float]
[[add-existing-panels]]
== Add existing panels
Add panels that you’ve already created to your dashboard.
On the dashboard, click *Add an existing*, then select the panel you want to add.
When a panel contains a stored query, both queries are applied.
[role="screenshot"]
image:images/Dashboard_add_visualization.png[Example add visualization to dashboard]
To make changes to the panel, put the dashboard in *Edit* mode, then select the edit option from the panel menu.
The changes you make appear in every dashboard that uses the panel, except if you edit the panel title. Changes to the panel title appear only on the dashboard where you made the change.
[float]
[[save-dashboards]]
== Save dashboards
== Save the dashboard
When you’ve finished adding the panels, save the dashboard.
When you have completed your changes, save the dashboard.
. In the toolbar, click *Save*.
. Enter the dashboard *Title* and optional *Description*, then *Save* the dashboard.
[float]
[[share-the-dashboard]]
== Share the dashboard
[[embedding-dashboards]]
Share your dashboard outside of {kib}.
From the *Share* menu, you can:
* Embed the code in a web page. Users must have {kib} access
to view an embedded dashboard.
* Share a direct link to a {kib} dashboard
* Generate a PDF report
* Generate a PNG report
TIP: To create a link to a dashboard by title, use: +
`${domain}/${basepath?}/app/dashboards#/list?title=${yourdashboardtitle}`
TIP: When sharing a link to a dashboard snapshot, use the *Short URL*. Snapshot
URLs are long and can be problematic for Internet Explorer and other
tools. To create a short URL, you must have write access to {kib}.
[float]
[[import-dashboards]]
=== Export the dashboard
To export the dashboard, open the main menu, then click *Stack Management > Saved Objects*. For more information,
refer to <<managing-saved-objects, Managing saved objects>>.
//[float]
//[[try-it-lens]]
//== Try it: Build a dashboard with panels of visualizations
//Lens end-to-end guide
[float]
[[lens-tutorial-next-steps]]
== What's next?
* Add different types of panels with the <<add-panels-with-advanced-editors,advanced editors>>
* Add <<add-aggregation-based-visualization-panels,aggregation-based visualization panels>>
* Take a deeper dive into your data and add the panels to a <<canvas,Canvas workpad>>.
--
include::edit-dashboards.asciidoc[]
include::advanced-editors.asciidoc[]
include::aggregation-based.asciidoc[]
include::enhance-dashboards.asciidoc[]
include::explore-dashboard-data.asciidoc[]
include::drilldowns.asciidoc[]
include::share-dashboards.asciidoc[]
include::tutorials.asciidoc[]
include::aggregation-reference.asciidoc[]
include::vega-reference.asciidoc[]

26
docs/user/dashboard/edit-dashboards.asciidoc → docs/user/dashboard/enhance-dashboards.asciidoc
View file

@ -1,7 +1,7 @@
[[edit-dashboards]]
== Edit dashboards
[[enhance-dashboards]]
== Enhance dashboards
Now that you have added panels to your dashboard, you can add filter panels to interact with the data, and Markdown panels to add context to the dashboard.
Now that you have added panels to your dashboard, you can add filter panels to interact with the data, and Markdown panels to add context to the data.
To make your dashboard look the way you want, use the editing options.
[float]
@ -12,10 +12,10 @@ To filter the data on your dashboard in real-time, add a *Controls* panel.
You can add two types of *Controls*:
* Options list — Filters content based on one or more specified options. The dropdown menu is dynamically populated with the results of a terms aggregation.
* *Options list* — Filters content based on one or more specified options. The dropdown menu is dynamically populated with the results of a terms aggregation.
For example, use the options list on the sample flight dashboard when you want to filter the data by origin city and destination city.
* Range slider — Filters data within a specified range of numbers. The minimum and maximum values are dynamically populated with the results of a
* *Range slider* — Filters data within a specified range of numbers. The minimum and maximum values are dynamically populated with the results of a
min and max aggregation. For example, use the range slider when you want to filter the sample flight dashboard by a specific average ticket price.
[role="screenshot"]
@ -64,6 +64,22 @@ The following image is displayed:
[role="screenshot"]
image::images/markdown_example_4.png[]
[float]
[[add-existing-panels]]
=== Add existing panels
Add panels that you’ve already created to your dashboard.
On the dashboard, click *Add an existing*, then select the panel you want to add.
When a panel contains a stored query, both queries are applied.
[role="screenshot"]
image:images/Dashboard_add_visualization.png[Example add visualization to dashboard]
To make changes to the panel, put the dashboard in *Edit* mode, then select the edit option from the panel menu.
The changes you make appear in every dashboard that uses the panel, except if you edit the panel title. Changes to the panel title appear only on the dashboard where you made the change.
[float]
[[arrange-panels]]
[[moving-containers]]

BIN
docs/user/dashboard/images/aggregation-based-color-picker.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
docs/user/dashboard/images/bar-chart-tutorial-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 392 KiB

BIN
docs/user/dashboard/images/bar-chart-tutorial-2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 426 KiB

BIN
docs/user/dashboard/images/bar-chart-tutorial-3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

27
docs/user/dashboard/share-dashboards.asciidoc
View file

@ -1,27 +0,0 @@
[[share-dashboards]]
== Share dashboards
[[embedding-dashboards]]
Share your dashboard outside of {kib}.
From the *Share* menu, you can:
* Embed the code in a web page. Users must have {kib} access
to view an embedded dashboard.
* Share a direct link to a {kib} dashboard
* Generate a PDF report
* Generate a PNG report
TIP: To create a link to a dashboard by title, use: +
`${domain}/${basepath?}/app/dashboards#/list?title=${yourdashboardtitle}`
TIP: When sharing a link to a dashboard snapshot, use the *Short URL*. Snapshot
URLs are long and can be problematic for Internet Explorer and other
tools. To create a short URL, you must have write access to {kib}.
[float]
[[import-dashboards]]
=== Export the dashboard
To export the dashboard, open the main menu, then click *Stack Management > Saved Objects*. For more information,
refer to <<managing-saved-objects, Managing saved objects>>.

503
docs/user/dashboard/timelion.asciidoc Normal file
View file

@ -0,0 +1,503 @@
[[timelion]]
=== Add panels with Timelion
*Timelion* is a time series data visualizer that enables you to combine independent data sources within a single visualization.
[NOTE]
====
Timelion app deprecation
In 7.0 and later, *Timelion* app is deprecated. In 8.0 and later, *Timelion* app is removed from {kib}.
To prepare for the removal of *Timelion* app, you must migrate *Timelion* app worksheets to a dashboard.
For information on how to migrate *Timelion* app worksheets, refer to the
link:https://www.elastic.co/guide/en/kibana/current/release-notes-7.10.0.html#deprecation-v7.10.0[7.10.0 Release Notes].
====
[float]
[[timelion-tutorial-create-time-series-visualizations]]
=== Try it: 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]
[[define-the-functions]]
==== Define the functions
To start tracking the real-time percentage of CPU, enter the following in the *Timelion Expression* field:
[source,text]
----------------------------------
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
----------------------------------
[role="screenshot"]
image::images/timelion-create01.png[]
{nbsp}
[float]
[[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:
[source,text]
----------------------------------
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct'),
.es(offset=-1h, <1>
index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
----------------------------------
<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]
[[add-label-names]]
==== Add label names
To easily distinguish between the two data sets, add the label names:
[source,text]
----------------------------------
.es(offset=-1h,index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct').label('last hour'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct').label('current hour') <1>
----------------------------------
<1> `.label()` adds custom labels to the visualization.
[role="screenshot"]
image::images/timelion-create03.png[]
{nbsp}
[float]
[[add-a-title]]
==== Add a title
Add a meaningful title:
[source,text]
----------------------------------
.es(offset=-1h,
index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('last hour'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('current hour')
.title('CPU usage over time') <1>
----------------------------------
<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]
[[change-the-chart-type]]
==== Change the chart type
To differentiate between the current hour data and the last hour data, change the chart type:
[source,text]
----------------------------------
.es(offset=-1h,
index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('last hour')
.lines(fill=1,width=0.5), <1>
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('current hour')
.title('CPU usage over time')
----------------------------------
<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]
[[change-the-line-colors]]
==== Change the line colors
To make the current hour data stand out, change the line colors:
[source,text]
----------------------------------
.es(offset=-1h,
index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('last hour')
.lines(fill=1,width=0.5)
.color(gray), <1>
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('current hour')
.title('CPU usage over time')
.color(#1E90FF)
----------------------------------
<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]
[[make-adjustments-to-the-legend]]
==== Make adjustments to the legend
Change the position and style of the legend:
[source,text]
----------------------------------
.es(offset=-1h,
index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('last hour')
.lines(fill=1,width=0.5)
.color(gray),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('current hour')
.title('CPU usage over time')
.color(#1E90FF)
.legend(columns=2, position=nw) <1>
----------------------------------
<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]
[[timelion-tutorial-create-visualizations-with-mathematical-functions]]
=== Try it: 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
To start tracking the inbound and outbound network traffic, enter the following in the *Timelion Expression* field:
[source,text]
----------------------------------
.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
Change how the data is displayed so that you can easily monitor the inbound traffic:
[source,text]
----------------------------------
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative() <1>
----------------------------------
<1> `.derivative` plots the change in values over time.
[role="screenshot"]
image::images/timelion-math02.png[]
{nbsp}
Add a similar calculation for outbound traffic:
[source,text]
----------------------------------
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative(),
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.out.bytes)
.derivative()
.multiply(-1) <1>
----------------------------------
<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
To make the visualization easier to analyze, change the data metric from bytes to megabytes:
[source,text]
----------------------------------
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative()
.divide(1048576),
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.out.bytes)
.derivative()
.multiply(-1)
.divide(1048576) <1>
----------------------------------
<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 using functions:
[source,text]
----------------------------------
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative()
.divide(1048576)
.lines(fill=2, width=1)
.color(green)
.label("Inbound traffic") <1>
.title("Network traffic (MB/s)"), <2>
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.out.bytes)
.derivative()
.multiply(-1)
.divide(1048576)
.lines(fill=2, width=1) <3>
.color(blue) <4>
.label("Outbound traffic")
.legend(columns=2, position=nw) <5>
----------------------------------
<1> `.label()` adds custom labels to the visualization.
<2> `.title()` adds a title with a meaningful name.
<3> `.lines()` changes the appearance of the chart lines. In this example, `.lines(fill=2, width=1)` sets the fill level to `2`, and the border width to `1`.
<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-tutorial-create-visualizations-withconditional-logic-and-tracking-trends]]
=== Try it: 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.
With Timelion conditional logic, you can use the following operator values to compare your data:
[horizontal]
`eq`:: equal
`ne`:: not equal
`lt`:: less than
`lte`:: less than or equal to
`gt`:: greater than
`gte`:: greater than or equal to
[float]
[[conditional-define-functions]]
==== Define the functions
To chart the maximum value of `system.memory.actual.used.bytes`, enter the following in the *Timelion Expression* field:
[source,text]
----------------------------------
.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
To track the amount of memory used, create two thresholds:
[source,text]
----------------------------------
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt, <1>
11300000000, <2>
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null)
.label('warning')
.color('#FFCC11'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt,
11375000000,
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null)
.label('severe')
.color('red')
----------------------------------
<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
To determine the trend, create a new data series:
[source,text]
----------------------------------
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt,11300000000,
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null)
.label('warning')
.color('#FFCC11'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt,11375000000,
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null).
label('severe')
.color('red'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.mvavg(10) <1>
----------------------------------
<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 using functions:
[source,text]
----------------------------------
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.label('max memory') <1>
.title('Memory consumption over time'), <2>
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt,
11300000000,
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null)
.label('warning')
.color('#FFCC11') <3>
.lines(width=5), <4>
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt,
11375000000,
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null)
.label('severe')
.color('red')
.lines(width=5),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.mvavg(10)
.label('mvavg')
.lines(width=2)
.color(#5E5E5E)
.legend(columns=4, position=nw) <5>
----------------------------------
<1> `.label()` adds custom labels to the visualization.
<2> `.title()` adds a title with a meaningful name.
<3> `.color()` changes the color of the data. Supported color types include standard color names, hexadecimal values, or a color schema for grouped data.
<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}
For additional information on Timelion conditional capabilities, go to https://www.elastic.co/blog/timeseries-if-then-else-with-timelion[I have but one .condition()].

77
docs/user/dashboard/tsvb.asciidoc Normal file
View file

@ -0,0 +1,77 @@
[[tsvb]]
=== Add panels with TSVB
With *TSVB*, you can add and display multiple data sets to compare and analyze. {kib} uses many types of <<aggregation-reference,aggregations>> that you can use to build
complex summaries of that data.
. Select *Data*. If you are using *Table*, select *Columns*.
. From the *Aggregation* drop down, select the aggregation you want to visualize.
+
If you don’t see any data, change the <<set-time-filter,time filter>>.
+
To add multiple aggregations, click *+*.
. From the *Group by* drop down, select how you want to group or split the data.
. To add another data set, click *+*.
+
When you have more than one aggregation, the last value is displayed, which is indicated by the eye icon.
[float]
[[change-the-data-display]]
==== Change the data display
To find the best way to display your data, *TSVB* supports several types of panels and charts.
To change the *Time Series* chart type:
. Click *Data > Options*.
. Select the *Chart type*.
To change the panel type, click on the panel options:
[role="screenshot"]
image::images/tsvb_change_display.gif[TSVB change the panel type]
[float]
[[custommize-the-data]]
==== Customize the data
View data in a different <<index-patterns,index pattern>>, and change the data label name and colors. The options available depend on the panel type.
To change the index pattern, click *Panel options*, then enter the new *Index Pattern*.
To override the index pattern for a data set, click *Data > Options*. Select *Yes* to override, then enter the new *Index pattern*.
To change the data labels and colors:
. Click *Data*.
. Enter the *Label* name, which *TSVB* uses on the legends and data labels.
. Click the color picker, then select the color for the data.
+
[role="screenshot"]
image::images/tsvb_color_picker.png[TSVB color picker]
[float]
[[add-annotations]]
==== Add annotations
You can overlay annotation events on top of your *Time Series* charts. The options available depend on the data source.
To begin, click *Annotations*, click *Add data source*, then configure the options.
[role="screenshot"]
image::images/tsvb_annotations.png[TSVB annotations]
[float]
[[filter-the-panel]]
==== Filter the panel
The data that displays on the panel is based on the <<index-patterns,index pattern>> and <<set-time-filter,time filter>>.
You can filter the data on the panels using the <<lucene-query,Lucene query syntax>>.
Click *Panel options*, then enter the syntax in the *Panel Filter* field.
If you want to ignore filters from all of {kib}, select *Yes* for *Ignore global filter*.
//[float]
//[[try-it-tsvb]
//Try it: Build a dashboard with TSVB panels

2
docs/user/dashboard/vega-reference.asciidoc
View file

@ -1,8 +1,6 @@
[[vega-reference]]
== Vega reference
experimental[]
For additional *Vega* and *Vega-Lite* information, refer to the reference sections.
[float]

571
docs/user/dashboard/tutorials.asciidoc → docs/user/dashboard/vega.asciidoc
View file

@ -1,90 +1,12 @@
[[tutorials]]
== Tutorials
Learn how to use *Lens*, *Vega*, and *Timelion* by going through one of the step-by-step tutorials.
[[lens-tutorial]]
=== Compare sales over time with Lens
Ready to create your own visualization with *Lens*? Use the following tutorial to create a visualization that lets you compare sales over time.
[float]
[[lens-before-begin]]
==== Before you begin
To start, add the <<add-sample-data, sample ecommerce data>>.
[float]
==== Build the visualization
Drag and drop your data onto the visualization builder pane.
. Select the *kibana_sample_data_ecommerce* index pattern.
. Click image:images/time-filter-calendar.png[], then click *Last 7 days*.
+
The *Available fields* automatically update.
. Drag and drop the *taxful_total_price* data field to the visualization builder pane.
+
[role="screenshot"]
image::images/lens_tutorial_1.png[Lens tutorial]
To display the average order prices over time, *Lens* automatically added *order_date* to the *X-axis*.
To break down your data, drag and drop the *category.keyword* field to the visualization builder pane. Lens
knows that you want to show the top categories and compare them across the dates,
and creates a chart that compares the sales for each of the top three categories:
[role="screenshot"]
image::images/lens_tutorial_2.png[Lens tutorial]
[float]
[[customize-lens-visualization]]
==== Customize your visualization
Make your visualization look exactly how you want with the customization options.
. Click *Average of taxful_total_price*, then change the *Display name* to Sales.
+
[role="screenshot"]
image::images/lens_tutorial_3.1.png[Lens tutorial]
. Click *Close*.
. Click *Top values of category.keyword*, then change *Number of values* to `10`.
+
[role="screenshot"]
image::images/lens_tutorial_3.2.png[Lens tutorial]
. Click *Close*.
+
The visualization updates to show there are only six available categories.
. Look at the *Suggestions*. An area chart is not an option, but for the sales data, a stacked area chart might be the best option.
To switch the chart type, click *Stacked bar chart*, then click *Stacked area* from the *Select a visualization* dropdown.
+
[role="screenshot"]
image::images/lens_tutorial_3.png[Lens tutorial]
[float]
[[lens-tutorial-next-steps]]
==== What's next?
Now that you've created your *Lens* visualization, add it to a <<dashboard,dashboard>> or <<canvas,Canvas workpad>>.
[[vega-lite-tutorial-create-your-first-visualizations]]
[[vega]]
=== Create your first visualization with Vega-Lite
In this tutorial, you will learn about how to edit Vega-Lite in {kib} to create
Learn how to edit Vega-Lite in {kib} to create
a stacked area chart from an {es} search query. It will give you a starting point
for a more comprehensive
https://vega.github.io/vega-lite/tutorials/getting_started.html[introduction to Vega-Lite],
while only covering the basics.
In this tutorial, you will build a stacked area chart from one of the {kib} sample data
sets.
[role="screenshot"]
image::visualize/images/vega_lite_tutorial_1.png[Vega-Lite tutorial stacked area chart]
@ -650,8 +572,9 @@ The final result of this tutorial is this spec:
====
[float]
[[vega-tutorial-update-kibana-filters-from-vega]]
=== Update {kib} filters from Vega
=== Try it: Update {kib} filters from Vega
In this tutorial you will build an area chart in Vega using an {es} search query,
and add a click handler and drag handler to update {kib} filters.
@ -1241,488 +1164,8 @@ The final Vega spec for this tutorial is here:
}
----
====
[[timelion-tutorial-create-time-series-visualizations]]
=== Create time series visualizations with Timelion
For more information about *Vega* and *Vega-Lite*, refer to:
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]
[[define-the-functions]]
==== Define the functions
To start tracking the real-time percentage of CPU, enter the following in the *Timelion Expression* field:
[source,text]
----------------------------------
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
----------------------------------
[role="screenshot"]
image::images/timelion-create01.png[]
{nbsp}
[float]
[[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:
[source,text]
----------------------------------
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct'),
.es(offset=-1h, <1>
index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
----------------------------------
<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]
[[add-label-names]]
==== Add label names
To easily distinguish between the two data sets, add the label names:
[source,text]
----------------------------------
.es(offset=-1h,index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct').label('last hour'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct').label('current hour') <1>
----------------------------------
<1> `.label()` adds custom labels to the visualization.
[role="screenshot"]
image::images/timelion-create03.png[]
{nbsp}
[float]
[[add-a-title]]
==== Add a title
Add a meaningful title:
[source,text]
----------------------------------
.es(offset=-1h,
index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('last hour'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('current hour')
.title('CPU usage over time') <1>
----------------------------------
<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]
[[change-the-chart-type]]
==== Change the chart type
To differentiate between the current hour data and the last hour data, change the chart type:
[source,text]
----------------------------------
.es(offset=-1h,
index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('last hour')
.lines(fill=1,width=0.5), <1>
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('current hour')
.title('CPU usage over time')
----------------------------------
<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]
[[change-the-line-colors]]
==== Change the line colors
To make the current hour data stand out, change the line colors:
[source,text]
----------------------------------
.es(offset=-1h,
index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('last hour')
.lines(fill=1,width=0.5)
.color(gray), <1>
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('current hour')
.title('CPU usage over time')
.color(#1E90FF)
----------------------------------
<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]
[[make-adjustments-to-the-legend]]
==== Make adjustments to the legend
Change the position and style of the legend:
[source,text]
----------------------------------
.es(offset=-1h,
index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('last hour')
.lines(fill=1,width=0.5)
.color(gray),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='avg:system.cpu.user.pct')
.label('current hour')
.title('CPU usage over time')
.color(#1E90FF)
.legend(columns=2, position=nw) <1>
----------------------------------
<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}
[[timelion-tutorial-create-visualizations-with-mathematical-functions]]
=== Timelion tutorial: 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
To start tracking the inbound and outbound network traffic, enter the following in the *Timelion Expression* field:
[source,text]
----------------------------------
.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
Change how the data is displayed so that you can easily monitor the inbound traffic:
[source,text]
----------------------------------
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative() <1>
----------------------------------
<1> `.derivative` plots the change in values over time.
[role="screenshot"]
image::images/timelion-math02.png[]
{nbsp}
Add a similar calculation for outbound traffic:
[source,text]
----------------------------------
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative(),
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.out.bytes)
.derivative()
.multiply(-1) <1>
----------------------------------
<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
To make the visualization easier to analyze, change the data metric from bytes to megabytes:
[source,text]
----------------------------------
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative()
.divide(1048576),
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.out.bytes)
.derivative()
.multiply(-1)
.divide(1048576) <1>
----------------------------------
<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 using functions:
[source,text]
----------------------------------
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative()
.divide(1048576)
.lines(fill=2, width=1)
.color(green)
.label("Inbound traffic") <1>
.title("Network traffic (MB/s)"), <2>
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.out.bytes)
.derivative()
.multiply(-1)
.divide(1048576)
.lines(fill=2, width=1) <3>
.color(blue) <4>
.label("Outbound traffic")
.legend(columns=2, position=nw) <5>
----------------------------------
<1> `.label()` adds custom labels to the visualization.
<2> `.title()` adds a title with a meaningful name.
<3> `.lines()` changes the appearance of the chart lines. In this example, `.lines(fill=2, width=1)` sets the fill level to `2`, and the border width to `1`.
<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}
[[timelion-tutorial-create-visualizations-withconditional-logic-and-tracking-trends]]
=== Create visualizations with conditional logic and tracking trends using Timelion
To easily detect outliers and discover patterns over time, modify time series data with conditional logic and create a trend with a moving average.
With Timelion conditional logic, you can use the following operator values to compare your data:
[horizontal]
`eq`:: equal
`ne`:: not equal
`lt`:: less than
`lte`:: less than or equal to
`gt`:: greater than
`gte`:: greater than or equal to
[float]
[[conditional-define-functions]]
==== Define the functions
To chart the maximum value of `system.memory.actual.used.bytes`, enter the following in the *Timelion Expression* field:
[source,text]
----------------------------------
.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
To track the amount of memory used, create two thresholds:
[source,text]
----------------------------------
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt, <1>
11300000000, <2>
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null)
.label('warning')
.color('#FFCC11'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt,
11375000000,
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null)
.label('severe')
.color('red')
----------------------------------
<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
To determine the trend, create a new data series:
[source,text]
----------------------------------
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt,11300000000,
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null)
.label('warning')
.color('#FFCC11'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt,11375000000,
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null).
label('severe')
.color('red'),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.mvavg(10) <1>
----------------------------------
<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 using functions:
[source,text]
----------------------------------
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.label('max memory') <1>
.title('Memory consumption over time'), <2>
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt,
11300000000,
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null)
.label('warning')
.color('#FFCC11') <3>
.lines(width=5), <4>
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.if(gt,
11375000000,
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes'),
null)
.label('severe')
.color('red')
.lines(width=5),
.es(index=metricbeat-*,
timefield='@timestamp',
metric='max:system.memory.actual.used.bytes')
.mvavg(10)
.label('mvavg')
.lines(width=2)
.color(#5E5E5E)
.legend(columns=4, position=nw) <5>
----------------------------------
<1> `.label()` adds custom labels to the visualization.
<2> `.title()` adds a title with a meaningful name.
<3> `.color()` changes the color of the data. Supported color types include standard color names, hexadecimal values, or a color schema for grouped data.
<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}
For additional information on Timelion conditional capabilities, go to https://www.elastic.co/blog/timeseries-if-then-else-with-timelion[I have but one .condition()].
* <<reference-for-kibana-extensions,Reference for Kibana extensions>>
* <<resources-and-examples,Resources and examples>>

2
docs/user/introduction.asciidoc
View file

@ -53,7 +53,7 @@ image::images/intro-discover.png[Discover UI]
=== Visualize & analyze
A visualization is worth a thousand log lines, and {kib} provides
many options for showcasing your data. Use <<lens, Lens>>,
many options for showcasing your data. Use *Lens*,
our drag-and-drop interface,
to rapidly build
charts, tables, metrics, and more. If there