IMPORTANT: No additional bug fixes or documentation updates will be released for this version. For the latest information, see the current release documentation.
« Timelion URL templating »
Elastic Docs ›Kibana Guide [8.1] ›Dashboard and visualizations

Make dashboards interactive

edit

Make dashboards interactive

edit

Add interactive capabilities to your dashboard, such as controls that allow you to apply dashboard-level filters, and drilldowns that allow you to navigate to Discover, other dashboards, and external websites.


Third-party developers can create drilldowns. To learn how to code drilldowns, refer to this example plugin.

[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. Add Controls panels

edit

Controls panels allow you to apply dashboard-level filters based on values from a list, or a range of values.

There are two types of Controls you can add to dashboards:

  • Options list — Filters content based on one or more specified options. The dropdown menu is dynamically populated with the results of a terms aggregation. For example, use the options list on the sample flight dashboard when you want to filter the data by origin city and destination city.

  • Range slider — Filters data within a specified range of numbers. The minimum and maximum values are dynamically populated with the results of a min and max aggregation. For example, use the range slider when you want to filter the sample flight dashboard by a specific average ticket price.

    dashboard controls

To create Controls panels:

  1. On the dashboard, click All types, then select Controls.
  2. Select the control panel type from the dropdown, then click Add.
  3. Enter the Control Label, then select the Data View and Field.
  4. If you are adding a Range slider, enter the Step Size and Decimal Places.

  5. Click Options, then configure the following:

    • Update Kibana filters on each change — When selected, all interactive inputs create filters that refresh the dashboard. When unselected, Kibana filters are created only when you click Apply changes.
    • Use time filter — When selected, the aggregations that generate the options list and time range are connected to the time filter.
    • Pin filters for all applications — When selected, all filters created by interacting with the inputs are automatically pinned.
  6. Click Update.

Save and add the panel

edit

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:

  1. Click Save to library.
  2. Enter the Title and add any applicable Tags.
  3. Make sure that Add to Dashboard after saving is selected.
  4. Click Save and return.

To save the panel to the dashboard:

  1. Click Save and return.

  2. Add an optional title to the panel.

    1. In the panel header, click No Title.
    2. On the Customize panel window, select Show panel title.
    3. Enter the Panel title, then click Save.

Open panel data in Discover

edit

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 — Opens panel data in Discover, including the dashboard-level filters, but not the panel-level filters.

    To enable panel interactions, configure xpack.discoverEnhanced.actions. 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 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 — Opens saved search data in Discover.

    To use saved search interactions, open the panel menu, then click More > View saved search.

Create drilldowns

edit

Panels have built-in interactive capabilities that apply filters to the dashboard data. For example, when you drag a time range or click a pie slice, a filter for the time range or pie slice is applied. Drilldowns let you customize the interactive behavior while keeping the context of the interaction.

There are two types of drilldowns you can add to dashboards:

  • Dashboard — Navigates you from one dashboard to another dashboard. For example, when can create a drilldown for a Lens panel that navigates you from a summary dashboard to a dashboard with a filter for a specific host name.
  • URL — Navigates you from a dashboard to an external website. For example, a website with the specific host name as a parameter.

Create dashboard drilldowns

edit

Dashboard drilldowns enable you to open a dashboard from another dashboard, taking the time range, filters, and other parameters with you so the context remains the same. Dashboard drilldowns help you to continue your analysis from a new perspective.

For example, if you have a dashboard that shows the logs and metrics for multiple data centers, you can create a drilldown that navigates from the dashboard that shows multiple data centers, to a dashboard that shows a single data center or server.

Drilldown on data table that navigates to another dashboard

The panels you create using the following editors support dashboard drilldowns:

  • Lens
  • Maps
  • TSVB
  • Vega
  • Aggregation-based area chart, data table, heat map, horitizontal bar chart, line chart, pie chart, tag cloud, and vertical bar chart
  • Timelion
Create and set up the dashboards you want to connect
edit

Use the Sample web logs data to create a dashboard and add panels, then set a search and filter on the [Logs] Web Traffic dashboard.

  1. Add the Sample web logs data.

  2. Create a new dashboard, click Add from Library, then add the following panels:

    • [Logs] Response Codes Over Time + Annotations
    • [Logs] Visits
  3. Set the time filter to Last 30 days.
  4. Save the dashboard. In the Title field, enter Detailed logs.

  5. Open the [Logs] Web Traffic dashboard, then set a search and filter.

    Search: extension.keyword: ("gz" or "css" or "deb")
    Filter: geo.src: CN

Create the dashboard drilldown
edit

Create a drilldown that opens the Detailed logs dashboard from the [Logs] Web Traffic dashboard.

  1. Open the panel menu for the [Logs] Errors by host data table, then select Create drilldown.

  2. Click Go to dashboard.

    1. Give the drilldown a name. For example, View details.
    2. From the Choose a destination dashboard dropdown, select Detailed logs.
    3. To use the geo.src filter, KQL query, and time filter, select Use filters and query from origin dashboard and Use date range from origin dashboard.
    4. Click Create drilldown.
  3. Save the dashboard.

  4. In the data table panel, hover over a value, click +, then select View details.

    Drilldown on data table that navigates to another dashboard

Create URL drilldowns

edit

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 to a URL template, which configures the behavior of the drilldown.

Drilldown on pie chart that navigates to Github

Some panels support multiple interactions, also known as triggers. The variables you use to create a URL template depends on the trigger you choose. URL drilldowns support these types of triggers:

  • Single click — A single data point in the panel.
  • Range selection — A range of values in a panel.

For example, Single click has {{event.value}} and Range selection has {{event.from}} and {{event.to}}.

The panels you create using the following editors support dashboard drilldowns:

  • Lens
  • Maps
  • TSVB
  • Aggregation-based area chart, data table, heat map, horitizontal bar chart, line chart, pie chart, tag cloud, and vertical bar chart
Create a URL drilldown
edit

For example, if you have a dashboard that shows data from a Github repository, you can create a URL drilldown that opens Github from the dashboard panel.

  1. Add the Sample web logs data.
  2. Open the [Logs] Web Traffic dashboard.
  3. In the toolbar, click Edit.

  4. Create a donut chart

    1. In the toolbar, click Edit.
    2. Click Create visualization.
    3. From the Chart type dropdown, select Donut.
    4. From the Available fields list, drag and drop the machine.os.keyword field onto the visualization builder.
    5. Click Save and return.
  5. Open the donut chart panel menu, then select Create drilldown.

  6. Click Go to URL.

    1. Give the drilldown a name. For example, Show on Github.
    2. For the Trigger, select Single click.

    3. To navigate to the Kibana repository Github issues, enter the following in the Enter URL field:

      https://github.com/elastic/kibana/issues?q=is:issue+is:open+{{event.value}}

      Kibana substitutes {{event.value}} with a value associated with the selected pie slice.

    4. Click Create drilldown.
  7. Save the dashboard.

  8. On the donut chart panel, click any chart slice, then select Show on Github.

    URL drilldown popup

  9. In the list of Kibana repository issues, verify that the slice value appears.

    Github

Manage drilldowns

edit

Make changes to your drilldowns, make a copy of your drilldowns for another panel, and delete drilldowns.

  1. Open the panel menu that includes the drilldown, then click Manage drilldowns.

  2. On the Manage tab, use the following options:

    • To change drilldowns, click Edit next to the drilldown you want to change, make your changes, then click Save.
    • To make a copy, click Copy next to the drilldown you want to change, enter the drilldown name, then click Create drilldown.
    • To delete a drilldown, select the drilldown you want to delete, then click Delete.
« Timelion URL templating »