github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Docs] Refresh dashboards docs (re-do of #191129) (#192305)

Browse source 
## Summary

[redo of #191129 that got reverted] 
This PR updates the structure of the Dashboards docs and refreshes some
outdated parts of the content.
More updates will be made in future PRs to refresh screenshots and to
refresh the content more in depth.

This new structure and edits:
- distribute the pages in more user-oriented identified themes, for
better findability, scanning, and to ease possible integration of some
of these pages into in-app documentation.
- are more future proof to evolve along with upcoming features.

~I'll leave this PR as a draft until I resolve some link dependencies
coming from other docs sources and check some additional bits of
content.~

Preview available on demand on Slack.

Closes: https://github.com/elastic/platform-docs-team/issues/408 (I'll
create separate issues for remaining items)
Closes: https://github.com/elastic/platform-docs-team/issues/413
Closes: https://github.com/elastic/platform-docs-team/issues/418

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Lisa Cawley <lcawley@elastic.co>
This commit is contained in:
florent-leborgne 2024-09-10 10:57:53 +02:00 • committed by GitHub
parent 919ce98c64
commit f23c8997ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
39 changed files with 972 additions and 754 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/management/advanced-options.asciidoc
View file

@ -225,7 +225,8 @@ When enabled, provides access to the experimental *Labs* features for *Canvas*.
[[labs-dashboard-defer-below-fold]]`labs:dashboard:deferBelowFold`::
When enabled, the panels that appear below the fold are loaded when they become visible on the dashboard.
_Below the fold_ refers to panels that are not immediately visible when you open a dashboard, but become visible as you scroll. For additional information, refer to <<dashboard-troubleshooting,Improve dashboard loading time>>.
_Below the fold_ refers to panels that are not immediately visible when you open a dashboard, but become visible as you scroll.
//For additional information, refer to <<dashboard-troubleshooting,Improve dashboard loading time>>.
[[labs-dashboard-enable-ui]]`labs:dashboard:enable_ui`::
When enabled, provides access to the experimental *Labs* features for *Dashboard*.

2
docs/management/numeral.asciidoc
View file

@ -10,7 +10,7 @@ Numeral formatting patterns are used in multiple places in {kib}, including:
* <<advanced-options, Advanced settings>>
* <<field-formatters-numeric, Data view formatters>>
* <<tsvb, *TSVB*>>
* <<tsvb-panel, *TSVB*>>
* <<canvas, *Canvas*>>
The simplest pattern format is `0`, and the default {kib} pattern is `0,0.[000]`.

21
docs/redirects.asciidoc
View file

@ -200,19 +200,19 @@ This content has moved. See <<known-kibana-plugins>>.
[[trigger-picker]]
=== Picking a trigger for a URL drilldown
This page has moved. Refer to <<url-drilldowns>>.
This page has moved. Refer to <<create-url-drilldowns>>.
[float]
[[templating]]
=== URL templating
This page has moved. Refer to <<url_templating-language>>.
This page has moved. Refer to <<url-templating-language>>.
[float]
[[variables]]
=== Variables
This page has moved. Refer to <<url-template-variables>>.
This page has moved. Refer to <<url-template-variable>>.
[float]
[[time-series-visual-builder]]
@ -439,6 +439,20 @@ For the most up-to-date API details, refer to the
This content has moved. Refer to <<manage-cases-settings>>.
[role="exclude", id="create-drilldowns"]
== Create drilldowns
[[url-drilldowns]]
[[url_templating-language]]
[[url-template-variables]]
This content has moved. Refer to <<drilldowns>>.
[role="exclude", id="tsvb"]
== TSVB
[[tsvb-index-pattern-mode]]
This content has moved. Refer to <<tsvb-panel>>.
////
APM redirects
////
@ -1133,4 +1147,3 @@ Refer to {api-kibana}/group/endpoint-cases[cases API].
== Sync {ml} saved objects API
Refer to {api-kibana}/group/endpoint-ml[machine learning APIs].

15
docs/user/dashboard/create-panels-with-editors.asciidoc → docs/user/dashboard/chart-types.asciidoc
View file

@ -1,12 +1,7 @@
[[aggregation-reference]]
== Create panels with editors
{kib} provides several editors that you can use to create panels of your data. Each editor supports different features and {ref}/search-aggregations.html[{es} aggregations]. To choose the best editor for your data, review the following information.
[float]
[[chart-types]]
=== Supported panel types
== Supported chart types
[[aggregation-reference]]
[options="header"]
|===
@ -494,9 +489,3 @@ Pipeline aggregations are dependent on the outputs calculated from other aggrega
|===
For information about {es} pipeline aggregations, refer to {ref}/search-aggregations-pipeline.html[Pipeline aggregations].
include::lens.asciidoc[]
include::tsvb.asciidoc[]
include::vega.asciidoc[]
include::aggregation-based.asciidoc[]
include::timelion.asciidoc[]

151
docs/user/dashboard/create-dashboards.asciidoc Normal file
View file

@ -0,0 +1,151 @@
[[create-dashboards]]
= Build dashboards
{kib} offers many ways to build powerful dashboards that will help you visualize and keep track of the most important information contained in your {es} data.
* Create and assemble visualizations such as charts or maps, and enrich them with helpful legends containing key data.
* Extract and show key indicators and metrics to keep them visible and highlighted at all times.
* Add text, images, and links to help viewers make the most of your dashboard.
* Include additional controls to facilitate filtering and browsing the data.
[float]
[[dashboard-minimum-requirements]]
To create or edit dashboards, you first need to:
* have {ref}/getting-started-index.html[data indexed into {es}] and a <<data-views, data view>>. A data view is a subset of your {es} data, and allows you to load just the right data when building a visualization or exploring it.
+
TIP: If you don't have data at hand and still want to explore dashboards, you can import one of the <<sample-data,sample data sets>> available.
* have sufficient permissions on the **Dashboard** feature. If that's not the case, you might get a read-only indicator. A {kib} administrator can <<kibana-privileges,grant you the required privileges>>.
//include::dashboard-best-practices.asciidoc[]
[[create-dashboard]]
== Create a dashboard
//To make your dashboard experience as good as possible for you and users who will view it, check the <<dashboard-best-practices,dashboard best practices>>.
. Open the *Dashboard* page in {kib}.
. Select *Create dashboard* to start with an empty dashboard.
+
When you create a dashboard, you are automatically in edit mode and can make changes to the dashboard.
[[create-panels-with-lens]]
. Add content to the dashboard. You have several options covered in more details in the <<panels-editors,Visualizations section>>:
** <<lens,**Create visualization**>>. This option is a shortcut to create a chart using **Lens**, the default visualization editor in {kib}.
** <<panels-editors,**Add panel**>>. Choose one of the available panels to add and configure content to your dashboard.
** **Add from library**. Select existing content that has already been configured and saved to the **Visualize Library**.
** <<add-controls,**Controls**>>. Add controls to help filter the content of your dashboard.
. Organize your dashboard by <<arrange-panels,organizing the various panels>>.
[[add-dashboard-settings]]
. Define the main settings of your dashboard from the *Settings* menu located in the toolbar.
.. Meaningful title, description, and <<managing-tags,tags>> allow you to find the dashboard quickly later when browsing your list of dashboard or using the {kib} search bar.
.. Additional display options allow you unify the look and feel of the dashboard's panels:
*** *Store time with dashboard* &mdash; Saves the specified time filter.
*** *Use margins between panels* &mdash; Adds a margin of space between each panel.
*** *Show panel titles* &mdash; Displays the titles in the panel headers.
*** *Sync color palettes across panels* &mdash; Applies the same color palette to all panels on the dashboard.
*** *Sync cursor across panels* &mdash; When you hover your cursor over a time series chart or a heatmap, the cursor on all other related dashboard charts automatically appears.
*** *Sync tooltips across panels* &mdash; When you hover your cursor over a *Lens* chart, the tooltips on all other related dashboard charts automatically appears.
.. Click *Apply*.
. **Save** Save the dashboard.
[[open-the-dashboard]]
== Edit a dashboard
. Open the *Dashboard* page in {kib}.
. Locate the dashboard you want to edit.
+
TIP: When looking for a specific dashboard, you can filter them by tag or by creator, or search the list based on their name and description. Note that the creator information is only available for dashboards created on or after version 8.14.
. Click the dashboard *Title* you want to open.
. Make sure that you are in **Edit** mode to be able to make changes to the dashboard. You can switch between **Edit** and **View** modes from the toolbar.
. Make the changes that you need to the dashboard:
** Adjust the dashboard's settings
** <<panels-editors,Add, remove, move, or edit panels>>
** <<add-controls,Change the available controls>>
[[save-dashboards]]
. **Save** the dashboard. You can then leave the **Edit** mode and *Switch to view mode*.
[[reset-the-dashboard]]
=== Reset dashboard changes
When editing a dashboard, you can revert any changes you've made since the last save using **Reset dashboards**.
NOTE: Once changes are saved, you can no longer revert them in one click, and instead have to edit the dashboard manually.
. In the toolbar, click *Reset*.
. On the *Reset dashboard* window, click *Reset dashboard*.
include::dashboard-controls.asciidoc[leveloffset=-1]
include::drilldowns.asciidoc[leveloffset=-1]
[[arrange-panels]]
== Organize dashboard panels
[[moving-containers]]
[[resizing-containers]]
=== Move and resize 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 full screen, open the panel menu, then click *More > Maximize panel*.
+
TIP: If you <<share-the-dashboard,share>> a dashboard while viewing a full screen panel, the generated link will directly open the same panel in full screen mode.
[[duplicate-panels]]
=== Copy and duplicate panels
To duplicate a panel and the configured functionality, use the clone and copy panel options. Cloned and copied panels replicate all of the functionality from the original panel,
including renaming, editing, and cloning.
[float]
[[clone-panels]]
==== Duplicate panels
Duplicated panels appear next to the original panel, and move the other panels to provide a space on the dashboard.
. In the toolbar, click *Edit*.
. Open the panel menu, then select *Duplicate panel*.
[float]
[[copy-to-dashboard]]
==== Copy panels
Copy panels from one dashboard to another dashboard.
. Open the panel menu, then select *More > Copy to dashboard*.
. On the *Copy to dashboard* window, select the dashboard, then click *Copy and go to dashboard*.
== Import dashboards
You can import dashboards from the **Saved Objects** page under **Stack Management**. Refer to <<managing-saved-objects,Manage saved objects>>.
When importing dashboards, you also import their related objects, such as data views and visualizations. Import options allow you to define how the import should behave with these related objects.
* **Check for existing objects**: When selected, objects are not imported when another object with the same ID already exists in this space or cluster. For example, if you import a dashboard that uses a data view which already exists, the data view is not imported and the dashboard uses the existing data view instead. You can also chose to select manually which of the imported or the existing objects are kept by selecting **Request action on conflict**.
* **Create new objects with random IDs**: All related objects are imported and are assigned a new ID to avoid conflicts.
image:images/dashboard-import-saved-object.png[Import panel]

306
docs/user/dashboard/create-visualizations.asciidoc Normal file
View file

@ -0,0 +1,306 @@
= Panels and visualizations
{kib} provides many options to create panels with visualizations of your data and add content to your dashboards. From advanced charts, maps, and metrics to plain text and images, multiple types of panels with different capabilities are available.
Use one of the editors to create visualizations of your data. Each editor offers various capabilities.
[[panels-editors]]
[cols="3", options="header"]
|===
| **Content** | **Panel type** | **Description**
.5+| Visualizations
| <<lens,Lens>>
| The default editor for creating powerful <<chart-types,charts>> in {kib}
| link:{ref}/esql-kibana.html[ES\|QL]
| Create visualizations from ES\|QL queries
| <<maps,Maps>>
| Create beautiful displays of your geographical data
| <<field-statistics-dashboard,Field statistics>>
| Add a field statistics view of your data to your dashboards
| <<vega, Custom visualizations>>
| Use Vega to create new types of visualizations
.3+| Annotations and navigation
| <<add-text,Text>>
| Add context to your dashboard with markdown-based *text*
| <<add-image,Image>>
| Personalize your dashboard with custom images
| <<dashboard-links,Links>>
| Add links to other dashboards or to external websites
.4+| Machine Learning and Analytics
| <<xpack-ml-anomalies,Anomaly swim lane>>
| Display the results from machine learning anomaly detection jobs
| <<xpack-ml-anomalies,Anomaly chart>>
| Display an anomaly chart from the *Anomaly Explorer*
| <<xpack-ml-anomalies,Single metric viewer>>
| Display an anomaly chart from the *Single Metric Viewer*
| <<change-point-detection,Change point detection>>
| Display a chart to visualize change points in your data
.3+| Observability
| link:{observability-guide}/slo.html[SLO overview]
| Visualize a selected SLO’s health, including name, current SLI value, target, and status
| link:{observability-guide}/slo.html[SLO Alerts]
| Visualize one or more SLO alerts, including status, rule name, duration, and reason. In addition, configure and update alerts, or create cases directly from the panel
| link:{observability-guide}/slo.html[SLO Error Budget]
| Visualize the consumption of your SLO's error budget
.3+| Legacy
| <<logs-app,Log stream>> (deprecated)
| Display a table of live streaming logs
| <<add-aggregation-based-visualization-panels,Aggregation based>>
.2+| While these panel types are still available, we recommend to use <<lens,Lens>>
| <<tsvb-panel,TSVB>>
|===
include::chart-types.asciidoc[]
[[manage-panels]]
== Manage panels
When creating a panel, you can choose to add it to a dashboard, or to save it to the Visualize Library so it can be added to multiple dashboards later.
There are also some common options that you can configure on the various types of panels to make a dashboard easier to navigate and analyze.
[float]
[[save-the-markdown-panel]]
[[save-to-visualize-library]]
=== Save to the Visualize Library
To use a panel on multiple dashboards, you can save it to the *Visualize Library*. Any updates made to a shared panel is replicated to all dashboards where the panel is added.
//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 a dashboard:
. In the editor, click *Save to library*.
. Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
. Select *Add to Dashboard after saving* to add the panel to your dashboard at the same time.
. Click *Save and return*.
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
Return to the dashboard and add the panel without specifying the save options or adding the panel to the *Visualize Library*.
If you created the panel from a dashboard:
. In the editor, click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. On the *Panel settings* window, select *Show title*.
.. Enter the *Title*, then click *Save*.
If you created the panel from the *Visualize Library*:
. Click *Save*.
. On the *Save* window, add a *Title* to name the visualization.
. 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*.
. Enter the panel title, then click *Save*.
[[explore-the-underlying-documents]]
=== Link to Discover
You can add interactions to panels that allow you to open and explore the data in *Discover*. To use the interactions, the panel must use only one data view.
There are three types of *Discover* interactions you can add to dashboard panels:
* *Panel interactions* &mdash; Opens panel data in *Discover*, including the dashboard-level filters, but not the panel-level filters.
+
To enable panel interactions, configure <<settings-explore-data-in-context,`xpack.discoverEnhanced.actions.exploreDataInContextMenu.enabled`>> in kibana.yml. If you are using 7.13.0 and earlier, panel interactions are enabled by default.
+
To use panel interactions, open the panel menu, then click *Explore underlying data*.
* *Series data interactions* &mdash; Opens the series data in *Discover*.
+
To enable series data interactions, configure <<settings-explore-data-in-chart,`xpack.discoverEnhanced.actions.exploreDataInChart.enabled`>> in kibana.yml. If you are using 7.13.0 and earlier, data series interactions are enabled by default.
+
To use series data interactions, click a data series in the panel.
* *Saved search interactions* &mdash; Opens <<save-your-search,saved search>> data in *Discover*.
+
To use saved search interactions, open the panel menu, then click *More > View saved search*.
[[edit-panels]]
=== Edit panels
To make changes to the panel, use the panel menu options.
. In the toolbar, click *Edit*.
. Open the panel menu, then use the following options:
* *Edit visualization* &mdash; Opens the editor so you can make changes to the panel.
+
To make changes without changing the original version, open the panel menu, then click *More > Unlink from library*.
* *Convert to Lens* &mdash; Opens *TSVB* and aggregation-based visualizations in *Lens*.
* *Panel settings* &mdash; Opens the *Panel settings* window to change the *title*, *description*, and *time range*.
* *More > Replace panel* &mdash; Opens the *Visualize Library* so you can select a new panel to replace the existing panel.
* *More > Delete from dashboard* &mdash; Removes the panel from the dashboard.
+
If you want to use the panel later, make sure that you save the panel to the *Visualize Library*.
include::lens.asciidoc[leveloffset=-1]
[[esql-visualizations]]
== ES|QL visualizations
You can add ES|QL visualizations to a dashboard directly from queries in Discover, or you can start from a dashboard.
[float]
=== Edit and add from Discover
In Discover, {ref}/esql-kibana.html[typing ES|QL queries] automatically shows a visualization. The visualization type depends on the content of the query: histogram, bar charts, etc. You can manually make changes to that visualization and edit its type and display options using the
pencil button image:images/esql-icon-edit-visualization.svg[pencil button].
You can then **Save** and add it to an existing or a new dashboard using the save button of the visualization image:images/esql-icon-save-visualization.svg[save button].
[float]
=== Create from dashboard
. From your dashboard, select **Add panel**.
. Choose **ES|QL** under **Visualizations**. An ES|QL editor appears and lets you configure your query and its associated visualization. The **Suggestions** panel can help you find alternative ways to configure the visualization.
+
TIP: Check the link:esql-language.html[ES|QL reference] to get familiar with the syntax and optimize your query.
. When editing your query or its configuration, run the query to update the preview of the visualization.
+
image:https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt69dcceb4f1e12bc1/66c752d6aff77d384dc44209/edit-esql-visualization.gif[Previewing an ESQL visualization]
. Select **Apply and close** to save the visualization to the dashboard.
[[maps-visualizations]]
== Maps
The Maps editor has extensive documentation. For your reading comfort, we have moved it to <<maps,this section>>.
[[field-statistics-dashboard]]
== Field statistics
**Field statistics** panels allow to display a table with additional field information in your dashboards, such as document count, values, and distribution.
. From your dashboard, select **Add panel**.
. Choose **Field statistics** under **Visualizations**. An ES|QL editor appears and lets you configure your query with the fields and information that you want to show.
+
TIP: Check the link:esql-language.html[ES|QL reference] to get familiar with the syntax and optimize your query.
. When editing your query or its configuration, run the query to update the preview of the visualization.
+
image:images/dashboards-field-statistics.png[Editing a field statistics dashboard panel]
. Select **Apply and close** to save the visualization to the dashboard.
include::vega.asciidoc[leveloffset=-1]
[[add-text]]
== Text panels
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.
. 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[Markdown text with links]
The following instructions are displayed:
[role="screenshot"]
image::images/markdown_example_2.png[Panel with markdown link text]
Or when you enter:
[role="screenshot"]
image::images/markdown_example_3.png[Markdown text with image file]
The following image is displayed:
[role="screenshot"]
image::images/markdown_example_4.png[Panel with markdown image]
For detailed information about writing on GitHub, click *Help*.
[[add-image]]
== Image panels
To personalize your dashboards, add your own logos and graphics with the *Image* panel. You can upload images from your computer, select previously uploaded images, or add images from an external link.
. On the dashboard, click image:images/dashboard_createNewImageButton_8.7.0.png[Create New Image button in dashboard toolbar].
. Use the editor to add an image.
[role="screenshot"]
image::images/dashboard_addImageEditor_8.7.0.png[Add image editor]
To manage your uploaded image files, open the main menu, then click *Stack Management > Kibana > Files*.
[WARNING]
============================================================================
When you export a dashboard, the uploaded image files are not exported.
When importing a dashboard with an image panel, and the image file is unavailable, the image panel displays a `not found` warning. Such panels have to be fixed manually by re-uploading the image using the panel's image editor.
============================================================================
include::links-panel.asciidoc[leveloffset=-1]
[[legacy-editors]]
== Legacy editors
include::aggregation-based.asciidoc[]
include::tsvb.asciidoc[]
include::timelion.asciidoc[]

8
docs/user/dashboard/dashboard-troubleshooting.asciidoc → docs/user/dashboard/dashboard-best-practices.asciidoc
View file

@ -1,5 +1,8 @@
[[dashboard-best-practices]]
== Dashboard best practices
[[dashboard-troubleshooting]]
== Improve dashboard loading time
=== Optimize dashboard loading time
To improve the dashboard loading time, enable *Defer loading panels below the fold* *Lab*, which loads dashboard panels as they become visible on the dashboard.
@ -15,5 +18,4 @@ To enable *Labs*, contact your administrator, or configure the <<presentation-la
* *Session* &mdash; Enables the lab for this browser session, then resets after you close the browser.
. Click *Close*.
. Click *Close*.

136
docs/user/dashboard/dashboard-controls.asciidoc Normal file
View file

@ -0,0 +1,136 @@
[[add-controls]]
=== Add filter controls
*Controls* are interactive panels that you add to your dashboards to help viewers filter and display only the data they want to explore quicker. Controls apply to all relevant panels in a dashboard.
There are three types of controls:
* <<create-and-add-options-list-and-range-slider-controls,*Options list*>> &mdash; Adds a dropdown that allows to filter data by selecting one or more values.
+
For example, if you are using the *[Logs] Web Traffic* dashboard from the sample web logs data, you can add an options list for the `machine.os.keyword` field that allows you to display only the logs generated from `osx` and `ios` operating systems.
+
[role="screenshot"]
image::images/dashboard_controlsOptionsList_8.7.0.png[Options list control for the `machine.os.keyword` field with the `osx` and `ios` options selected]
* <<create-and-add-options-list-and-range-slider-controls,*Range slider*>> &mdash; Adds a slider that allows to filter the data within a specified range of values. This type of control only works with numeric fields.
+
For example, if you are using the *[Logs] Web Traffic* dashboard from the sample web logs data, you can add a range slider for the `hour_of_day` field that allows you to display only the log data from 9:00AM to 5:00PM.
+
[role="screenshot"]
image::images/dashboard_controlsRangeSlider_8.3.0.png[Range slider control for the `hour_of_day` field with a range of `9` to `17` selected]
* <<add-time-slider-controls,*Time slider*>> &mdash; Adds a time range slider that allows to filter the data within a specified range of time, advance the time range backward and forward by a unit that you can define, and animate your change in data over the specified time range.
+
For example, you are using the *[Logs] Web Traffic* dashboard from the sample web logs data, and the global time filter is *Last 7 days*. When you add the time slider, you can click the previous and next buttons to advance the time range backward or forward, and click the play button to watch how the data changes over the last 7 days.
[role="screenshot"]
image::images/dashboard_timeSliderControl_8.7.0.gif[Time slider control for the the Last 7 days]
[float]
[[create-and-add-options-list-and-range-slider-controls]]
==== Create and add Options list and Range slider controls
To add interactive Options list and Range slider controls, create the controls, then add them to your dashboard.
. Open or create a new dashboard.
. Make sure you are in *Edit* mode, and select *Controls* > *Add control* in the dashboard toolbar.
. From the *Data view* dropdown, select the data view that contains the field you want to use for the *Control*.
. In the *Field* list, select the field you want to filter on.
. Under *Control type*, select whether the control should be an **Options list** or a **Range slider**.
+
TIP: Range sliders are for Number type fields only.
. Define how you want the control to appear:
** *Label*: Overwrite the default field name with a clearer and self-explanatory label.
** *Minimum width*: How much horizontal space does the control occupies. The final width can vary depending on the other controls and their own width setting.
** *Expand width to fit available space*: Expand the width of the control to fit the available horizontal space on the dashboard.
. Specify the additional settings:
* For option lists:
** Define whether users can select multiple values to filter with the control, or only one.
** For option list controls on _string_ and _IP address_ type fields, you can define how the control's embedded search should behave:
*** **Prefix**: Show options that _start with_ the entered value.
*** **Contains**: Show options that _contain_ the entered value. This setting option is only available for _string_ type fields. Results can take longer to show with this option.
*** **Exact**: Show options that are a 100% match with the entered value.
+
TIP: The search is not case sensitive. For example, searching for `ios` would still retrieve `iOS` if that value exists.
** *Ignore timeout for results* delays the display of the list of values to when it is fully loaded. This option is useful for large data sets, to avoid missing some available options in case they take longer to load and appear when using the control.
* For Range sliders, set the step size. The step size determines the number of steps of the slider. The smaller the step size is, the more steps there is in the slider.
. Click *Save and close*. The control can now be used.
. Consider the position of the control if you have several controls active on the dashboard. Controls are applied from left to right, which can change the options available depending on their position when the <<configure-controls-settings,Chain controls>> setting is enabled.
. Save the dashboard.
[float]
[[add-time-slider-controls]]
==== Add time slider controls
You can add one interactive time slider control to a dashboard.
. Open or create a new dashboard.
. In the dashboard toolbar, click *Controls* > *Add time slider control*.
. The time slider control uses the time range from the global time filter. To change the time range in the time slider control, <<set-time-filter,change the global time filter>>.
. Save the dashboard. The control can now be used.
[float]
[[configure-controls-settings]]
==== Configure the controls settings
Several settings that apply to all controls of a same dashboard are available.
. In the dashboard toolbar, click *Controls*, then select *Settings*.
. On the *Control settings* flyout, configure the settings:
* *Label position* &mdash; Specify where the control label appears.
* *Filtering* settings:
** **Apply global filters to controls** &mdash; Define whether controls should ignore or apply any filter specified in the main filter bar of the dashboard.
** **Apply global time range to controls** &mdash; Define whether controls should ignore or apply the main time range specified for the dashboard. Note that <<add-time-slider-controls,time slider controls>> rely on the global time range and don't work properly when this option is disabled.
* *Selection* settings:
** *Validate user selections* &mdash; When selected, any selected option that results in no data is ignored.
** *Chain controls* &mdash; When selected, controls are applied sequentially from left to right, and line by line. Any selected options in one control narrows the available options in the next control.
** **Apply selections automatically** &mdash; The dashboard is updated dynamically when options are selected in controls. When this option is disabled, users first need to **Apply** their control selection before they are applied to the dashboard.
* To remove all controls from the dashboard, click *Delete all*.
. Click *Save and close* to apply the changes.
[float]
[[edit-controls]]
==== Edit Options list and Range slider control settings
Change the settings for the Options list and Range slider controls.
. Hover over the control you want to edit, then click image:images/dashboard_controlsEditControl_8.3.0.png[The Edit control icon that opens the Edit control flyout].
. On the *Edit control* flyout, change the options, then click *Save and close*.
[float]
[[remove-controls]]
==== Remove controls
Remove controls from your dashboard.
. Hover over the control you want to remove, then click image:images/dashboard_controlsRemoveControl_8.3.0.png[The Remove control icon that removes the control from the dashboard].
. On the *Delete control?* window, click *Delete*.

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

@ -1,458 +1,34 @@
[[dashboard]]
= Dashboard and visualizations
= Dashboards
[partintro]
--
**_Visualize your data with dashboards._**
Dashboards are the best way to visualize and share insights from your {es} data.
The best way to understand your data is to visualize it. With dashboards, you can turn your data from one or more <<data-views, data views>> into a collection of panels
that bring clarity to your data, tell a story about your data, and allow you to focus on only the data that's important to you.
// add link to reference of panel types
A **dashboard** is made of one or more **panels** that you can organize as you like. Each panel can display various types of content: _visualizations_ such as charts, tables, metrics, and maps, _static annotations_ like text or images, or even _specialized views_ for Machine Learning or Observability data.
[role="screenshot"]
image:images/dashboard_ecommerceRevenueDashboard_7.15.0.png[Example dashboard]
image:images/dashboard-overview.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 types of panels to display your data, and several options to create panels.
// add link to create section or list of editors
There are several <<panels-editors,panel editors>> in {kib} that let you create and configure different types of visualizations.
[cols="2"]
|===
// add link to sharing section
At any time, you can <<share-the-dashboard,share a dashboard>> you've created with your team, in {kib} or outside.
| <<aggregation-reference,Editors>>
| 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.
| <<xpack-ml-anomalies,Anomaly swim lane>>
| Display the results from machine learning anomaly detection jobs.
| <<xpack-ml-anomalies,Anomaly chart>>
| Display an anomaly chart from the *Anomaly Explorer*.
| <<logs-app,Log stream>>
| Display a table of live streaming logs.
| <<add-controls,Tools>>
| Add interactive filters with *Controls* panels.
| <<add-text,Text>>
| Add context to your panels with *Text*.
| <<add-image,Image>>
| Personalize your dashboard with a custom image.
|===
[float]
[[create-dashboards]]
== Create dashboards
Dashboards provide you with the space where you add panels of your data.
[float]
[[dashboard-minimum-requirements]]
=== Minimum requirements
To create dashboards, you must meet the minimum requirements.
* If you need to set up {kib}, use https://www.elastic.co/cloud/elasticsearch-service/signup?baymax=docs-body&elektra=docs[our free trial].
* Make sure you have {ref}/getting-started-index.html[data indexed into {es}] and a <<data-views, data view>>.
* When the read-only indicator appears, you have insufficient privileges
to create or save dashboards, and the options to create and save dashboards are not visible. For more information,
refer to <<xpack-security-authorization,Granting access to {kib}>>.
[float]
[[open-the-dashboard]]
=== Open the 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.
+
TIP: When looking for a specific dashboard, you can filter them by tag or by creator, or search the list based on their name and description. Note that the creator information is only available for dashboards created on or after version 8.14.
+
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]]
=== Create and add panels
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*>>.
To create panels from the dashboard toolbar, use one of the following options:
* *Create visualization* &mdash; Opens the drag-and-drop editor, which is the recommended way to create visualization panels.
* *Select type* &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 and add panels
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 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.
If you created the panel from the dashboard:
. 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*.
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
Return to the dashboard and add the panel without specifying the save options or adding the panel to the *Visualize Library*.
If you created the panel from the dashboard:
. In the editor, click *Save and return*.
. Add an optional title to the panel.
.. In the panel header, click *No Title*.
.. On the *Panel settings* window, select *Show title*.
.. Enter the *Title*, then click *Save*.
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*.
. Enter the panel title, then click *Save*.
[float]
[[add-text]]
== Add context to panels
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.
. 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[Markdown text with links]
The following instructions are displayed:
[role="screenshot"]
image::images/markdown_example_2.png[Panel with markdown link text]
Or when you enter:
[role="screenshot"]
image::images/markdown_example_3.png[Markdown text with image file]
The following image is displayed:
[role="screenshot"]
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 *Panel settings* window, select *Show title*.
.. Enter the *Title*, then click *Save*.
[float]
[[add-image]]
== Add image panels
To personalize your dashboards, add your own logos and graphics with the *Image* panel. You can upload images from your computer, select previously uploaded images, or add images from an external link.
. On the dashboard, click image:images/dashboard_createNewImageButton_8.7.0.png[Create New Image button in dashboard toolbar].
. Use the editor to add an image.
[role="screenshot"]
image::images/dashboard_addImageEditor_8.7.0.png[Add image editor]
To manage your uploaded image files, open the main menu, then click *Stack Management > Kibana > Files*.
[WARNING]
============================================================================
When you export a dashboard, the uploaded image files are not exported.
When importing a dashboard with an image panel, and the image file is unavailable, the image panel displays a `not found` warning. Such panels have to be fixed manually by re-uploading the image using the panel's image editor.
============================================================================
[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]]
== Edit panels
To make changes to the panel, use the panel menu options.
. In the toolbar, click *Edit*.
. Open the panel menu, then use the following options:
* *Edit visualization* &mdash; Opens the editor so you can make changes to the panel.
+
To make changes without changing the original version, open the panel menu, then click *More > Unlink from library*.
* *Convert to Lens* &mdash; Opens *TSVB* and aggregation-based visualizations in *Lens*.
* *Panel settings* &mdash; Opens the *Panel settings* window to change the *title*, *description*, and *time range*.
* *More > Replace panel* &mdash; Opens the *Visualize Library* so you can select a new panel to replace the existing panel.
* *More > Delete from dashboard* &mdash; Removes the panel from the dashboard.
+
If you want to use the panel later, make sure that you save the panel to the *Visualize Library*.
[float]
[[duplicate-panels]]
== Duplicate panels
To duplicate a panel and the configured functionality, use the clone and copy panel options. Cloned and copied panels replicate all of the functionality from the original panel,
including renaming, editing, and cloning.
[float]
[[clone-panels]]
=== Clone panels
Cloned panels appear next to the original panel, and move the other panels to provide a space on the dashboard.
. In the toolbar, click *Edit*.
. Open the panel menu, then select *Clone panel*.
+
When cloned panels are saved in the *Visualize Library*, image:dashboard/images/visualize-library-icon.png[Visualize Library icon] appears in the header.
[float]
[[copy-to-dashboard]]
=== Copy panels
Copy panels from one dashboard to another dashboard.
. Open the panel menu, then select *More > Copy to dashboard*.
. On the *Copy to dashboard* window, select the dashboard, then click *Copy and go to dashboard*.
[float]
[[add-dashboard-settings]]
== Add the dashboard settings
Add the title, tags, design options, and more to the dashboard.
. In the toolbar, click *Settings*.
. On the *Dashboard settings* flyout, enter the *Title* and an optional *Description*.
. Add any applicable <<managing-tags,*Tags*>>.
. Specify the following settings:
* *Store time with dashboard* &mdash; Saves the specified time filter.
* *Use margins between panels* &mdash; Adds a margin of space between each panel.
* *Show panel titles* &mdash; Displays the titles in the panel headers.
* *Sync color palettes across panels* &mdash; Applies the same color palette to all panels on the dashboard.
* *Sync cursor across panels* &mdash; When you hover your cursor over a *Lens*, *TSVB*, aggregation-based, or *Timelion* XY or heatmap chart, the cursor on all other related dashboard charts automatically appears.
* *Sync tooltips across panels* &mdash; When you hover your cursor over a *Lens*, *TSVB*, aggregation-based, or *Timelion* XY chart, the tooltips on all other related dashboard charts automatically appears.
. Click *Apply*.
[float]
[[reset-the-dashboard]]
== Reset the dashboard
To remove any dashboard changes you've made, reset the dashboard to the last saved changes.
. In the toolbar, click *Reset*.
. On the *Reset dashboard* window, click *Reset dashboard*.
[float]
[[save-dashboards]]
== Save dashboards
When you've finished making changes to the dashboard, save it.
. In the toolbar, click *Save*.
. To exit *Edit* mode, click *Switch to view mode*.
[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 > Panel settings*.
. Select *Apply a custom time range*.
. Enter the time range you want to view, then click *Save*.
To view and edit panel-level filters:
. On the panel, click image:images/dashboard_panelFiltersButton_8.7.0.png[Panel filters button on panel header].
. To edit, click *Edit filters*.
[float]
[[download-csv]]
== View the panel data and requests
View the data in visualizations and the requests that collect the data.
. Open the panel menu, then click *More > Inspect*.
. View and download the panel data.
.. Open the *View* dropdown, then click *Data*.
.. Click *Download CSV*, then select the format type from the dropdown:
* *Formatted CSV* &mdash; Contains human-readable dates and numbers.
* *Unformatted* &mdash; Best used for computer use.
+
When you download visualization panels with multiple layers, each layer produces a CSV file, and the file names contain the visualization and layer {data-source} names.
. View the requests that collect the data.
.. Open the *View* dropdown, then click *Requests*.
.. From the dropdown, select the requests you want to view.
.. To view the requests in *Console*, click *Request*, then click *Open in Console*.
[float]
[[share-the-dashboard]]
== Share dashboards
To share the dashboard with a larger audience, click *Share* in the toolbar. For detailed information about the sharing options, refer to <<reporting-getting-started,Reporting>>.
[float]
[[import-dashboards]]
== Export dashboards
To automate {kib}, you can export dashboards as NDJSON using the {api-kibana}/group/endpoint-saved-objects[Export saved objects API]. It is important to export dashboards with all necessary references.
Some dashboards are created and managed by the system, and are identified as `managed` in your list of of dashboards. This generally happens when you set up an integration to add data. You can't edit managed dashboards directly, but you can duplicate them and edit these duplicates.
--
include::tutorial-create-a-dashboard-of-lens-panels.asciidoc[]
include::lens-advanced.asciidoc[]
include::use-dashboards.asciidoc[leveloffset=+1]
include::create-panels-with-editors.asciidoc[]
include::create-dashboards.asciidoc[leveloffset=+1]
include::make-dashboards-interactive.asciidoc[]
include::create-visualizations.asciidoc[leveloffset=+1]
include::find-dashboards.asciidoc[]
include::manage-dashboards.asciidoc[leveloffset=+1]
include::dashboard-troubleshooting.asciidoc[]
include::share-dashboards.asciidoc[leveloffset=+1]
include::tutorials.asciidoc[leveloffset=+1]

292
docs/user/dashboard/make-dashboards-interactive.asciidoc → docs/user/dashboard/drilldowns.asciidoc
View file

@ -1,16 +1,18 @@
[role="xpack"]
[[drilldowns]]
== Make dashboards interactive
=== Drilldowns
:frontmatter-description: Add interactive filter and navigation capabilities to your dashboard.
:frontmatter-tags-products: [kibana]
:frontmatter-tags-content-type: [how-to]
:frontmatter-tags-user-goals: [analyze, visualize]
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.
Add interactive capabilities to your dashboard, such as interactive filter controls, and drilldowns that allow you to navigate to *Discover*, other dashboards, and external websites.
There are three types of drilldowns you can add to dashboards:
// Video is slightly outdated. Left in at request of dev team.
// See https://github.com/elastic/kibana/pull/161090#issuecomment-1620410065
* *Dashboard* &mdash; Navigates you from one dashboard to another dashboard. For example, 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.
* *Discover* &mdash; Navigates you from a *Lens* dashboard panel to *Discover*. For example, create a drilldown for a *Lens* visualization that opens the visualization data in *Discover* for further exploration.
Third-party developers can create drilldowns. To learn how to code drilldowns, refer to {kib-repo}blob/{branch}/x-pack/examples/ui_actions_enhanced_examples[this example plugin].
++++
<script type="text/javascript" async
@ -26,272 +28,6 @@ data-type="inline"
</br>
++++
[[add-controls]]
=== Filter dashboard data with controls
*Controls* are interactive panels you add to your dashboards to filter and display only the data you want to explore.
There are three types of controls:
* *Options list* &mdash; Adds a dropdown that allows you to filter the data with one or more options that you select.
+
For example, if you are using the *[Logs] Web Traffic* dashboard from the sample web logs data, you can add an options list for the `machine.os.keyword` field that allows you to display only the logs generated from `osx` and `ios` operating systems.
+
[role="screenshot"]
image::images/dashboard_controlsOptionsList_8.7.0.png[Options list control for the `machine.os.keyword` field with the `osx` and `ios` options selected]
* *Range slider* &mdash; Adds a slider that allows you to filter the data within a specified range of values.
+
For example, if you are using the *[Logs] Web Traffic* dashboard from the sample web logs data, you can add a range slider for the `hour_of_day` field that allows you to display only the log data from 9:00AM to 5:00PM.
+
[role="screenshot"]
image::images/dashboard_controlsRangeSlider_8.3.0.png[Range slider control for the `hour_of_day` field with a range of `9` to `17` selected]
* *Time slider* &mdash; Adds a time range slider that allows you to filter the data within a specified range of time, advance the time range backward and forward, and animate your change in data over the specified time range.
+
For example, you are using the *[Logs] Web Traffic* dashboard from the sample web logs data, and the global time filter is *Last 7 days*. When you add the time slider, you can click the previous and next buttons to advance the time range backward or forward, and click the play button to watch how the data changes over the last 7 days.
[role="screenshot"]
image::images/dashboard_timeSliderControl_8.7.0.gif[Time slider control for the the Last 7 days]
[float]
[[create-and-add-options-list-and-range-slider-controls]]
==== Create and add Options list and Range slider controls
To add interactive Options list and Range slider controls, create the controls, then add them to your dashboard.
. Open or create a new dashboard.
* If you are adding a *Control* to an existing dashboard, click *Edit*, click *Controls* in the dashboard toolbar, then select *Add control*.
* If you are adding a *Control* to a new dashboard, click *Controls* in the dashboard toolbar, then select *Add control*.
. From the *Data view* dropdown, select the data view with the field you want to appear in the *Control*.
. In the *Field* list, select the field with the documents you want to filter.
+
The *Control type* is automatically applied for the field you selected.
. In the *Label* field, enter a clear and self-explanatory label.
. Select the control width:
* To specify the control size, select the *Minimum width*.
* To expand the width of the control to fit the available space on the dashboard, select *Expand width to fit available space*.
. If you are creating an *Options list*, specify the additional settings:
* To allow multiple options to be selected in the dropdown, select *Allow multiple selections in dropdown*.
* To populate the entire list of options, even when the list takes longer to populate than expected, select *Ignore timeout for results*.
. Click *Save and close*.
[float]
[[add-time-slider-controls]]
==== Add time slider controls
To add interactive time slider controls, create the control, then add it to your dashboard.
. Open or create a new dashboard.
. In the dashboard toolbar, click *Controls*, then select *Add time slider control*.
. The time slider control uses the time range from the global time filter. To change the time range in the time slider control, <<set-time-filter,change the global time filter>>.
. Save the dashboard.
[float]
[[filter-the-data-with-options-list-controls]]
==== Filter the data with Options list controls
Filter the data with one or more options that you select.
. Open the Options list dropdown.
. Select the available options.
+
The *Exists* query returns all documents that contain an indexed value for the field.
. Select how to filter the options.
* To display only the data for the options you selected, click *Include*.
* To exclude the data for the options you selected, click *Exclude*.
. To clear the selections, click image:images/dashboard_controlsClearSelections_8.3.0.png[The icon to clear all selected options in the Options list].
. To display only the options you selected in the dropdown, click image:images/dashboard_showOnlySelectedOptions_8.3.0.png[The icon to display only the options you have selected in the Options list].
[float]
[[filter-the-data-with-range-slider-controls]]
==== Filter the data with Range slider controls
Filter the data within a specified range of values.
. On the Range slider, click a value.
. Move the sliders to specify the values you want to display.
+
The dashboard displays only the data for the range of values you specified.
. To clear the specified values, click image:images/dashboard_controlsClearSelections_8.3.0.png[The icon to clear all specified values in the Range slider].
[float]
[[filter-the-data-with-time-slider-controls]]
==== Filter the data with time slider controls
Filter the data within a specified range of time.
. To view a different time range, click the time slider, then move the sliders to specify the time range you want to display.
. To advance the time range forward, click image:images/dashboard_timeSliderControl_advanceForward_8.5.0.png[The icon to advance the time range forward].
. To advance the time range backward, click image:images/dashboard_timeSliderControl_advanceBackward_8.5.0.png[The icon to advance the time range backward].
. To animate the data changes over time, click image:images/dashboard_timeSliderControl_animate_8.5.0.png[The icon to clear all specified values in the Range slider].
. To clear the specified values, click image:images/dashboard_controlsClearSelections_8.3.0.png[The icon to clear all specified values in the Range slider].
[float]
[[configure-controls-settings]]
==== Configure the controls settings
. In the dashboard toolbar, click *Controls*, then select *Settings*.
. On the *Control settings* flyout, configure the settings:
* *Label position* &mdash; Specifies where the label appears on the control.
* *Validate user selections* &mdash; When selected, any selected option that results in no data is ignored.
* *Chain controls* &mdash; When selected, any selected options in one control narrows the available options in the next control.
* To remove all controls from the dashboard, click *Delete all*.
. Click *Save and close*.
[float]
[[edit-controls]]
==== Edit Options list and Range slider control settings
Change the settings for the Options list and Range slider controls.
. Hover over the control you want to edit, then click image:images/dashboard_controlsEditControl_8.3.0.png[The Edit control icon that opens the Edit control flyout].
. On the *Edit control* flyout, change the options, then click *Save and close*.
[float]
[[remove-controls]]
==== Remove controls
Remove controls from your dashboard.
. Hover over the control you want to remove, then click image:images/dashboard_controlsRemoveControl_8.3.0.png[The Remove control icon that removes the control from the dashboard].
. On the *Delete control?* window, click *Delete*.
[[explore-the-underlying-documents]]
=== Open panel data in Discover
You can add interactions to panels that allow you to open and explore the data in *Discover*. To use the interactions, the panel must use only one data view.
There are three types of *Discover* interactions you can add to dashboards:
* *Panel interactions* &mdash; Opens panel data in *Discover*, including the dashboard-level filters, but not the panel-level filters.
+
To enable panel interactions, configure <<settings-explore-data-in-context,`xpack.discoverEnhanced.actions.exploreDataInContextMenu.enabled`>> in kibana.yml. If you are using 7.13.0 and earlier, panel interactions are enabled by default.
+
To use panel interactions, open the panel menu, then click *Explore underlying data*.
* *Series data interactions* &mdash; Opens the series data in *Discover*.
+
To enable series data interactions, configure <<settings-explore-data-in-chart,`xpack.discoverEnhanced.actions.exploreDataInChart.enabled`>> in kibana.yml. If you are using 7.13.0 and earlier, data series interactions are enabled by default.
+
To use series data interactions, click a data series in the panel.
* *Saved search interactions* &mdash; Opens <<save-your-search,saved search>> data in *Discover*.
+
To use saved search interactions, open the panel menu, then click *More > View saved search*.
[[dashboard-links]]
=== Create links to other dashboards
preview::["This functionality is in technical preview, and may be changed or removed in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features."]
You can use *Links* panels to create links to other dashboards or external websites. When creating links to other dashboards, you have the option to carry the time range and query and filters to apply to the linked dashboard. Links to external websites follow the <<external-URL-policy,`externalUrl.policy`>> settings. *Links* panels support vertical and horizontal layouts and may be saved to the *Library* for use on other dashboards.
[role="screenshot"]
image::images/dashboard_links_panel.png[A screenshot displaying the new links panel]
* <<add-links-panel, Add a links panel>>
* <<add-links-panel-from-library, Add a links panel from the library>>
* <<edit-links-panel, Edit links panels>>
* <<delete-links-panels, Delete links panels>>
[float]
[[add-links-panel]]
==== Add a links panel
To add a links panel to your dashboards:
. On the **Dashboards** page, click the dashboard **Title** you want to open.
. Click **Add panel > Links**.
. In the **Create links panel** flyout choose between the panel displaying vertically or horizontally on your dashboard.
. Click **Add link**.
. Specify the following:
* **Go to** - Dashboard to link to another dashboard, or URL to link to an external website.
* **Choose destination** - Use the dropdown to select another dashboard or enter an external URL.
* **Text** - Enter text for the link, which displays in the panel.
* **Options** - When linking to another dashboard use the sliders to use the filters and queries from the original dashboard, use the date range from the original dashboard, or open the dashboard in a new tab. When linking to an external URL use the sliders to open the URL in a new tab, or encode the URL.
. Click **Add link**.
. Click **Save**.
. Enter the **Title** and **Description**, then click **Save**.
[float]
[[add-links-panel-from-library]]
==== Add a links panel from the library
By default links panels are saved to the library. To add a links panel to another dashboard:
. On the **Dashboards** page, click the dashboard **Title** you want to open.
. Click **Add from library**.
. Select the links panel from the **Add from library** flyout.
. Click **Save**.
[float]
[[edit-links-panel]]
==== Edit links panels
To edit links panels:
. Click image:images/lens_layerActions_8.5.0.png[], then **Edit Links**.
. Click image:images/dashboard_controlsEditControl_8.3.0.png[] on the link.
. Click **Update link**.
. Click **Save**.
[float]
[[delete-links-panels]]
==== Delete links panels
To delete links panels:
. Click image:images/lens_layerActions_8.5.0.png[], then **More**.
. Click **Delete from dashboard**.
. Click **Save**.
[[create-drilldowns]]
=== Customize interactions with 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 three types of drilldowns you can add to dashboards:
* *Dashboard* &mdash; Navigates you from one dashboard to another dashboard. For example, 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.
* *Discover* &mdash; Navigates you from a *Lens* dashboard panel to *Discover*. For example, create a drilldown for a *Lens* visualization that opens the visualization data in *Discover* for further exploration.
Third-party developers can create drilldowns. To learn how to code drilldowns, refer to {kib-repo}blob/{branch}/x-pack/examples/ui_actions_enhanced_examples[this example plugin].
[float]
[[dashboard-drilldowns]]
@ -360,7 +96,7 @@ Create a drilldown that opens the *Detailed logs* dashboard from the *[Logs] Web
image::images/dashboard_drilldownOnPanel_8.3.png[Drilldown on data table that navigates to another dashboard]
[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. All panels that you create with the visualization editors support dashboard drilldowns.
@ -369,7 +105,7 @@ URL drilldowns enable you to navigate from a dashboard to external websites. Des
image:images/dashboard_urlDrilldownGoToGitHub_8.3.gif[Drilldown on pie chart that navigates to Github]
Some panels support multiple interactions, also known as triggers.
The <<url-template-variables,variables>> you use to create a <<url_templating-language, URL template>> depends on the trigger you choose. URL drilldowns support these types of triggers:
The <<url-template-variable,variables>> you use to create a <<url-templating-language, URL template>> depends on the trigger you choose. URL drilldowns support these types of triggers:
* *Single click* &mdash; A single data point in the panel.
@ -481,7 +217,7 @@ Make changes to your drilldowns, make a copy of your drilldowns for another pane
* To delete a drilldown, select the drilldown you want to delete, then click *Delete*.
[float]
[[url_templating-language]]
[[url-templating-language]]
==== URL templating
beta[]
@ -626,7 +362,7 @@ a|Escapes string using built in `encodeURIComponent` function, while keeping "@"
[float]
[[url-template-variables]]
[[url-template-variable]]
===== URL template variables
The URL drilldown template has three sources for variables:

4
docs/user/dashboard/find-dashboards.asciidoc
View file

@ -1,5 +1,5 @@
[[find-dashboards]]
== Search and filter dashboards
= Browse dashboards
When looking for specific dashboards to open or share, several actions are available to you to help you find them quicker.
@ -25,5 +25,5 @@ image::images/dashboard-filter-by-creator.png[Option to filter the list of dashb
**Sort by name or last update date**
You can sort the dashboard list based on their name or their last update date.
By default, your most recently viewed dashboards are displayed first. You can instead sort the dashboard list based on their name or their last update date.

BIN
docs/user/dashboard/images/dashboard-export-saved-object.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
docs/user/dashboard/images/dashboard-filter-editor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 226 KiB

BIN
docs/user/dashboard/images/dashboard-filter-kql.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
docs/user/dashboard/images/dashboard-full-screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
docs/user/dashboard/images/dashboard-global-time-range.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
docs/user/dashboard/images/dashboard-import-saved-object.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 368 KiB

BIN
docs/user/dashboard/images/dashboard-overview.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 726 KiB

BIN
docs/user/dashboard/images/dashboard-panel-maximized.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 342 KiB

BIN
docs/user/dashboard/images/dashboard-starred-list.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
docs/user/dashboard/images/dashboard-usage-count.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
docs/user/dashboard/images/dashboard_ecommerceRevenueDashboard_7.15.0.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 264 KiB

BIN
docs/user/dashboard/images/dashboard_panelFiltersButton_8.7.0.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
docs/user/dashboard/images/dashboards-field-statistics.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 235 KiB

1
docs/user/dashboard/images/esql-icon-edit-visualization.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M12.148 3.148 11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 0 1-.708 0 .502.502 0 0 1 0-.708l8.002-7.998ZM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 0 1 0 1.414l-9 9A.997.997 0 0 1 5 15H2a1 1 0 0 1-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0 1 11 1ZM5 14H2v-3l3 3Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 383 B

1
docs/user/dashboard/images/esql-icon-save-visualization.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M5.008 2H2.282c-.181 0-.245.002-.275.007-.005.03-.007.094-.007.275v11.436c0 .181.002.245.007.275.03.005.094.007.275.007h11.436c.181 0 .245-.002.275-.007.005-.03.007-.094.007-.275V4.62c0-.13-.001-.18-.004-.204a2.654 2.654 0 0 0-.141-.147L11.73 2.145a2.654 2.654 0 0 0-.147-.141A2.654 2.654 0 0 0 11.38 2h-.388c.005.08.008.172.008.282v2.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H6.282c-.446 0-.607-.046-.77-.134a.909.909 0 0 1-.378-.378C5.046 5.325 5 5.164 5 4.718V2.282c0-.11.003-.202.008-.282ZM2.282 1h9.098c.259 0 .348.01.447.032a.87.87 0 0 1 .273.113c.086.054.156.11.338.293l2.124 2.124c.182.182.239.252.293.338a.87.87 0 0 1 .113.273c.023.1.032.188.032.447v9.098c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H2.282c-.446 0-.607-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V2.282c0-.446.046-.607.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134ZM6 2.282v2.436c0 .181.002.245.007.275.03.005.094.007.275.007h3.436c.181 0 .245-.002.275-.007.005-.03.007-.094.007-.275V2.282c0-.181-.002-.245-.007-.275A2.248 2.248 0 0 0 9.718 2H6.282c-.181 0-.245.002-.275.007-.005.03-.007.094-.007.275ZM8 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
docs/user/dashboard/lens-advanced.asciidoc
View file

@ -1,5 +1,5 @@
[[create-a-dashboard-of-panels-with-ecommerce-data]]
== Analyze time series data
== Create a dashboard with time series charts
In this tutorial, you'll use the ecommerce sample data to analyze sales trends, but you can use any type of data to complete the tutorial.

65
docs/user/dashboard/links-panel.asciidoc Normal file
View file

@ -0,0 +1,65 @@
[[dashboard-links]]
=== Link panels
preview::["This functionality is in technical preview, and may be changed or removed in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features."]
You can use *Links* panels to create links to other dashboards or external websites. When creating links to other dashboards, you have the option to carry the time range and query and filters to apply to the linked dashboard. Links to external websites follow the <<external-URL-policy,`externalUrl.policy`>> settings. *Links* panels support vertical and horizontal layouts and may be saved to the *Library* for use on other dashboards.
[role="screenshot"]
image::images/dashboard_links_panel.png[A screenshot displaying the new links panel]
* <<add-links-panel, Add a links panel>>
* <<add-links-panel-from-library, Add a links panel from the library>>
* <<edit-links-panel, Edit links panels>>
* <<delete-links-panels, Delete links panels>>
[float]
[[add-links-panel]]
==== Add a links panel
To add a links panel to your dashboards:
. On the **Dashboards** page, click the dashboard **Title** you want to open.
. Click **Add panel > Links**.
. In the **Create links panel** flyout choose between the panel displaying vertically or horizontally on your dashboard.
. Click **Add link**.
. Specify the following:
* **Go to** - Dashboard to link to another dashboard, or URL to link to an external website.
* **Choose destination** - Use the dropdown to select another dashboard or enter an external URL.
* **Text** - Enter text for the link, which displays in the panel.
* **Options** - When linking to another dashboard use the sliders to use the filters and queries from the original dashboard, use the date range from the original dashboard, or open the dashboard in a new tab. When linking to an external URL use the sliders to open the URL in a new tab, or encode the URL.
. Click **Add link**.
. Click **Save**.
. Enter the **Title** and **Description**, then click **Save**.
[float]
[[add-links-panel-from-library]]
==== Add a links panel from the library
By default links panels are saved to the library. To add a links panel to another dashboard:
. On the **Dashboards** page, click the dashboard **Title** you want to open.
. Click **Add from library**.
. Select the links panel from the **Add from library** flyout.
. Click **Save**.
[float]
[[edit-links-panel]]
==== Edit links panels
To edit links panels:
. Click image:images/lens_layerActions_8.5.0.png[], then **Edit Links**.
. Click image:images/dashboard_controlsEditControl_8.3.0.png[] on the link.
. Click **Update link**.
. Click **Save**.
[float]
[[delete-links-panels]]
==== Delete links panels
To delete links panels:
. Click image:images/lens_layerActions_8.5.0.png[], then **More**.
. Click **Delete from dashboard**.
. Click **Save**.

12
docs/user/dashboard/manage-dashboards.asciidoc Normal file
View file

@ -0,0 +1,12 @@
= Manage dashboards
[float]
include::find-dashboards.asciidoc[leveloffset=+1]
[float]
include::mark-favorite-dashboards.asciidoc[leveloffset=+1]
[float]
include::view-dashboard-usage.asciidoc[leveloffset=+1]

9
docs/user/dashboard/mark-favorite-dashboards.asciidoc Normal file
View file

@ -0,0 +1,9 @@
= Keep track of your favorite dashboards
You can mark any dashboards as favorite, using the ✩ **star icon**.
All dashboards marked as favorite are gathered in the **Starred** tab so you can find them quickly.
The list of starred dashboards is personal. Dashboards marked as favorite by other users only appear for those users.
image:images/dashboard-starred-list.png[List of starred dashboards]

26
docs/user/dashboard/share-dashboards.asciidoc Normal file
View file

@ -0,0 +1,26 @@
= Share dashboards
[float]
[[share-the-dashboard]]
== Share dashboards
To share the dashboard with a larger audience, click *Share* in the toolbar. For detailed information about the sharing options, refer to <<reporting-getting-started,Reporting>>.
TIP: When sharing a dashboard with a link while a panel is in maximized view, the generated link will also open the dashboard on the same maximized panel view.
[float]
//Seems like a wrong ID (import instead of export). Adding export one while checking that removing "import" doesn't break links
[[import-dashboards]]
[[export-dashboards]]
== Export dashboards
You can export dashboards from **Stack Management** > **Saved Objects**. To configure and start the export:
. Select the dashboard that you want, then select **Export**.
. Enable **Include related objects** if you want that objects associated to the selected dashboard, such as data views and visualizations, also get exported. This option is enabled by default and recommended if you plan to import that dashboard again in a different space or cluster.
. Select **Export**.
image:images/dashboard-export-saved-object.png[Option to export a dashboard]
To automate {kib}, you can export dashboards as NDJSON using the {api-kibana}/group/endpoint-saved-objects[Export saved objects API]. It is important to export dashboards with all necessary references.

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

@ -1,4 +1,4 @@
[[tsvb]]
[[tsvb-panel]]
=== TSVB
*TSVB* is a set of visualization types that you configure and display on dashboards.
@ -31,7 +31,7 @@ When you use only {data-sources}, you are able to:
* Improve performance
[[tsvb-index-pattern-mode]]
[[tsvb-index-patterns-mode]]
IMPORTANT: Creating *TSVB* visualizations with an {es} index string is deprecated and will be removed in a future release. By default, you create *TSVB* visualizations with only {data-sources}. To use an {es} index string, contact your administrator, or go to <<advanced-options, Advanced Settings>> and set `metrics:allowStringIndices` to `true`.

2
docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc
View file

@ -1,5 +1,5 @@
[[create-a-dashboard-of-panels-with-web-server-data]]
== Create your first dashboard
== Create a simple dashboard to monitor website logs
Learn the most common ways to create a dashboard from your own data.
The tutorial will use sample data from the perspective of an analyst looking

10
docs/user/dashboard/tutorials.asciidoc Normal file
View file

@ -0,0 +1,10 @@
= Tutorials
Learn more about building dashboards and creating visualizations with the following tutorials.
These tutorials use sample data available in {kib} as a way to get started more easily, but you can apply and adapt these instructions to your own data as well.
include::tutorial-create-a-dashboard-of-lens-panels.asciidoc[]
include::lens-advanced.asciidoc[]

4
docs/user/dashboard/url-drilldown.asciidoc
View file

@ -1,4 +1,4 @@
[[url_templating-language]]
[[url-templating-language]]
=== URL templating
beta[]
@ -144,7 +144,7 @@ a|Escapes string using built in `encodeURIComponent` function, while keeping "@"
[float]
[[url-template-variables]]
[[url-template-variable]]
==== URL template variables
The URL drilldown template has three sources for variables:

177
docs/user/dashboard/use-dashboards.asciidoc Normal file
View file

@ -0,0 +1,177 @@
= Use and filter dashboards
[float]
[[search-or-filter-your-data]]
== Search and filter your dashboard data
{kib} supports several ways to explore the data displayed in a dashboard more in depth:
* The **query bar**, using KQL expressions by default.
* The **Time range**, that allows you to display data only for the period that you want to focus on. You can set a global time range for the entire dashboard, or specify a custom time range for each panel.
* **Controls**, that dashboard creators can add to help viewers filter on specific values.
* **Filter pills**, that you can add and combine by clicking on specific parts of the dashboard visualizations, or by defining conditions manually from the filter editor. The filter editor is a good alternative if you're not comfortable with using KQL expressions in the main query bar.
* View the data of a panel and the requests used to build it.
//You can combine the filters with any panel filter to display the data you want to see.
This section shows the most common ways for you to filter dashboard data. For more information about {kib} and {es} filtering capabilities, refer to <<kibana-concepts-analysts,{kib} concepts>>.
[float]
=== Filter dashboards using the KQL query bar
The query bar lets you build filters using <<kuery-query,{kib} Query Language (KQL)>>. When typing, it dynamically suggests matching fields, operators, and values to help you get the exact results that you want.
image::images/dashboard-filter-kql.png[KQL filter dynamically suggesting values, width=40%]
[float]
=== Set a time range
The data visible in a dashboard highly depends on the time range that is applied. In a dashboard, you can select a time range that applies globally to all panels, or set a custom time range for specific panels.
[float]
==== Apply a global time range to an entire dashboard
The global time range menu is located right next to the query bar, in the dashboard's header. With this menu, you can select the time range to apply, and set the frequency for refreshing the dashboard data. Setting the time range is a common action in {kib}. Refer to <<set-time-filter>> for more details.
image::images/dashboard-global-time-range.png[Time range menu with multiple time range suggestions, width=40%]
[float]
==== Apply a custom time range to a panel
**To apply a panel-level time range:**
. Open the panel menu, then select *Settings*.
. Turn on *Apply a custom time range*.
. Enter the time range you want to view, then *Apply* it.
**To view and edit the time range applied to a specific panel:**
When a custom time range is active for a single panel, it is indicated in the panel's header.
To edit it, click the filter. You can then adjust and apply the updated **Time range**.
[float]
=== Use available controls
Dashboard authors can <<add-controls,add various types of additional controls>> to help you filter the data that you want to visualize.
[float]
[[filter-the-data-with-options-list-controls]]
==== Filter the data with Options list controls
Filter the data with one or more options that you select.
. Open the Options list dropdown.
. Select the available options.
+
The *Exists* query returns all documents that contain an indexed value for the field.
. Select how to filter the options.
* To display only the data for the options you selected, select *Include*.
* To exclude the data for the options you selected, select *Exclude*.
. To clear the selections, click image:images/dashboard_controlsClearSelections_8.3.0.png[The icon to clear all selected options in the Options list].
. To display only the options you selected in the dropdown, click image:images/dashboard_showOnlySelectedOptions_8.3.0.png[The icon to display only the options you have selected in the Options list].
[float]
[[filter-the-data-with-range-slider-controls]]
==== Filter the data with Range slider controls
Filter the data within a specified range of values.
. On the Range slider, click a value.
. Move the sliders to specify the values you want to display.
+
The dashboard displays only the data for the range of values you specified.
. To clear the specified values, click image:images/dashboard_controlsClearSelections_8.3.0.png[The icon to clear all specified values in the Range slider].
[float]
[[filter-the-data-with-time-slider-controls]]
==== Filter the data with time slider controls
Filter the data within a specified range of time.
. To view a different time range, click the time slider, then move the sliders to specify the time range you want to display.
. To advance the time range forward, click image:images/dashboard_timeSliderControl_advanceForward_8.5.0.png[The icon to advance the time range forward].
. To advance the time range backward, click image:images/dashboard_timeSliderControl_advanceBackward_8.5.0.png[The icon to advance the time range backward].
. To animate the data changes over time, click image:images/dashboard_timeSliderControl_animate_8.5.0.png[The icon to clear all specified values in the Range slider].
. To clear the specified values, click image:images/dashboard_controlsClearSelections_8.3.0.png[The icon to clear all specified values in the Range slider].
[float]
=== Use filter pills
[float]
==== Add pills by interacting with visualizations
You can interact with some panel visualizations to explore specific data more in depth. Upon clicking, filter pills are added and applied to the entire dashboard, so that surrounding panels and visualizations also reflect your browsing.
image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt3636aae815d783f9/66c467d346b3f438b396fafa/dashboard-filter-pills.gif[Browsing a chart creates a filter dynamically]
[float]
==== Add pills using the filter editor
As an alternative to the main query bar, you can filter dashboard data by defining individual conditions on specific fields and values, and by combining these conditions together in a filter pill.
image::images/dashboard-filter-editor.png[Filter editor with 2 conditions]
[float]
[[download-csv]]
=== View the panel data and requests
//Looks outdated
**View the data in visualizations and the requests that collect the data:**
. Open the panel menu, then select **Inspect**.
. View and download the panel data.
.. Open the *View* dropdown, then click *Data*.
.. Click *Download CSV*, then select the format type from the dropdown:
* *Formatted CSV* &mdash; Contains human-readable dates and numbers.
* *Unformatted* &mdash; Best used for computer use.
+
When you download visualization panels with multiple layers, each layer produces a CSV file, and the file names contain the visualization and layer {data-source} names.
. View the requests that collect the data.
.. Open the *View* dropdown, then click *Requests*.
.. From the dropdown, select the requests you want to view.
.. To view the requests in *Console*, click *Request*, then click *Open in Console*.
**View the time range on specific panels:**
When a custom time range is active for a single panel, it is indicated in the panel's header.
You can view it in more details and edit it by clicking the filter.
[float]
== Full screen mode and maximized panel views
You can display dashboards in full screen mode to gain visual space and view or show visualizations without the rest of the {kib} interface.
image::images/dashboard-full-screen.png[A dashboard in full screen mode]
If you need to focus on a particular panel, you can maximize it. To do that, open the panel menu, and select **More** > **Maximize**. You can minimize it again the same way.
TIP: When sharing a dashboard with a link while a panel is in maximized view, the generated link will also open the dashboard on the same maximized panel view.
image::images/dashboard-panel-maximized.png[A maximized panel in a dashboard]

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

@ -1,5 +1,5 @@
[[vega]]
=== Vega
=== Custom visualizations with Vega
*Vega* and *Vega-Lite* are both grammars for creating custom visualizations. They are recommended for advanced users who are comfortable writing {es} queries manually.
*Vega-Lite* is a good starting point for users who are new to both grammars, but they are not compatible.

7
docs/user/dashboard/view-dashboard-usage.asciidoc Normal file
View file

@ -0,0 +1,7 @@
= View dashboard usage
You can check how much a dashboard is being used from its details, with a graph showing the total number of views during the last 90 days.
You can access a dashboard details by clicking its associated information icon from your list of dashboards.
image:images/dashboard-usage-count.png[Graph showing the number of views during the last 90 days]

8
packages/kbn-doc-links/src/get_doc_links.ts
View file

@ -94,9 +94,9 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
dashboard: {
guide: `${KIBANA_DOCS}dashboard.html`,
drilldowns: `${KIBANA_DOCS}drilldowns.html`,
drilldownsTriggerPicker: `${KIBANA_DOCS}create-drilldowns.html#url-drilldowns`,
urlDrilldownTemplateSyntax: `${KIBANA_DOCS}create-drilldowns.html#url_templating-language`,
urlDrilldownVariables: `${KIBANA_DOCS}create-drilldowns.html#url-template-variables`,
drilldownsTriggerPicker: `${KIBANA_DOCS}drilldowns.html#create-url-drilldowns`,
urlDrilldownTemplateSyntax: `${KIBANA_DOCS}drilldowns.html#url-templating-language`,
urlDrilldownVariables: `${KIBANA_DOCS}drilldowns.html#url-template-variable`,
},
discover: {
guide: `${KIBANA_DOCS}discover.html`,
@ -577,7 +577,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
lensPanels: `${KIBANA_DOCS}lens.html`,
maps: `${ELASTIC_WEBSITE_URL}maps`,
vega: `${KIBANA_DOCS}vega.html`,
tsvbIndexPatternMode: `${KIBANA_DOCS}tsvb.html#tsvb-index-pattern-mode`,
tsvbIndexPatternMode: `${KIBANA_DOCS}legacy-editors.html#tsvb-index-patterns-mode`,
},
observability: {
guide: isServerless