Update quickstart to include dashboards (#6004)

Update quickstart and discover content for relevancy to current Dashboards 2.12

---------

Signed-off-by: Melissa Vagi <vagimeli@amazon.com>
Co-authored-by: Naarcha-AWS <97990722+Naarcha-AWS@users.noreply.github.com>
Co-authored-by: Nathan Bower <nbower@amazon.com>
This commit is contained in:
Melissa Vagi 2024-02-29 09:50:42 -07:00 committed by GitHub
parent ca3e0ca63a
commit 7152f905df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 114 additions and 125 deletions

View File

@ -1,17 +1,17 @@
--- ---
layout: default layout: default
title: Discover title: Analyzing data
nav_order: 20 nav_order: 20
has_children: true has_children: true
redirect_from:
- /dashboards/discover/index-discover/
--- ---
# Discover # Analyzing data
**Discover** is a tool for exploring your data in OpenSearch Dashboards. You can use **Discover** to visually represent your data on a dashboard and provide a high-level view of key metrics. To analyze your data in OpenSearch and visualize key metrics, you can use the **Discover** application in OpenSearch Dashboards. An example of data analysis in **Discover** is shown in the following image.
The following image represents a typical **Discover** page using sample data. <img src="{{site.url}}{{site.baseurl}}/images/dashboards/discover.png" alt="A Discover default page" width="700">
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/discover-app.png" alt="Discover start screen" width="700">
## Getting started ## Getting started
@ -19,27 +19,14 @@ In this tutorial, you'll learn about using **Discover** to:
- Add data. - Add data.
- Interpret and visualize data. - Interpret and visualize data.
- Share the data findings. - Share data findings.
- Set alerts. - Set alerts.
## Prerequisites Before getting started, make sure you:
The following are prerequisites for using **Discover**: - Install [OpenSearch Dashboards](https://opensearch.org/downloads.html).
- Add sample data or import your own data into OpenSearch. Go to the [OpenSearch Dashboards quickstart guide]({{site.url}}{{site.baseurl}}/dashboards/quickstart/) to learn about adding sample datasets. Go to [Managing indexes]({{site.url}}{{site.baseurl}}/im-plugin/index/) to learn about importing your own data.
- Install [OpenSearch Dashboards 2.10 or later](https://opensearch.org/downloads.html). - Have a foundational understanding of [OpenSearch documents and indexes]({{site.url}}{{site.baseurl}}/im-plugin/index/).
- Add OpenSearch [sample data]({{site.url}}{{site.baseurl}}/dashboards/quickstart/) or import your own data into OpenSearch.
- Have a foundational understanding of OpenSearch [documents and indexes]({{site.url}}{{site.baseurl}}/im-plugin/index/).
## Adding data
Data must be added to OpenSearch before it can be analyzed. In this tutorial, you'll use the sample data. To learn about importing your own data, see [Managing indexes]({{site.url}}{{site.baseurl}}/im-plugin/index/).
To add the sample data, follow these steps:
1. On the OpenSearch Dashboards home page, choose **Add sample data**.
2. Choose the desired sample data and select the **Add data** button. A screenshot of the **Add sample data** interface is shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/add-sample.png" alt="Add sample data interface" width="700">
## Defining the search ## Defining the search
@ -47,42 +34,42 @@ To define a search, follow these steps:
1. On the OpenSearch Dashboards navigation menu, select **Discover**. 1. On the OpenSearch Dashboards navigation menu, select **Discover**.
2. Choose the data you want to work with. In this case, choose `opensearch_dashboards_sample_data_flights` from the upper-left dropdown menu. 2. Choose the data you want to work with. In this case, choose `opensearch_dashboards_sample_data_flights` from the upper-left dropdown menu.
3. Select the calendar icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/calendar-oui.png" class="inline-icon" alt="calendar icon"/>{:/}) to change the time range of your search and then select **Refresh**. 3. Select the {::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/calendar-oui.png" class="inline-icon" alt="calendar icon"/>{:/} icon to change the time range of your search and then select **Refresh**.
You'll see a view similar to the one in the following image. The resulting view is shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/define-search.png" alt="Discover interface showing search of flight sample data for Last 7 days" width="700"> <img src="{{site.url}}{{site.baseurl}}/images/dashboards/define-search.png" alt="Discover interface showing search of flight sample data for Last 7 days" width="700">
## Adding data fields and viewing data details ## Analyzing document tables
The document table contains document data. Each row represents a single document, and each column contains a different document field representing metrics such as flight destination, average ticket price, and flight delay. You can add, delete, or modify data fields in a document table as needed to meet your data analysis requirements. In OpenSearch, a document table stores unstructured data. In a document table, each row represents a single document, and each column contains document attributes.
To examine document attributes, follow these steps:
1. From the data table's left column, choose the {::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/inspect-icon.png" class="inline-icon" alt="inspect icon"/>{:/} icon to open the **Document Details** window. Select the {::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/minimize-icon.png" class="inline-icon" alt="minimize icon"/>{:/} icon to close the **Document Details** window.
2. Examine the metadata. You can switch between the **Table** and **JSON** tabs to view the data in your preferred format.
3. Select **View surrounding documents** to view data for other log entries either preceding or following your current document or select **View single document** to view a particular log entry.
The resulting view is shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/doc-details.png" alt="Document attributes" width="700">
To add or delete fields in a document table, follow these steps: To add or delete fields in a document table, follow these steps:
1. View the data fields listed under **Available fields** and select the plus icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/plus-icon.png" class="inline-icon" alt="plus icon"/>{:/}) to add the desired fields to the document table. The field will be automatically added to both **Selected fields** and the document table. For this example, choose the fields `Carrier`, `AvgTicketPrice`, and `Dest`. 1. View the data fields listed under **Available fields** and select the {::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/plus-icon.png" class="inline-icon" alt="plus icon"/>{:/} icon to add the desired fields to the document table. The field will be automatically added to both **Selected fields** and the document table. For this example, choose the fields `Carrier`, `AvgTicketPrice`, and `Dest`.
2. To arrange or sort the columns, select **Sort fields** > **Pick fields to sort by** and then drag and drop the fields in the order you want them to be ordered. 2. Select **Sort fields** > **Pick fields to sort by**. Drag and drop the chosen fields in the desired sort order.
You'll see a view similar to the one in the following image. The resulting view is shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/add-data-fields.png" alt="Discover interface showing adding and sorting data fields" width="700"> <img src="{{site.url}}{{site.baseurl}}/images/dashboards/add-data-fields.png" alt="Adding and deleting data fields" width="700">
You can view individual or multiple fields in the document table. To gather information about the data in the document table, follow these steps: ## Searching data
1. From the data table's left-side column, choose the inspect icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/inspect-icon.png" class="inline-icon" alt="inspect icon"/>{:/}) to open the **Document Details** window. Select the minimize icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/minimize-icon.png" class="inline-icon" alt="minimize icon"/>{:/}) to close the **Document Details** window.
2. Review the data details. You can switch between the **Table** and **JSON** tabs to view the data in your preferred format.
3. Select **View surrounding documents** to view data for other log entries either preceding or following your current document or select **View single document** to view a particular log entry.
You'll see a view similar to the one in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/doc-details.png" alt="Document details interface" width="700">
## Searching the data
You can use the search toolbar to enter a [DQL]({{site.url}}{{site.baseurl}}/dashboards/discover/dql/) or [query string]({{site.url}}{{site.baseurl}}/query-dsl/full-text/query-string/) query. The search toolbar is best for basic queries; for full query and filter capability, use [query domain-specific language (DSL)]({{site.url}}{{site.baseurl}}/query-dsl/index/) in the [Dev Tools console]({{site.url}}{{site.baseurl}}/dashboards/dev-tools/index-dev/). You can use the search toolbar to enter a [DQL]({{site.url}}{{site.baseurl}}/dashboards/discover/dql/) or [query string]({{site.url}}{{site.baseurl}}/query-dsl/full-text/query-string/) query. The search toolbar is best for basic queries; for full query and filter capability, use [query domain-specific language (DSL)]({{site.url}}{{site.baseurl}}/query-dsl/index/) in the [Dev Tools console]({{site.url}}{{site.baseurl}}/dashboards/dev-tools/index-dev/).
For more information, see [Discover and Dashboard search toolbar]({{site.url}}{{site.baseurl}}/dashboards/index/#discover-and-dashboard-search-bar). For more information, see [Discover and Dashboard search toolbar]({{site.url}}{{site.baseurl}}/dashboards/index/#discover-and-dashboard-search-bar).
## Filtering the data ## Filtering data
Filters allow you to narrow the results of a query by specifying certain criteria. You can filter by field, value, or range. The **Add filter** pop-up suggests the available fields and operators. Filters allow you to narrow the results of a query by specifying certain criteria. You can filter by field, value, or range. The **Add filter** pop-up suggests the available fields and operators.
@ -91,33 +78,36 @@ To filter your data, follow these steps:
1. Under the DQL search bar, choose **Add filter**. 1. Under the DQL search bar, choose **Add filter**.
2. Select the desired options from the **Field**, **Operator**, and **Value** dropdown lists. For example, select `Cancelled`, `is`, and `true`. 2. Select the desired options from the **Field**, **Operator**, and **Value** dropdown lists. For example, select `Cancelled`, `is`, and `true`.
3. Choose **Save**. 3. Choose **Save**.
4. To remove the filter, choose the cross icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/cross-icon.png" class="inline-icon" alt="cross icon"/>{:/}) next to the filter name. 4. To remove a filter, choose the {::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/cross-icon.png" class="inline-icon" alt="cross icon"/>{:/} icon to the right of the filter name.
5. Add more filters to further explore the data.
The resulting view is shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/discover-filter.png" alt="Visualize data findings interface" width="700"/>
## Saving a search ## Saving a search
To save your search, including the query text, filters, and current data view, follow these steps: To save your search, including the query text, filters, and current data view, follow these steps:
1. Select **Save** in the upper-right corner. 1. Select **Save** on the upper-right toolbar.
2. Give the search a title, and then choose **Save**. 2. Add a title, and then choose **Save**.
3. Select **Open** to access the saved search. 3. Select **Open** on the upper-right toolbar to access your saved searches.
## Creating data visualizations through Discover ## Visualizing data findings
To create visualizations of the data findings using the **Discover** app, follow these steps: To visualize your data findings, follow these steps:
1. Select the inspect icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/inspect-icon.png" class="inline-icon" alt="inspect icon"/>{:/}) next to the field you want to visualize. 1. Select the {::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/inspect-icon.png" class="inline-icon" alt="inspect icon"/>{:/} icon to the right of the field you want to visualize.
You'll see a view similar to the following image. The resulting view is shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/visualize-discover.png" alt="Visualize data findings interface" width="700"/> <img src="{{site.url}}{{site.baseurl}}/images/dashboards/visualize-discover.png" alt="Visualize data findings interface" width="700"/>
2. Select the **Visualize** button. The **Visualize** app opens and a visualization is displayed. Learn more about the **Visualize** app and data visualizations in [Building data visualizations]({{site.url}}{{site.baseurl}}/dashboards/visualize/viz-index/). 2. Select the **Visualize** button. When the **Visualize** application is launched, a visualization appears.
You'll see a view similar to the following image. The resulting view is shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/visualization-flight.png" alt="Data visualization of flight sample data field destination" width="700"/> <img src="{{site.url}}{{site.baseurl}}/images/dashboards/visualization-flight.png" alt="Data visualization of flight sample data field destination" width="700"/>
## Setting alerts ## Setting alerts
You can set alerts to notify you when your data changes beyond the thresholds you define. To learn more about using **Discover** to create and manage alerts, see [Alerting dashboards and visualizations]({{site.url}}{{site.baseurl}}/observing-your-data/alerting/dashboards-alerting/). Set alerts to notify you when your data exceeds your specified thresholds. Go to [Alerting dashboards and visualizations]({{site.url}}{{site.baseurl}}/observing-your-data/alerting/dashboards-alerting/) to learn about creating and managing alerts.

View File

@ -1,10 +1,11 @@
--- ---
layout: default layout: default
title: Time filter title: Time filter
parent: Discover parent: Analyzing data
nav_order: 20 nav_order: 20
redirect_from: redirect_from:
- /dashboards/get-started/time-filter/ - /dashboards/get-started/time-filter/
-/dashboards/discover/time-filter/
--- ---
# Time filter # Time filter
@ -16,7 +17,7 @@ The default time range is **Last 15 minutes**. You can change the time range at
To change the time range at the dashboard level, follow these steps: To change the time range at the dashboard level, follow these steps:
1. From an OpenSearch Dashboards application (Discover, Dashboards, or Visualize), select the calendar icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/calendar-icon.png" class="inline-icon" alt="calendar icon"/>{:/}) on the right of the search bar. 1. From an OpenSearch Dashboards application (Discover, Dashboards, or Visualize), select the {::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/calendar-icon.png" class="inline-icon" alt="calendar icon"/>{:/} icon on the right of the search bar.
2. Select one of the time filter options, as shown in the following image: 2. Select one of the time filter options, as shown in the following image:
- **Quick select:** Choose a time based on the last or next number of seconds, minutes, hours, days, or another time unit. - **Quick select:** Choose a time based on the last or next number of seconds, minutes, hours, days, or another time unit.
- **Commonly used:** Choose a common time range like **Today**, **Last 7 days**, or **Last 30 days**. - **Commonly used:** Choose a common time range like **Today**, **Last 7 days**, or **Last 30 days**.

View File

@ -1,120 +1,118 @@
--- ---
layout: default layout: default
title: Quickstart guide title: OpenSearch Dashboards quickstart guide
nav_order: 2 nav_order: 2
has_children: false has_children: false
redirect_from: redirect_from:
- /dashboards/quickstart-dashboards/ - /dashboards/quickstart-dashboards/
--- ---
# Quickstart guide # OpenSearch Dashboards quickstart guide
This quickstart guide covers the core concepts that you need to understand to get started with OpenSearch Dashboards. You'll learn how to: This quickstart guide provides tutorials on using OpenSearch Dashboards applications and tools. You can use these tutorials, either in your own environment or on [OpenSearch Playground](https://playground.opensearch.org/app/home#/), to learn the following fundamental concepts:
- Add sample data. - **Adding sample data:** Use preloaded visualizations, dashboards, and other tools to explore OpenSearch Dashboards before adding your own data.
- Explore and inspect data. - **Using the Discover application:** Analyze your data to gain insights.
- Visualize data. - **Using the Dashboards application:** Create and store data visualizations.
- **Turning dark mode on or off:** Change the Dashboards theme.
Here's a glance at the view you see when you open the **Dashboard** or **Discover** tool. To dock or undock the navigation pane, select the {::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/menu-icon.png" class="inline-icon" alt="menu icon"/>{:/} icon and then **Dock navigation** or **Undock navigation**. The OpenSearch Dashboards home page is shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/new-look.png" alt="Light and dark mode UI on Discover and Dashboard tools' home page" width="700"> <img src="{{site.url}}{{site.baseurl}}/images/dashboards/opensearch-dashboards-home.png" alt="OpenSearch Dashboards home page" width="700">
{::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/alert-icon.png" class="inline-icon" alt="alert icon"/>{:/} **Note**<br>Before you get started, make sure you've installed OpenSearch and OpenSearch Dashboards. For information about installation and configuration, see [Install and configure OpenSearch]({{site.url}}{{site.baseurl}}/install-and-configure/install-opensearch/index/) and [Install and configure OpenSearch Dashboards]({{site.url}}{{site.baseurl}}/install-and-configure/install-dashboards/index/). {::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/alert-icon.png" class="inline-icon" alt="alert icon"/>{:/} **Note**<br>Before you get started, make sure you've installed OpenSearch and OpenSearch Dashboards. For information about installation and configuration, see [Install and configure OpenSearch]({{site.url}}{{site.baseurl}}/install-and-configure/install-opensearch/index/) and [Install and configure OpenSearch Dashboards]({{site.url}}{{site.baseurl}}/install-and-configure/install-dashboards/index/).
{: .note} {: .note}
## Adding sample data ## Adding sample data
Sample datasets come with visualizations, dashboards, and other tools to help you explore Dashboards before you add your own data. To add sample data, perform the following steps: The following tutorials use the [**Sample flight data**](https://playground.opensearch.org/app/home#/tutorial_directory) dataset.
{: .note}
1. Verify access to OpenSearch Dashboards by connecting to [http://localhost:5601](http://localhost:5601) from a browser. The default username and password are `admin`. To add sample data, follow these steps:
1. On the OpenSearch Dashboards **Home** page, choose **Add sample data**.
2. Choose **Add data** to add the datasets, as shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/add-sample-data.png" alt="Sample datasets" width="700"> 1. On the OpenSearch Dashboards **Home** page, choose **Add sample data**. Alternatively, choose **Add data** on the upper-right toolbar.
2. On the **Add sample data** page, choose the dataset(s) you want to add to Dashboards. The following image shows the available sample datasets.
## Exploring and inspecting data <img src="{{site.url}}{{site.baseurl}}/images/dashboards/add-sample-data-2.png" alt="Adding sample data window" width="700">
In [**Discover**]({{site.url}}{{site.baseurl}}/dashboards/discover/index-discover/), you can: ## Using the Discover application
- Choose data to explore, set a time range for that data, search it using [Dashboards Query Language (DQL)]({{site.url}}{{site.baseurl}}/dashboards/dql/), and filter the results. With [**Discover**]({{site.url}}{{site.baseurl}}/dashboards/discover/index-discover/), you can:
- Explore the data, view individual documents, and create tables summarizing the data.
- Visualize your findings.
### Try it: Getting familiar with Discover - Choose data for analysis, set a time range for that data, search it using [Dashboards Query Language (DQL)]({{site.url}}{{site.baseurl}}/dashboards/dql/), and filter the results.
- Analyze your data by querying and filtering, viewing results in a table, and examining documents.
- Create histograms to display the distribution of your data.
1. On the OpenSearch Dashboards **Home** page, choose **Discover**. Follow these steps to use the Discover tool:
1. Change the [time filter]({{site.url}}{{site.baseurl}}/dashboards/discover/time-filter/) to **Last 7 days**, as shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/last-7--days.png" alt="Time filter interface" width="250"/> 1. From the OpenSearch Dashboards navigation menu, choose **Discover**.
2. On the **Discover** page, choose the index pattern `opensearch_dashboards_sample_data_flights` from the dropdown menu on the upper left.
3. Select the {::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/calendar-oui.png" class="inline-icon" alt="calendar icon"/>{:/} icon to change the [time filter]({{site.url}}{{site.baseurl}}/dashboards/discover/time-filter/) from the default of **Last 15 minutes** to **Last 7 days**.
4. In the DQL search bar, enter `FlightDelay:true AND DestCountry: US AND FlightDelayMin >= 60` and select **Update**. Results are shown for US-bound flights delayed by 60 minutes or more.
5. Filter data by selecting **Add filter** from the DQL search bar and then selecting a **Field**, **Operator**, and **Value** from the dropdown lists in the **Edit Filter** pop-up window. For example, select `FlightDelayType`, **is**, and **Weather Delay**.
2. Search using the DQL query `FlightDelay:true AND DestCountry: US AND FlightDelayMin >= 60` and then choose **Update**. You should see results for US-bound flights delayed by 60 minutes or more, as shown in the following image. The resulting view is shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/dql-search-field.png" alt="DQL search field example" width="700"/> <img src="{{site.url}}{{site.baseurl}}/images/dashboards/opensearch-dashboards-discover.png" alt="Discover output of steps 1 through 6" width="700">
3. To filter data, choose **Add filter** and then select an **Available field**. For example, select `FlightDelayType`, **is**, and **Weather delay** from the **Field**, **Operator**, and **Value** dropdown lists, as shown in the following image. ## Using the Dashboards application
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/filter-data-discover.png" alt="Filter data by FlightDelayType field" width="250"/> With **Dashboards**, you can:
## Visualizing data
Raw data can be difficult to comprehend and use. Data visualizations help you prepare and present data in a visual form. In **Dashboard** you can:
- Display data in a single view. - Display data in a single view.
- Build dynamic dashboards. - Build dynamic dashboards.
- Create and share reports. - Create and share reports.
- Embed analytics to differentiate your applications. - Embed analytics to differentiate your applications.
### Try it: Getting familiar with Dashboard The **Dashboards** application creates and stores visualizations generated from your data. Follow these steps to use the application:
1. On the OpenSearch Dashboards **Home** page, choose **Dashboard**. 1. On the OpenSearch Dashboards **Home** page, choose **Dashboards**. A list of dashboards generated from the sample data appears.
1. Choose **[Flights] Global Flight Data** in the **Dashboards** window, as shown in the following image. 2. In the search toolbar, search for and select **[Flights] Global Flight Dashboard**. You'll see a dashboard preloaded with visualizations, including charts, maps, and data tables.
3. To add other panels to the dashboard, select the **Edit** button and then choose **Add** from the toolbar. The **Add panels** window opens.
4. In the search toolbar in the **Add panels** window, search for and select the existing panel **[Flights] Delay Buckets**. A pop-up message confirms that you've added the panel.
5. Select close `x` to exit the **Add panels** window.
6. The newly added panel is now displayed on the dashboard.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/dashboard-flight-quickstart.png" alt="Data visualization dashboard" width="700"/> The resulting view is shown in the following image.
1. To add panels to the dashboard, choose **Edit** and then **Add** from the toolbar. <img src="{{site.url}}{{site.baseurl}}/images/dashboards/add-panel2.png" alt="Add panel tutorial screen view" width="700">
1. In the **Add panels** window, choose the existing panel **[Flights] Delay Buckets**. You'll see a pop-up window on the lower right confirming that you've added the panel.
1. Select `x` to close the **Add panels** window.
1. View the added panel **[Flights] Delay Buckets**, which is added as the last panel on the dashboard, as shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/add-panel.png" alt="Add panel to dashboard" width="700"/> For information about using a specific data visualization type, such as VisBuilder, go to [Building data visualizations]({{site.url}}{{site.baseurl}}/dashboards/visualize/viz-index/). For information about using dashboards and visualizations in **Observability**, go to [Observability]({{site.url}}{{site.baseurl}}/observing-your-data/).
{: .note}
### Try it: Creating a visualization panel ### Interacting with data using dashboards
Continuing with the preceding dashboard, you'll create a bar chart comparing the number of canceled flights and delayed flights to delay type and then add the panel to the dashboard: Interactive dashboards allow you to analyze data in more depth and filter it in several ways. With **Dashboards**, you can use dashboard-level filters to directly interact with data.
1. Change the default [time range]({{site.url}}{{site.baseurl}}/dashboards/discover/time-filter/) from **24 hours** to **Last 7 days**. Using the **[Flights] Global Flight Dashboard** dashboard, follow these steps to further analyze and filter the sample flight data:
1. In the toolbar, choose **Edit**, then **Create new**.
1. Select **VisBuilder** in the **New Visualizations** window.
1. In the **Data Source** dropdown list, choose `opensearch_dashboards_sample_data_flights`.
1. Drag the fields **Cancelled** and **FlightDelay** to the y-axis column.
1. Drag the field **FlightDelayType** to the x-axis column.
1. Choose **Save** and name the visualization in the **Title** field.
2. Choose **Save and return**. The following bar chart is added as the last panel on the dashboard, as shown in the following image.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/viz-panel-quickstart.png" alt="Creating a visualization panel" width="700"/>
## Interacting with data
Interactive dashboards allow you analyze data in more depth and filter it in several ways. In Dashboards, you can interact directly with data on a dashboard by using dashboard-level filters. For example, continuing with the preceding dashboard, you can filter to show delays and cancellations for a specific airline.
### Try it: Interacting with the sample flight data
1. On the **[Flights] Airline Carrier** panel, choose **OpenSearch-Air**. The dashboard updates automatically. 1. On the **[Flights] Airline Carrier** panel, choose **OpenSearch-Air**. The dashboard updates automatically.
1. Choose **Save** to save the customized dashboard. 2. Choose **Save** to save the dashboard.
Alternatively, you can apply filters using the dashboard toolbar: Alternatively, you can use the dashboard toolbar to apply filters by following these steps:
1. In the dashboard toolbar, choose **Add filter**. 1. In the dashboard toolbar, choose **Add filter**.
1. From the **Field**, **Operator**, and **Value** dropdown lists, choose **Carrier**, **is**, and **OpenSearch-Air**, respectively, as shown in the following image. 2. From the **Field**, **Operator**, and **Value** dropdown lists, choose **Carrier**, **is**, and **OpenSearch-Air**, respectively, as shown in the following image.
3. Choose **Save**. The dashboard updates automatically.
<img src="{{site.url}}{{site.baseurl}}/images/edit-filter.png" alt="Edit field interface" width="400"/> The resulting view is shown in the following image.
1. Choose **Save**. The dashboard updates automatically, and the result is the dashboard shown in the following image. <img src="{{site.url}}{{site.baseurl}}//images/<insert image>" alt="Screenshot of Dashboard tutorial panel view" width="700">
<img src="{{site.url}}{{site.baseurl}}/images/interact-filter-dashboard.png" alt="Dashboard view after applying Carrier filter" width="700"/> ## Turning dark mode on or off
Changing the Dashboards theme requires admin permissions. If you are an admin, follow these steps:
1. Navigate to **Management** > **Dashboards Management** > **Advanced Settings**.
2. Scroll down to the **Appearance** section and locate the **Dark mode** option.
3. Use the toggle switch to turn dark mode on or off for all users of your Dashboards instance, as shown in the image following these steps.
4. Select the **Save changes** button and then the **Reload** button. The updated theme is applied immediately.
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/dark-mode.png" alt="Dark mode view" width="700">
## Next steps ## Next steps
- **Visualize data**. To learn more about data visualizations in OpenSearch Dashboards, see [**Building data visualizations**]({{site.url}}{{site.baseurl}}/dashboards/visualize/viz-index/). - Go to [Building data visualizations]({{site.url}}{{site.baseurl}}/dashboards/visualize/viz-index/) to learn more about Dashboards data visualizations.
- **Create dashboards**. To learn more about creating dashboards in OpenSearch Dashboards, see [**Creating dashboards**]({{site.url}}{{site.baseurl}}/dashboards/quickstart-dashboards/). - Go to [Creating dashboards]({{site.url}}{{site.baseurl}}/dashboards/quickstart-dashboards/) to learn more about creating dashboards.
- **Explore data**. To learn more about exploring data in OpenSearch Dashboards, see [**Exploring data**]({{site.url}}{{site.baseurl}}/dashboards/discover/index-discover/). - Go to [Analyzing data]({{site.url}}{{site.baseurl}}/dashboards/discover/index-discover/) to learn more about using Dashboards to analyze data.
- Go to [Ingest APIs]({{site.url}}{{site.baseurl}}/api-reference/ingest-apis/index/) and [Ingest pipelines]({{site.url}}{{site.baseurl}}/ingest-pipelines/) to learn more about using OpenSearch for data ingestion.

Binary file not shown.

After

Width:  |  Height:  |  Size: 584 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 549 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 715 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 717 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 373 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1015 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 513 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 390 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

BIN
images/icons/menu-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB