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

[DOCS] Reformats Dashboard (#111463)

Browse source 
* [DOCS] Updates the Dashboard docs for 7.15

* Reformatting

* Reformatting

* Adds experimental tag to controls

* Review comments

* Review comments

* Removes Labs from Dashboard
This commit is contained in:
Kaarina Tungseth 2021-09-15 14:22:26 -05:00 committed by GitHub
parent 6351152215
commit 01615576a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 535 additions and 736 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
docs/user/dashboard/aggregation-based.asciidoc
View file

@ -187,8 +187,33 @@ TIP: Aggregation-based panels support a maximum of three *Split series*.
[role="screenshot"]
image:images/bar-chart-tutorial-2.png[Bar chart with sample logs data]
[float]
[[save-the-aggregation-based-panel]]
===== Save and add the panel
Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving.
To save the panel to the *Visualize Library*:
. Click *Save to library*.
. Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
. Make sure that *Add to Dashboard after saving* is selected.
. Click *Save and return*.
To save the panel to the dashboard:
. Click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. On the *Customize panel* window, select *Show panel title*.
.. Enter the *Panel title*, then click *Save*.

467
docs/user/dashboard/aggregation-reference.asciidoc
View file

@ -1,467 +0,0 @@
[[aggregation-reference]]
== Supported features by panel type
Each panel type in {kib} supports different features and {ref}/search-aggregations.html[{es} aggregations].
This reference can help simplify the comparison if you need a specific feature.
[float]
[[chart-types]]
=== Supported panel types by editor
[options="header"]
|===
| Type | Lens | TSVB | Agg-based | Vega | Timelion
| Table
| &check;
| &check;
| &check;
|
|
| Bar, line, and area
| &check;
| &check;
| &check;
| &check;
| &check;
| Split chart/small multiples
|
| &check;
| &check;
| &check;
|
| Pie and donut
| &check;
|
| &check;
| &check;
|
| Sunburst
| &check;
|
| &check;
| &check;
|
| Treemap
| &check;
|
|
| &check;
|
| Heat map
| &check;
| &check;
| &check;
| &check;
|
| Gauge and Goal
|
| &check;
| &check;
| &check;
|
| Markdown
|
| &check;
|
|
|
| Metric
| &check;
| &check;
| &check;
| &check;
|
| Tag cloud
|
|
| &check;
| &check;
|
|===
[float]
[[table-features]]
=== Table features
[options="header"]
|===
| Type | Lens | TSVB | Agg-based
| Summary row
| &check;
|
| &check;
| Pivot table
| &check;
|
|
| Calculated column
| Formula
| &check;
| Percent only
| Color by value
| &check;
| &check;
|
|===
[float]
[[xy-features]]
=== Bar, line, area features
[options="header"]
|===
| Type | Lens | TSVB | Agg-based | Vega | Timelion
| Dense time series
| Customizable
| &check;
| Customizable
| &check;
| &check;
| Percentage mode
| &check;
| &check;
| &check;
| &check;
|
| Break downs
| 1
| 1
| 3
| &infin;
| 1
| Custom color with break downs
|
| Only for Filters
| &check;
| &check;
|
| Fit missing values
| &check;
|
| &check;
| &check;
| &check;
| Synchronized tooltips
|
| &check;
|
|
|
|===
[float]
[[bucket-aggregations]]
=== Bucket aggregations
Vega supports all bucket aggregations because it allows custom queries.
For information about {es} bucket aggregations, refer to {ref}/search-aggregations-bucket.html[Bucket aggregations].
[options="header"]
|===
| Type | Lens | TSVB | Agg-based
| Histogram
| &check;
|
| &check;
| Date histogram
| &check;
| &check;
| &check;
| Date range
| Use filters
|
| &check;
| Filter
|
| &check;
|
| Filters
| &check;
| &check;
| &check;
| GeoHash grid
|
|
| &check;
| IP range
| Use filters
| Use filters
| &check;
| Range
| &check;
| Use filters
| &check;
| Terms
| &check;
| &check;
| &check;
| Significant terms
|
|
| &check;
|===
[float]
[[metrics-aggregations]]
=== Metrics aggregations
Vega supports all metric aggregations because it allows custom queries.
For information about {es} metrics aggregations, refer to {ref}/search-aggregations-metrics.html[Metrics aggregations].
[options="header"]
|===
| Type | Lens | TSVB | Agg-based
| Metrics with filters
| &check;
|
|
| Average, Sum, Max, Min
| &check;
| &check;
| &check;
| Unique count (Cardinality)
| &check;
| &check;
| &check;
| Percentiles and Median
| &check;
| &check;
| &check;
| Percentiles Rank
|
| &check;
| &check;
| Standard deviation
|
| &check;
| &check;
| Sum of squares
|
| &check;
|
| Top hit (Last value)
| &check;
| &check;
| &check;
| Value count
|
|
| &check;
| Variance
|
| &check;
|
|===
[float]
[[pipeline-aggregations]]
=== Pipeline aggregations
Vega supports all pipeline aggregations because it allows custom queries.
For information about {es} pipeline aggregations, refer to {ref}/search-aggregations-pipeline.html[Pipeline aggregations].
[options="header"]
|===
| Type | Lens | TSVB | Agg-based
| Avg bucket
| <<lens-formulas, `overall_average` formula>>
| &check;
| &check;
| Derivative
| &check;
| &check;
| &check;
| Max bucket
| <<lens-formulas, `overall_max` formula>>
| &check;
| &check;
| Min bucket
| <<lens-formulas, `overall_min` formula>>
| &check;
| &check;
| Sum bucket
| <<lens-formulas, `overall_sum` formula>>
| &check;
| &check;
| Moving average
| &check;
| &check;
| &check;
| Cumulative sum
| &check;
| &check;
| &check;
| Bucket script
|
|
| &check;
| Bucket selector
|
|
|
| Serial differencing
|
| &check;
| &check;
|===
[float]
[[custom-functions]]
=== Additional functions
[options="header"]
|===
| Type | Lens | TSVB | Agg-based
| Counter rate
| &check;
| &check;
|
| <<tsvb-function-reference, Filter ratio>>
| Use <<lens-formulas, formula>>
| &check;
|
| <<tsvb-function-reference, Positive only>>
|
| &check;
|
| <<tsvb-function-reference, Series agg>>
|
| &check;
|
| Static value
|
| &check;
|
|===
[float]
[[other-features]]
=== Other features
This comparison is meant for users who are not sure about which {kib} panel type to
build their advanced visualization.
[options="header"]
|===
| Type | Lens | TSVB | Agg-based | Vega | Timelion
| Math
| &check;
| &check;
|
| &check;
| &check;
| Visualize two indices
| &check;
| &check;
|
| &check;
| &check;
| Math across indices
|
|
|
| &check;
| &check;
| Time shifts
| &check;
| &check;
|
| &check;
| &check;
| Fully custom {es} queries
|
|
|
| &check;
|
| Normalize by time
| &check;
| &check;
|
|
|
|===

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

@ -1,5 +1,5 @@
[[dashboard]]
= Dashboard
= Dashboard and visualizations
[partintro]
--
@ -11,14 +11,13 @@ that bring clarity to your data, tell a story about your data, and allow you to
[role="screenshot"]
image:images/Dashboard_example.png[Example dashboard]
Panels display your data in charts, tables, maps, and more, which allow you to compare your data side-by-side to identify patterns and connections. Dashboards support several editors you can use to create panels, and support many types of panels to display your data.
Panels display your data in charts, tables, maps, and more, which allow you to compare your data side-by-side to identify patterns and connections. Dashboards support several types of panels to display your data, and several options to create panels.
[cols="2"]
|===
| <<aggregation-reference,Editors>>
| Use the *Lens*, *TSVB*, *Vega*, and *Timelion* editors to create visualizations of your data, or create *Aggregation based* visualizations using {es} aggregations.
*Lens* is the recommended editor.
| Use one of the editors to create visualizations of your data. Each editor varies in capabilities for all levels of analysts.
| <<maps,Maps>>
| Create beautiful displays of your geographical data.
@ -33,7 +32,10 @@ Panels display your data in charts, tables, maps, and more, which allow you to c
| Display a table of live streaming logs.
| <<add-controls,Tools>>
| Add context to your panels with <<add-text,text>>, or add dynamic filters with <<add-controls,*Controls*>>.
| Add interactive filters with *Controls* panels.
| <<add-text,Text>>
| Add context to your panels with *Text*.
|===
@ -61,71 +63,115 @@ refer to <<xpack-security-authorization,Granting access to {kib}>>.
[[open-the-dashboard]]
=== Open the dashboard
Begin with an empty dashboard, or open an existing dashboard.
Begin with an empty dashboard, or open an existing dashboard.
. Open the main menu, then click *Dashboard*.
. On the *Dashboards* page, choose one of the following options:
* To start with an empty dashboard, click *Create dashboard*.
+
When you create a dashboard, you are automatically in edit mode and can make changes to the dashboard.
* To open an existing dashboard, click the dashboard *Title* you want to open.
+
When you open an existing dashboard, you are in view mode. To make changes to the dashboard, click *Edit* in the toolbar.
[float]
[[create-panels-with-lens]]
=== Add panels
=== Create and add panels
Create and add panels of your data to the dashboard, or add existing panels from the library.
You create panels using the editors, which you can access from the dashboard toolbar or the *Visualize Library*, or add panels that are saved in the *Visualize Library*, or search results from <<save-your-search,*Discover*>>.
* *Create visualization* &mdash; Opens *Lens*, the recommended editor to create visualizations of your data.
To create panels from the dashboard toolbar, use one of the following options:
* *All types* &mdash; Select the editor to create the panel, or select the panel type you want to add to the dashboard.
* *Create visualization* &mdash; Opens the drag-and-drop editor, which is the recommended way to create visualization panels.
* *Add from library* &mdash; Add panels from the *Visualize Library*, including search results from <<save-your-search,*Discover*>>. The search results from *Discover* are not aggregated.
* *All types* &mdash; Opens the menu for all of the editors and panel types.
To create panels from the *Visualize Library*:
. Open the main menu, then click *Visualize Library*.
. Click *Create visualization*, then select an editor.
To add existing panels from the *Visualize Library*:
. In the dashboard toolbar, click *Add from library*.
. Click the panel you want to add to the dashboard, then click *X*.
+
When a panel contains a saved query, both queries are applied.
+
When you add search results from *Discover* to dashboards, the results are not aggregated.
[[tsvb]]
[float]
[[save-panels]]
=== Save panels
=== Save and add panels
Consider where you want to save the panel in {kib}. You can save the panel just on the dashboard you are working on, or save the panel in the *Visualize Library*.
Consider where you want to save and add the panel in {kib}.
[float]
[[save-to-visualize-library]]
==== Save to the Visualize Library
To use the panel on *Canvas* workpads and other dashboards, save the panel to the *Visualize Library*.
To use the panel on other dashboards and *Canvas* workpads, save the panel to the *Visualize Library*. When panels are saved in the *Visualize Library*, image:dashboard/images/visualize-library-icon.png[Visualize Library icon] appears in the panel header.
. Click *Save to library*.
If you created the panel from the dashboard:
. Enter the *Title* and add any applicable *Tags*.
. In the editor, click *Save to library*.
. Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
. Make sure that *Add to Dashboard after saving* is selected.
. Click *Save and return*.
+
When panels are saved in the *Visualize Library*, image:dashboard/images/visualize-library-icon.png[Visualize Library icon] appears in the panel header.
If you created the panel from the *Visualize Library*:
. In the editor, click *Save*.
. On the *Save* window, enter the *Title*.
. Choose one of the following options:
* To save the panel to a dashboard and the *Visualize Library*, select *Add to library*, add any applicable <<managing-tags,*Tags*>>, then click *Save and go to Dashboard*.
* To save the panel only to the *Visualize Library*, select *None*, add any applicable <<managing-tags,*Tags*>>, then click *Save and add to library*.
[float]
[[save-to-the-dashboard]]
==== Save to the dashboard
Quickly add the panel and return to the dashboard without specifying the save options or adding the panel to the *Visualize Library*.
Return to the dashboard and add the panel without specifying the save options or adding the panel to the *Visualize Library*.
. Click *Save and return*.
If you created the panel from the dashboard:
. Add more panels to the dashboard, or specify the panel title.
. In the editor, click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. Select *Show panel title*.
.. On the *Customize panel* window, select *Show panel title*.
.. Enter the *Panel title*.
.. Enter the *Panel title*, then click *Save*.
If you change your mind and want to add the panel to the *Visualize Library*:
If you created the panel from the *Visualize Library*:
. Click *Save*.
. On the *Save* window, enter the *Title*.
. Choose one of the following options:
* If you want to add the panel to an existing dashboard, select *Existing*, select the dashboard from the dropdown, then click *Save and go to Dashboard*.
* If you want to add the panel to a new dashboard, select *New*, then click *Save and go to Dashboard*.
To add unsaved dashboard panels to the *Visualize Library*:
. Open the panel menu, then select *More > Save to library*.
@ -135,33 +181,77 @@ If you change your mind and want to add the panel to the *Visualize Library*:
[[add-text]]
== Add context to panels
To provide context to your dashboard panels, add *Text* panels that display important information, instructions, images, and more.
To provide context to your dashboard panels, add *Text* panels that display important information, instructions, images, and more. You create *Text* panels using GitHub-flavored Markdown text.
You create *Text* panels using GitHub-flavored Markdown text. For information about GitHub-flavored Markdown text, click *Help*.
. From the dashboard, click *All types*, then select *Text*.
. On the dashboard, click image:images/dashboard_createNewTextButton_7.15.0.png[Create New Text button in dashboard toolbar].
. In the *Markdown* field, enter the text, then click *Update*.
For example, when you enter:
[role="screenshot"]
image::images/markdown_example_1.png[]
image::images/markdown_example_1.png[Markdown text with links]
The following instructions are displayed:
[role="screenshot"]
image::images/markdown_example_2.png[]
image::images/markdown_example_2.png[Panel with markdown link text]
Or when you enter:
[role="screenshot"]
image::images/markdown_example_3.png[]
image::images/markdown_example_3.png[Markdown text with image file]
The following image is displayed:
[role="screenshot"]
image::images/markdown_example_4.png[]
image::images/markdown_example_4.png[Panel with markdown image]
For detailed information about writing on GitHub, click *Help*.
[float]
[[save-the-markdown-panel]]
=== Save and add the panel
Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving.
To save the panel to the *Visualize Library*:
. Click *Save to library*.
. Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
. Make sure that *Add to Dashboard after saving* is selected.
. Click *Save and return*.
To save the panel to the dashboard:
. Click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. On the *Customize panel* window, select *Show panel title*.
.. Enter the *Panel title*, then click *Save*.
[float]
[[arrange-panels]]
[[moving-containers]]
[[resizing-containers]]
== Arrange panels
Compare the data in your panels side-by-side, organize panels by priority, resize the panels so they all appear immediately on the dashboard, and more.
In the toolbar, click *Edit*, then use the following options:
* To move, click and hold the panel header, then drag to the new location.
* To resize, click the resize control, then drag to the new dimensions.
* To maximize to fullscreen, open the panel menu, then click *More > Maximize panel*.
[float]
[[edit-panels]]
@ -187,51 +277,6 @@ To make changes without changing the original version, open the panel menu, then
+
If you want to use the panel later, make sure that you save the panel to the *Visualize Library*.
[float]
[[search-or-filter-your-data]]
== Search and filter your data
{kib} supports several ways to search your data and apply {es} filters. You can combine the filters with any panel
filter to display the data want to you see.
For more information about {kib} and {es} filters, refer to <<kibana-concepts-analysts,{kib} concepts>>.
To apply a panel-level time filter:
. Open the panel menu, then select *More > Customize time range*.
. Enter the time range you want to view, then click *Add to panel*.
[float]
[[arrange-panels]]
[[moving-containers]]
[[resizing-containers]]
== Arrange panels
To compare the data side-by-side, move and arrange the panels.
In the toolbar, click *Edit*, then use the following options:
* To move, click and hold the panel header, then drag to the new location.
* To resize, click the resize control, then drag to the new dimensions.
* To maximize to fullscreen, open the panel menu, then click *More > Maximize panel*.
[float]
[[apply-design-options]]
== Apply design options
Apply a set of design options to the entire dashboard.
In the toolbar, click *Edit > Options*, then use the following options:
* *Use margins between panels* &mdash; Specifies a margin of space between each panel.
* *Show panel titles* &mdash; Specifies the appearance of titles in the header of each panel.
* *Sync color pallettes across panels* &mdash; Specifies whether the color pallette is applied to all panels.
[float]
[[duplicate-panels]]
== Duplicate panels
@ -262,22 +307,57 @@ Copy panels from one dashboard to another dashboard.
. On the *Copy to dashboard* window, select the dashboard, then click *Copy and go to dashboard*.
[float]
[[explore-the-underlying-documents]]
== Explore the underlying documents
[[search-or-filter-your-data]]
== Search and filter your data
You can add additional interactions that allow you to open *Discover* from dashboard panels. To use the interactions, the panel must use only one index pattern.
{kib} supports several ways to search your data and apply {es} filters. You can combine the filters with any panel
filter to display the data want to you see.
Panel interaction:: Opens the data in *Discover* with the current dashboard filters, but does not take the filters
saved with the panel.
+
To enable panel interactions, refer to <<settings-explore-data-in-context,`xpack.discoverEnhanced.actions.exploreDataInContextMenu.enabled`>>.
+
NOTE: In {kib} 7.13 and earlier, the panel interaction is enabled by default.
For more information about {kib} and {es} filters, refer to <<kibana-concepts-analysts,{kib} concepts>>.
Series interaction::
Opens the series data in *Discover* from inside the panel.
+
To enable series interactions, refer to <<settings-explore-data-in-chart,`xpack.discoverEnhanced.actions.exploreDataInChart.enabled`>>.
To apply a panel-level time filter:
. Open the panel menu, then select *More > Customize time range*.
. Enter the time range you want to view, then click *Add to panel*.
[float]
[[apply-design-options]]
== Apply design options
Apply a set of design options to the entire dashboard.
. If you're in view mode, click *Edit* in the toolbar.
. In the toolbar, *Options*, then use the following options:
* *Use margins between panels* &mdash; Adds a margin of space between each panel.
* *Show panel titles* &mdash; Displays the titles in the panels headers.
* *Sync color pallettes across panels* &mdash; Applies the same color palette to all panels on the dashboard.
[float]
[[save-dashboards]]
== Save dashboards
When you've finished making changes to the dashboard, save it.
If you are saving a new dashboard:
. In the toolbar, click *Save*.
. On the *Save dashboard* window, enter the *Title* and an optional *Description*.
. Add any applicable <<managing-tags,*Tags*>>.
. To save the time filter to the dashboard, select *Store time with dashboard*.
. Click *Save*.
If you are saving an existing dashboard, click *Save*.
To exit *Edit* mode, click *Switch to view mode*.
[float]
[[download-csv]]

69
docs/user/dashboard/enhance-dashboards.asciidoc
View file

@ -1,69 +0,0 @@
[[enhance-dashboards]]
== Enhance dashboards
You can add filter panels to interact with the data in your visualization panels, and Markdown panels to add context to the data.
To make your dashboard look the way you want, use the editing options.
[float]
[[add-controls]]
=== Add controls
To filter the data on your dashboard in real-time, add a *Controls* panel or use a map panel to <<maps-map-extent-filter, filter you dashboard by map extent>>.
{kib} supports 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.
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
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"]
image::images/dashboard-controls.png[]
. On the dashboard, click *All types*, then select *Controls*.
. Click *Options*, then configure the following options:
* *Update {kib} filters on each change* &mdash; When selected, all interactive inputs create filters that refresh the dashboard. When unselected,
{kib} filters are created only when you click *Apply changes*.
* *Use time filter* &mdash; When selected, the aggregations that generate the options list and time range are connected to the <<set-time-filter,time filter>>.
* *Pin filters for all applications* &mdash; When selected, all filters created by interacting with the inputs are automatically pinned.
. Click *Update*
[float]
[[add-text]]
=== Add text
Add text panels with *Markdown* when you want to provide context to the other panels on your dashboard, such as important information, instructions, and images.
*Markdown* is a text entry field that accepts GitHub-flavored Markdown text. For information about GitHub-flavored Markdown text, click *Help*.
. From the dashboard, click *All types*, then select *Text*.
. In the *Markdown* field, enter the text, then click *Update*.
For example, when you enter:
[role="screenshot"]
image::images/markdown_example_1.png[]
The following instructions are displayed:
[role="screenshot"]
image::images/markdown_example_2.png[]
Or when you enter:
[role="screenshot"]
image::images/markdown_example_3.png[]
The following image is displayed:
[role="screenshot"]
image::images/markdown_example_4.png[]

BIN
docs/user/dashboard/images/dashboard_createNewTextButton_7.15.0.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
docs/user/dashboard/images/markdown_example_1.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 154 KiB

After

Width:  |  Height:  |  Size: 66 KiB

BIN
docs/user/dashboard/images/markdown_example_2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
docs/user/dashboard/images/markdown_example_3.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/user/dashboard/images/markdown_example_4.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 17 KiB

86
docs/user/dashboard/lens.asciidoc
View file

@ -178,7 +178,39 @@ For a time shift example, refer to <<compare-time-ranges>>.
[float]
[[filter-the-data]]
==== Apply filters with the legend
==== Apply filters
You can use the <<semi-structured-search, KQL query bar>> to focus on a known set of data for the entire visualization, or use the filter options from the layer pane or legend.
[float]
[[filter-with-the-function]]
===== Apply multiple KQL filters
With the *Filters* function, you can apply more than one KQL filter, and apply a KQL filter to a single layer so you can visualize filtered and unfiltered data at the same time.
. In the layer pane, click a field.
. Click the *Filters* function.
. Click *Add a filter*, then enter the KQL filter you want to apply.
+
To try the *Filters* function on your own, refer to <<custom-ranges,Compare a subset of documents to all documents>>.
[float]
[[filter-with-the-advanced-option]]
===== Apply a single KQL filter
With the *Filter by* advanced option, you can assign a color to each filter group in *Bar* and *Line and area* visualizations, and build complex tables. For example, to display failure rate and the overall data.
. In the layer pane, click a field.
. Click *Add advanced options*, then select *Filter by*.
. Enter the KQL filter you want to apply.
[float]
[[filter-with-legend-filters]]
===== Apply legend filters
Apply filters to visualizations directly from the values in the legend. *Bar*, *Line and area*, and *Proportion* visualizations support legend filters.
@ -204,32 +236,40 @@ The following component menus are available:
* *Left axis*, *Bottom axis*, and *Right axis* &mdash; Specify how you want to display the chart axes. For example, add axis labels and change the orientation and bounds.
[float]
[[save-the-lens-panel]]
===== Save and add the panel
Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving.
To save the panel to the *Visualize Library*:
. Click *Save to library*.
. Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
. Make sure that *Add to Dashboard after saving* is selected.
. Click *Save and return*.
To save the panel to the dashboard:
. Click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. On the *Customize panel* window, select *Show panel title*.
.. Enter the *Panel title*, then click *Save*.
[float]
[[lens-faq]]
==== Frequently asked questions
=== Frequently asked questions
For answers to common *Lens* questions, review the following.
[discrete]
[[kql]]
.*When should I use KQL filters, the Filters function, or the Filter by option?*
[%collapsible]
====
Use the <<semi-structured-search, KQL *Search*>> field to focus on a known set of data for the entire visualization. You can combine KQL filters with other filters using AND logic.
Use the *Filters* function to apply:
* More than one KQL filter.
* The KQL filter to a single layer, which allows you to visualize filtered and unfiltered data.
Use the *Filter by* advanced option to:
* Assign a custom color to each filter group in a bar, line, or area chart.
* Build a complex table. For example, to display the failure rate and overall data.
====
[discrete]
[[when-should-i-normalize-the-data-by-unit-or-use-a-custom-interval]]
.*When should I normalize the data by unit or use a custom interval?*
@ -401,4 +441,4 @@ Pagination in a data table is unsupported. To use pagination in data tables, cre
[%collapsible]
====
Specifying the color for a single data point, such as a single bar or line, is unsupported.
====
====

125
docs/user/dashboard/make-dashboards-interactive.asciidoc
View file

@ -1,4 +1,4 @@
[[role="xpack"]]
[role="xpack"]
[[drilldowns]]
== Make dashboards interactive
@ -7,28 +7,7 @@
you to apply dashboard-level filters, and drilldowns that allow you to navigate to other \
dashboards and external websites.
Add interactive capabilities to your dashboard, such as controls that allow you to apply dashboard-level filters, and drilldowns that allow you to navigate to other dashboards and external websites.
*Controls* panels allow you to apply dashboard-level filters based on values from a list, or a range of values.
{kib} supports two types of *Controls*:
* *Options list* &mdash; 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* &mdash; 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"]
image::images/dashboard-controls.png[]
Panels have built-in interactive capabilities that apply filters to the dashboard data. For example, when you drag a time range or click a pie slice, a filter for the time range or pie slice is applied. Drilldowns let you customize the interactive behavior while keeping the context of the interaction.
{kib} supports two types of drilldowns:
* *Dashboard* &mdash; Navigates you from one dashboard to another dashboard. For example, when can create a drilldown for a *Lens* panel that navigates you from a summary dashboard to a dashboard with a filter for a specific host name.
* *URL* &mdash; Navigates you from a dashboard to an external website. For example, a website with the specific host name as a parameter.
Add interactive capabilities to your dashboard, such as controls that allow you to apply dashboard-level filters, and drilldowns that allow you to navigate to *Discover*, other dashboards, and external websites.
++++
<script type="text/javascript" async
@ -48,26 +27,102 @@ Third-party developers can create drilldowns. To learn how to code drilldowns, r
[float]
[[add-controls]]
=== Add Controls panels
=== experimental[] Add Controls panels
Add interactive dashboard-level filter panels to your dashboard.
*Controls* panels allow you to apply dashboard-level filters based on values from a list, or a range of values.
There are two types of *Controls* you can add to dashboards:
* *Options list* &mdash; 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* &mdash; 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"]
image::images/dashboard-controls.png[]
To create *Controls* panels:
. On the dashboard, click *All types*, then select *Controls*.
. Click *Options*, then configure the following options:
. Select the control panel type from the dropdown, then click *Add*.
* *Update {kib} filters on each change* &mdash; When selected, all interactive inputs create filters that refresh the dashboard. When unselected,
{kib} filters are created only when you click *Apply changes*.
. Enter the *Control Label*, then select the *{Data-Source}* and *Field*.
. If you are adding a *Range slider*, enter the *Step Size* and *Decimal Places*.
. Click *Options*, then configure the following:
* *Update {kib} filters on each change* &mdash; When selected, all interactive inputs create filters that refresh the dashboard. When unselected, {kib} filters are created only when you click *Apply changes*.
* *Use time filter* &mdash; When selected, the aggregations that generate the options list and time range are connected to the <<set-time-filter,time filter>>.
* *Pin filters for all applications* &mdash; When selected, all filters created by interacting with the inputs are automatically pinned.
. Click *Update*
. Click *Update*.
[float]
[[save-the-controls-panel]]
==== Save and add the panel
Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving.
To save the panel to the *Visualize Library*:
. Click *Save to library*.
. Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
. Make sure that *Add to Dashboard after saving* is selected.
. Click *Save and return*.
To save the panel to the dashboard:
. Click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. On the *Customize panel* window, select *Show panel title*.
.. Enter the *Panel title*, then click *Save*.
[float]
[[explore-the-underlying-documents]]
=== Open panel data in Discover
You can add interactions to panels that allow you to open *Discover* and explore the panel data. To use the *Discover* interactions, the panel must use only one index pattern, and you must enable <<settings-explore-data-in-context,`xpack.discoverEnhanced.actions.`>> and <<settings-explore-data-in-chart,`xpack.discoverEnhanced.actions.exploreDataInChart.enabled`>> in kibana.yml.
If you are using 7.13.0 and earlier, panel interactions are enabled by default.
There are two types of *Discover* interactions that you can add to dashboards:
* *Panel interactions* &mdash; Opens the panel data in *Discover*, including the dashboard-level filters, but not the panel-level filters.
+
To use panel interactions, open the panel menu, then click *Explore underlying data*.
* *Series data interactions* &mdash; Opens the series data in *Discover*.
+
To use series data interactions, click a data series in the panel.
[float]
[[create-drilldowns]]
=== Create drilldowns
Panels have built-in interactive capabilities that apply filters to the dashboard data. For example, when you drag a time range or click a pie slice, a filter for the time range or pie slice is applied. Drilldowns let you customize the interactive behavior while keeping the context of the interaction.
There are two types of drilldowns you can add to dashboards:
* *Dashboard* &mdash; Navigates you from one dashboard to another dashboard. For example, when can create a drilldown for a *Lens* panel that navigates you from a summary dashboard to a dashboard with a filter for a specific host name.
* *URL* &mdash; Navigates you from a dashboard to an external website. For example, a website with the specific host name as a parameter.
[float]
[[dashboard-drilldowns]]
=== Create dashboard drilldowns
==== Create dashboard drilldowns
Dashboard drilldowns enable you to open a dashboard from another dashboard, taking the time range, filters, and other parameters with you so the context remains the same. Dashboard drilldowns help you to continue your analysis from a new perspective.
@ -86,7 +141,7 @@ The panels you create using the following editors support dashboard drilldowns:
* *Timelion*
[float]
==== Create and set up the dashboards you want to connect
===== Create and set up the dashboards you want to connect
Use the <<gs-get-data-into-kibana,*Sample web logs*>> data to create a dashboard and add panels, then set a search and filter on the *[Logs] Web Traffic* dashboard.
@ -108,7 +163,7 @@ Search: `extension.keyword: ("gz" or "css" or "deb")`
Filter: `geo.src: CN`
[float]
==== Create the drilldown
===== Create the dashboard drilldown
Create a drilldown that opens the *Detailed logs* dashboard from the *[Logs] Web Traffic* dashboard.
@ -133,7 +188,7 @@ image::images/drilldown_on_panel.png[Drilldown on data table that navigates to a
[float]
[[url-drilldowns]]
=== Create URL drilldowns
==== Create URL drilldowns
URL drilldowns enable you to navigate from a dashboard to external websites. Destination URLs can be dynamic, depending on the dashboard context or user interaction with a panel. To create URL drilldowns, you add <<variables,variables>> to a URL template, which configures the behavior of the drilldown.
@ -157,7 +212,7 @@ The panels you create using the following editors support dashboard drilldowns:
* *Aggregation-based* area chart, data table, heat map, horitizontal bar chart, line chart, pie chart, tag cloud, and vertical bar chart
[float]
==== Create a URL drilldown
===== Create a URL drilldown
For example, if you have a dashboard that shows data from a Github repository, you can create a URL drilldown that opens Github from the dashboard panel.
@ -212,7 +267,7 @@ image:images/url_drilldown_github.png[Github]
[float]
[[manage-drilldowns]]
=== Manage drilldowns
==== Manage drilldowns
Make changes to your drilldowns, make a copy of your drilldowns for another panel, and delete drilldowns.

116
docs/user/dashboard/timelion.asciidoc
View file

@ -78,13 +78,13 @@ Example:
<2> `.yaxis(2,units=bytes,position=left)` &mdash; Specifies the second y-axis for the second data series, and changes the units on the right.
[float]
==== Tutorial: Create visualizations with Timelion
=== Tutorial: Create visualizations with Timelion
You collected data from your operating system using Metricbeat, and you want to visualize and analyze the data on a dashboard. To create panels of the data, use *Timelion* to
create a time series visualization,
[float]
===== Add the data and create the dashboard
==== Add the data and create the dashboard
Set up Metricbeat, then create the dashboard.
@ -95,7 +95,7 @@ Set up Metricbeat, then create the dashboard.
. On the *Dashboards* page, click *Create dashboard*.
[float]
===== Open and set up Timelion
==== Open and set up Timelion
Open *Timelion* and change the time range.
@ -111,7 +111,7 @@ To compare the real-time percentage of CPU time spent in user space to the resul
[float]
[[define-the-functions]]
==== Define the functions
===== Define the functions
To track the real-time percentage of CPU, enter the following in the *Timelion Expression* field, then click *Update*:
@ -124,7 +124,7 @@ To track the real-time percentage of CPU, enter the following in the *Timelion E
[float]
[[compare-the-data]]
==== Compare the data
===== Compare the data
To compare two data sets, add another series, and offset the data back by one hour, then click *Update*:
@ -141,7 +141,7 @@ To compare two data sets, add another series, and offset the data back by one ho
[float]
[[add-label-names]]
==== Add label names
===== Add label names
To easily distinguish between the two data sets, add label names, then click *Update*:
@ -157,7 +157,7 @@ To easily distinguish between the two data sets, add label names, then click *Up
[float]
[[add-a-title]]
==== Add a title
===== Add a title
To make is easier for unfamiliar users to understand the purpose of the visualization, add a title, then click *Update*:
@ -177,7 +177,7 @@ To make is easier for unfamiliar users to understand the purpose of the visualiz
[float]
[[change-the-chart-type]]
==== Change the appearance of the chart lines
===== Change the appearance of the chart lines
To differentiate between the current hour and the last hour, change the appearance of the chart lines, then click *Update*:
@ -198,7 +198,7 @@ To differentiate between the current hour and the last hour, change the appearan
[float]
[[change-the-line-colors]]
==== Change the line colors
===== Change the line colors
*Timelion* supports standard color names, hexadecimal values, or a color schema for grouped data.
@ -223,7 +223,7 @@ To make the first data series stand out, change the line colors, then click *Upd
[float]
[[make-adjustments-to-the-legend]]
==== Adjust the legend
===== Adjust the legend
Move the legend to the north west position with two columns, then click *Update*:
@ -249,7 +249,33 @@ Move the legend to the north west position with two columns, then click *Update
image::images/timelion-customize04.png[Final time series visualization]
{nbsp}
To save the panel, click *Save and return* in the toolbar.
[float]
[[save-the-timelion-panel]]
===== Save and add the panel
Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving.
To save the panel to the *Visualize Library*:
. Click *Save to library*.
. Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
. Make sure that *Add to Dashboard after saving* is selected.
. Click *Save and return*.
To save the panel to the dashboard:
. Click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. On the *Customize panel* window, select *Show panel title*.
.. Enter the *Panel title*, then click *Save*.
[float]
[[timelion-tutorial-create-visualizations-with-mathematical-functions]]
@ -358,15 +384,41 @@ Customize and format the visualization using the following functions, then click
image::images/timelion-math05.png[Final visualization that displays inbound and outbound network traffic]
{nbsp}
To save the panel, click *Save and return* in the toolbar.
[float]
[[save-the-network-timelion-panel]]
===== Save and add the panel
Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving.
To save the panel to the *Visualize Library*:
. Click *Save to library*.
. Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
. Make sure that *Add to Dashboard after saving* is selected.
. Click *Save and return*.
To save the panel to the dashboard:
. Click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. On the *Customize panel* window, select *Show panel title*.
.. Enter the *Panel title*, then click *Save*.
[float]
[[timelion-tutorial-create-visualizations-withconditional-logic-and-tracking-trends]]
=== Detect outliers and discover patterns over time
==== Detect outliers and discover patterns over time
To easily detect outliers and discover patterns over time, modify the 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:
With *Timelion* conditional logic, you can use the following operator values to compare your data:
[horizontal]
`eq`:: equal
@ -378,7 +430,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, then click *Update*:
@ -391,7 +443,7 @@ To chart the maximum value of `system.memory.actual.used.bytes`, enter the follo
[float]
[[conditional-track-memory]]
==== Track used memory
===== Track used memory
To track the amount of memory used, create two thresholds, then click *Update*:
@ -431,7 +483,7 @@ and the severe threshold is 11.375GB (`11375000000`). If the threshold values ar
[float]
[[conditional-determine-trend]]
==== Determine the trend
===== Determine the trend
To determine the trend, create a new data series, then click *Update*:
@ -471,7 +523,7 @@ In this example, `.mvavg(10)` creates a moving average with a window of 10 data
[float]
[[conditional-format-visualization]]
==== Customize and format the visualization
===== Customize and format the visualization
Customize and format the visualization using the following functions, then click *Update*:
@ -520,6 +572,32 @@ Customize and format the visualization using the following functions, then click
image::images/timelion-conditional04.png[Final visualization that displays outliers and patterns over time]
{nbsp}
To save the panel, click *Save and return* in the toolbar.
[float]
[[save-the-outlier-timelion-panel]]
===== Save and add the panel
Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving.
To save the panel to the *Visualize Library*:
. Click *Save to library*.
. Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
. Make sure that *Add to Dashboard after saving* is selected.
. Click *Save and return*.
To save the panel to the dashboard:
. Click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. On the *Customize panel* window, select *Show panel title*.
.. Enter the *Panel title*, then click *Save*.
For more information about *Timelion* conditions, refer to https://www.elastic.co/blog/timeseries-if-then-else-with-timelion[I have but one .condition()].

123
docs/user/dashboard/tsvb.asciidoc
View file

@ -39,30 +39,31 @@ By default, *TSVB* drops the last bucket because the time filter intersects the
[float]
[[tsvb-index-pattern-mode]]
==== Index pattern mode
Create *TSVB* visualizations with {kib} index patterns.
==== Change the {data-source} mode
You can create *TSVB* visualizations with only {data-sources}, or {es} index strings.
When you use only {data-sources}, you are able to:
* Create visualizations with runtime fields
* Add URL drilldowns
* Add interactive filters for time series visualizations
* Improve performance
IMPORTANT: Creating *TSVB* visualizations with an {es} index string is deprecated and will be removed in a future release.
It is the default one for new visualizations but it can also be switched for the old implementations:
. Click *Panel options*, then click the gear icon to open the *Index pattern selection mode* options.
. Click *Panel options*, then open the *Index pattern selection mode* options next to the *Index pattern* dropdown.
. Select *Use only Kibana index patterns*.
. Reselect the index pattern from the dropdown, then select the *Time field*.
. From the *Index pattern* drodpown, select the index pattern, then select the *Time field*.
+
image::images/tsvb_index_pattern_selection_mode.png[Change index pattern selection mode action]
The index pattern mode unlocks many new features, such as:
* Runtime fields
* URL drilldowns
* Interactive filters for time series visualizations
* Custom field formats
* Better performance
[float]
[[configure-the-data-series]]
==== Configure the series
@ -151,14 +152,45 @@ The *Markdown* visualization supports Markdown with Handlebar (mustache) syntax
The math context is able to do simple and advanced calculations per series.
This function must always be the last metric in the series.
[float]
[[save-the-tsvb-panel]]
===== Save and add the panel
Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving.
To save the panel to the *Visualize Library*:
. Click *Save to library*.
. Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
. Make sure that *Add to Dashboard after saving* is selected.
. Click *Save and return*.
To save the panel to the dashboard:
. Click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. On the *Customize panel* window, select *Show panel title*.
.. Enter the *Panel title*, then click *Save*.
[float]
[[tsvb-faq]]
==== Frequently asked questions
For answers to frequently asked *TSVB* question, review the following.
[float]
===== How do I create dashboard drilldowns for Top N and Table visualizations?
[discrete]
[[how-do-i-create-dashboard-drilldowns]]
.*How do I create dashboard drilldowns for Top N and Table visualizations?*
[%collapsible]
====
You can create dashboard drilldowns that include the specified time range for *Top N* and *Table* visualizations.
@ -177,9 +209,13 @@ For example `dashboards#/view/f193ca90-c9f4-11eb-b038-dd3270053a27`.
. Click *Save and return*.
. In the toolbar, cick *Save as*, then make sure *Store time with dashboard* is deselected.
====
[float]
===== Why is my TSVB visualization missing data?
[discrete]
[[why-is-my-tsvb-visualiztion-missing-data]]
.*Why is my TSVB visualization missing data?*
[%collapsible]
====
It depends, but most often there are two causes:
@ -188,14 +224,22 @@ It depends, but most often there are two causes:
* For all other *TSVB* visualizations, the cause is probably the *Data timerange mode*, which is controlled by *Panel options > Data timerange mode > Entire time range*.
By default, *TSVB* displays the last whole bucket. For example, if the time filter is set to *Last 24 hours*, and the
current time is 9:41, *TSVB* displays only the last 10 minutes &mdash; from 9:30 to 9:40.
====
[float]
===== How do I calculate the difference between two data series?
[discrete]
[[how-do-i-calculate-the-difference-between-two-data-series]]
.*How do I calculate the difference between two data series?*
[%collapsible]
====
Performing math across data series is unsupported in *TSVB*. To calculate the difference between two data series, use <<timelion, *Timelion*>> or <<vega, *Vega*>>.
====
[float]
===== How do I compare the current versus previous month?
[discrete]
[[how-do-i-compare-the-current-versus-previous-month]]
.*How do I compare the current versus previous month?*
[%collapsible]
====
*TSVB* can display two series with time offsets, but it can't perform math across series. To add a time offset:
@ -205,25 +249,37 @@ Performing math across data series is unsupported in *TSVB*. To calculate the di
image::images/tsvb_clone_series.png[Clone Series action]
. Click *Options*, then enter the offset value in the *Offset series time by* field.
====
[discrete]
[[how-do-i-calculate-a-month-over-month-change]]
.*How do I calculate a month over month change?*
[%collapsible]
====
[float]
===== How do I calculate a month over month change?
The ability to calculate a month over month change is not fully supported in *TSVB*, but there is a special case that is supported _if_ the
time filter is set to 3 months or more _and_ the *Interval* is `1m`. Use the *Derivative* to get the absolute monthly change. To convert to a percent,
add the *Math* function with the `params.current / (params.current - params.derivative)` formula, then select *Percent* from the *Data Formatter* dropdown.
For other types of month over month calculations, use <<timelion, *Timelion*>> or <<vega, *Vega*>>.
====
[discrete]
[[calculate-duration-start-end]]
.*How do I calculate the duration between the start and end of an event?*
[%collapsible]
====
[float]
===== How do I calculate the duration between the start and end of an event?
Calculating the duration between the start and end of an event is unsupported in *TSVB* because *TSVB* requires correlation between different time periods.
*TSVB* requires that the duration is pre-calculated.
====
[discrete]
[group-on-multiple-fields]
.*How do I group on multiple fields?*
[%collapsible]
====
[float]
===== How do I group on multiple fields?
To group with multiple fields, create runtime fields in the index pattern you are visualizing.
. Create a runtime field. Refer to <<managing-index-patterns, *Manage index patterns data fields*>> for more information.
@ -232,3 +288,4 @@ To group with multiple fields, create runtime fields in the index pattern you ar
image::images/tsvb_group_by_multiple_fields.png[Group by multiple fields]
. Create a *TSVB* visualization and group by this field.
====