diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc index 3e8cc1e8b109b..de8d4e6cd0996 100644 --- a/docs/management/advanced-options.asciidoc +++ b/docs/management/advanced-options.asciidoc @@ -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 <>. +_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 <>. [[labs-dashboard-enable-ui]]`labs:dashboard:enable_ui`:: When enabled, provides access to the experimental *Labs* features for *Dashboard*. diff --git a/docs/management/numeral.asciidoc b/docs/management/numeral.asciidoc index d6c8fbc9011fc..f8df0dabfcd55 100644 --- a/docs/management/numeral.asciidoc +++ b/docs/management/numeral.asciidoc @@ -10,7 +10,7 @@ Numeral formatting patterns are used in multiple places in {kib}, including: * <> * <> -* <> +* <> * <> The simplest pattern format is `0`, and the default {kib} pattern is `0,0.[000]`. diff --git a/docs/redirects.asciidoc b/docs/redirects.asciidoc index 5ffdbbcf76831..4088342a6832b 100644 --- a/docs/redirects.asciidoc +++ b/docs/redirects.asciidoc @@ -200,19 +200,19 @@ This content has moved. See <>. [[trigger-picker]] === Picking a trigger for a URL drilldown -This page has moved. Refer to <>. +This page has moved. Refer to <>. [float] [[templating]] === URL templating -This page has moved. Refer to <>. +This page has moved. Refer to <>. [float] [[variables]] === Variables -This page has moved. Refer to <>. +This page has moved. Refer to <>. [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 <>. +[role="exclude", id="create-drilldowns"] +== Create drilldowns + +[[url-drilldowns]] +[[url_templating-language]] +[[url-template-variables]] +This content has moved. Refer to <>. + +[role="exclude", id="tsvb"] +== TSVB + +[[tsvb-index-pattern-mode]] +This content has moved. Refer to <>. + //// 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]. - diff --git a/docs/user/dashboard/create-panels-with-editors.asciidoc b/docs/user/dashboard/chart-types.asciidoc similarity index 92% rename from docs/user/dashboard/create-panels-with-editors.asciidoc rename to docs/user/dashboard/chart-types.asciidoc index d0cf77ef8a469..d7aa18c38eec8 100644 --- a/docs/user/dashboard/create-panels-with-editors.asciidoc +++ b/docs/user/dashboard/chart-types.asciidoc @@ -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[] diff --git a/docs/user/dashboard/create-dashboards.asciidoc b/docs/user/dashboard/create-dashboards.asciidoc new file mode 100644 index 0000000000000..48fba9a65d3a5 --- /dev/null +++ b/docs/user/dashboard/create-dashboards.asciidoc @@ -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 <>. 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 <> 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 <>. + +//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 <>. + +. 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 <>: +** <>. This option is a shortcut to create a chart using **Lens**, the default visualization editor in {kib}. +** <>. 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 to help filter the content of your dashboard. + +. Organize your dashboard by <>. +[[add-dashboard-settings]] +. Define the main settings of your dashboard from the *Settings* menu located in the toolbar. +.. Meaningful title, description, and <> 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* — Saves the specified time filter. +*** *Use margins between panels* — Adds a margin of space between each panel. +*** *Show panel titles* — Displays the titles in the panel headers. +*** *Sync color palettes across panels* — Applies the same color palette to all panels on the dashboard. +*** *Sync cursor across panels* — 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* — 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 +** <> +** <> +[[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 <> 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 <>. + +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] diff --git a/docs/user/dashboard/create-visualizations.asciidoc b/docs/user/dashboard/create-visualizations.asciidoc new file mode 100644 index 0000000000000..1a27471448f5a --- /dev/null +++ b/docs/user/dashboard/create-visualizations.asciidoc @@ -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 +| <> +| The default editor for creating powerful <> in {kib} + +| link:{ref}/esql-kibana.html[ES\|QL] +| Create visualizations from ES\|QL queries + +| <> +| Create beautiful displays of your geographical data + +| <> +| Add a field statistics view of your data to your dashboards + +| <> +| Use Vega to create new types of visualizations + +.3+| Annotations and navigation +| <> +| Add context to your dashboard with markdown-based *text* + +| <> +| Personalize your dashboard with custom images + +| <> +| Add links to other dashboards or to external websites + +.4+| Machine Learning and Analytics +| <> +| Display the results from machine learning anomaly detection jobs + +| <> +| Display an anomaly chart from the *Anomaly Explorer* + +| <> +| Display an anomaly chart from the *Single Metric Viewer* + +| <> +| 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 +| <> (deprecated) +| Display a table of live streaming logs + +| <> +.2+| While these panel types are still available, we recommend to use <> + +| <> + +|=== + +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 <>. + +. 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 <>, then click *Save and go to Dashboard*. + +* To save the panel only to the *Visualize Library*, select *None*, add any applicable <>, 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* — Opens panel data in *Discover*, including the dashboard-level filters, but not the panel-level filters. ++ +To enable panel interactions, configure <> 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* — Opens the series data in *Discover*. ++ +To enable series data interactions, configure <> 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* — Opens <> 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* — 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* — Opens *TSVB* and aggregation-based visualizations in *Lens*. + +* *Panel settings* — Opens the *Panel settings* window to change the *title*, *description*, and *time range*. + +* *More > Replace panel* — Opens the *Visualize Library* so you can select a new panel to replace the existing panel. + +* *More > Delete from dashboard* — 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 <>. + +[[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[] + diff --git a/docs/user/dashboard/dashboard-troubleshooting.asciidoc b/docs/user/dashboard/dashboard-best-practices.asciidoc similarity index 85% rename from docs/user/dashboard/dashboard-troubleshooting.asciidoc rename to docs/user/dashboard/dashboard-best-practices.asciidoc index 7fe1b7c3067b9..8155d29950f09 100644 --- a/docs/user/dashboard/dashboard-troubleshooting.asciidoc +++ b/docs/user/dashboard/dashboard-best-practices.asciidoc @@ -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 <> — 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] + +* <> — 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] + +* <> — 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 <> 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, <>. + +. 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* — Specify where the control label appears. + +* *Filtering* settings: + +** **Apply global filters to controls** — Define whether controls should ignore or apply any filter specified in the main filter bar of the dashboard. +** **Apply global time range to controls** — Define whether controls should ignore or apply the main time range specified for the dashboard. Note that <> rely on the global time range and don't work properly when this option is disabled. + +* *Selection* settings: + +** *Validate user selections* — When selected, any selected option that results in no data is ignored. +** *Chain controls* — 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** — 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*. \ No newline at end of file diff --git a/docs/user/dashboard/dashboard.asciidoc b/docs/user/dashboard/dashboard.asciidoc index d597cf135f396..5ca198c9831af 100644 --- a/docs/user/dashboard/dashboard.asciidoc +++ b/docs/user/dashboard/dashboard.asciidoc @@ -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 <> 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 <> in {kib} that let you create and configure different types of visualizations. -[cols="2"] -|=== +// add link to sharing section +At any time, you can <> you've created with your team, in {kib} or outside. -| <> -| Use one of the editors to create visualizations of your data. Each editor varies in capabilities for all levels of analysts. - -| <> -| Create beautiful displays of your geographical data. - -| <> -| Display the results from machine learning anomaly detection jobs. - -| <> -| Display an anomaly chart from the *Anomaly Explorer*. - -| <> -| Display a table of live streaming logs. - -| <> -| Add interactive filters with *Controls* panels. - -| <> -| Add context to your panels with *Text*. - -| <> -| 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 <>. - -* 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 <>. - -[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 <>. - -To create panels from the dashboard toolbar, use one of the following options: - -* *Create visualization* — Opens the drag-and-drop editor, which is the recommended way to create visualization panels. - -* *Select type* — 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 <>. - -. 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 <>, then click *Save and go to Dashboard*. - -* To save the panel only to the *Visualize Library*, select *None*, add any applicable <>, 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 <>. - -. 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* — 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* — Opens *TSVB* and aggregation-based visualizations in *Lens*. - -* *Panel settings* — Opens the *Panel settings* window to change the *title*, *description*, and *time range*. - -* *More > Replace panel* — Opens the *Visualize Library* so you can select a new panel to replace the existing panel. - -* *More > Delete from dashboard* — 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 <>. - -. Specify the following settings: - -* *Store time with dashboard* — Saves the specified time filter. - -* *Use margins between panels* — Adds a margin of space between each panel. - -* *Show panel titles* — Displays the titles in the panel headers. - -* *Sync color palettes across panels* — Applies the same color palette to all panels on the dashboard. - -* *Sync cursor across panels* — 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* — 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 <>. - -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* — Contains human-readable dates and numbers. - -* *Unformatted* — 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 <>. - -[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-dashboards.asciidoc[leveloffset=+1] -include::create-panels-with-editors.asciidoc[] +include::create-visualizations.asciidoc[leveloffset=+1] -include::make-dashboards-interactive.asciidoc[] +include::manage-dashboards.asciidoc[leveloffset=+1] -include::find-dashboards.asciidoc[] +include::share-dashboards.asciidoc[leveloffset=+1] -include::dashboard-troubleshooting.asciidoc[] +include::tutorials.asciidoc[leveloffset=+1] diff --git a/docs/user/dashboard/make-dashboards-interactive.asciidoc b/docs/user/dashboard/drilldowns.asciidoc similarity index 54% rename from docs/user/dashboard/make-dashboards-interactive.asciidoc rename to docs/user/dashboard/drilldowns.asciidoc index e9833d3a542d5..6b3a6d80ecdda 100644 --- a/docs/user/dashboard/make-dashboards-interactive.asciidoc +++ b/docs/user/dashboard/drilldowns.asciidoc @@ -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* — 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* — Navigates you from a dashboard to an external website. For example, a website with the specific host name as a parameter. + +* *Discover* — 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]. ++++