[DOCS] Updates quick start and presentation sections with sample data changes (#138945)

* [DOCS] Updates Quick start with sample data changes

* Updates dashboard and editors with sample data changes

* Review comments
This commit is contained in:
Kaarina Tungseth 2022-08-18 11:55:13 -05:00 committed by GitHub
parent ab576bb6c1
commit ced8978e89
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
41 changed files with 66 additions and 45 deletions

View file

@ -9,9 +9,11 @@ To familiarize yourself with *Canvas*, add the Sample eCommerce orders data, the
To create a workpad of the eCommerce store data, add the data set, then create the workpad.
. Go to the {kib} *Home* page, then click *Try our sample data*.
. On the home page, click *Try sample data*.
. On the *Sample eCommerce orders data* card, click *Add data*.
. Click *Other sample data sets*.
. On the *Sample eCommerce orders* card, click *Add data*.
. Open the main menu, then click *Canvas*.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 368 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 974 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 264 KiB

After

Width:  |  Height:  |  Size: 412 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 434 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 412 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 460 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 517 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 645 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

View file

@ -1,13 +1,13 @@
[[get-started]]
== Quick start
To quickly get up and running with {kib}, set up on Cloud, then add a sample data set that you can explore and analyze.
To quickly get up and running with {kib}, set up on Cloud, then add a sample data set that you can explore and visualize.
When you've finished, you'll know how to:
When you're done, you'll know how to:
* <<explore-the-data,Explore the data with *Discover*.>>
* <<view-and-analyze-the-data,Analyze the data with *Dashboard*.>>
* <<view-and-analyze-the-data,Visualize the data with *Dashboard*.>>
[float]
=== Required privileges
@ -26,12 +26,14 @@ include::{docs-root}/shared/cloud/ess-getting-started.asciidoc[]
Sample data sets come with sample visualizations, dashboards, and more to help you explore {kib} before you ingest or add your own data.
. On the home page, click *Try our sample data*.
. On the home page, click *Try sample data*.
. Click *Other sample data sets*.
. On the *Sample eCommerce orders* card, click *Add data*.
+
[role="screenshot"]
image::images/addData_sampleDataCards_7.15.0.png[Add data UI for the sample data sets]
image::images/addData_sampleDataCards_8.4.0.png[Add data UI for the sample data sets]
[float]
[[explore-the-data]]
@ -44,7 +46,7 @@ image::images/addData_sampleDataCards_7.15.0.png[Add data UI for the sample data
. Change the <<set-time-filter, time filter>> to *Last 7 days*.
+
[role="screenshot"]
image::images/tutorial-discover-2.png[Time filter menu with Last 7 days filter configured]
image::images/timeFilter_discover_8.4.0.png[Time filter menu with Last 7 days filter configured]
. To view the sales orders for women's clothing that are $60 or more, use the <<kuery-query,*KQL*>> search field:
+
@ -52,18 +54,18 @@ image::images/tutorial-discover-2.png[Time filter menu with Last 7 days filter c
products.taxless_price >= 60 and category : Women's Clothing
+
[role="screenshot"]
image::images/tutorial-discover-4.png[Discover tables that displays only the orders for women's clothing that are $60 or more]
image::images/kql_discover_8.4.0.png[Discover tables that displays only the orders for women's clothing that are $60 or more]
. To view only the product categories that contain sales orders, hover over the *category* field, then click *+*.
+
[role="screenshot"]
image::images/tutorial-discover-3.png[Discover table that displays only the product categories that contain orders]
image::images/availableFields_discover_8.4.0.png[Discover table that displays only the product categories that contain orders]
[float]
[[view-and-analyze-the-data]]
== View and analyze the data
== Visualize the data
A dashboard is a collection of panels that you can use to view and analyze the data. Panels contain visualizations, interactive controls, text, and more.
A dashboard is a collection of panels that you can use to visualize the data. Panels contain visualizations, interactive controls, text, and more.
. Open the main menu, then click *Dashboard*.
@ -76,7 +78,7 @@ image::images/dashboard_ecommerceRevenueDashboard_7.15.0.png[The [eCommerce] Rev
[[create-a-visualization]]
=== Create a visualization panel
Create a treemap panel that shows the top sales regions and manufacturers, then add the panel to the dashboard.
Create a treemap visualization panel that shows the top sales regions and manufacturers, then add the panel to the dashboard.
. In the toolbar, click *Edit*.
@ -85,7 +87,7 @@ Create a treemap panel that shows the top sales regions and manufacturers, then
. In the drag-and-drop visualization editor, open the *Visualization type* dropdown, then select *Treemap*.
+
[role="screenshot"]
image::getting-started/images/tutorial-visualization-dropdown.png[Chart type menu with Treemap selected]
image::getting-started/images/visualizationTypeDropdown_lens_8.4.0.png[Chart type menu with Treemap selected]
. From the *Available fields* list, drag the following fields to the workspace:
@ -94,7 +96,7 @@ image::getting-started/images/tutorial-visualization-dropdown.png[Chart type men
* *manufacturer.keyword*
+
[role="screenshot"]
image::getting-started/images/tutorial-visualization-treemap.png[Treemap that displays Top values of geoip.city_name and Top values or manufacturer.keyword fields]
image::getting-started/images/ecommerceTreemap_lens_8.4.0.png[Treemap that displays Top values of geoip.city_name and Top values or manufacturer.keyword fields]
. Click *Save and return*.
+
@ -113,26 +115,32 @@ You can interact with the dashboard data using controls that allow you to apply
. Click *Apply changes*.
+
[role="screenshot"]
image::images/dashboard_sampleDataFilter_7.15.0.png[The [eCommerce] Revenue Dashboard that shows only the women's clothing data from the Gnomehouse manufacturer]
image::images/sampleDataFilter_dashboard_8.4.0.png[The [eCommerce] Revenue Dashboard that shows only the women's clothing data from the Gnomehouse manufacturer]
[float]
[[filter-and-query-the-data]]
=== Filter the data
To view a subset of the data, you can apply filters to the dashboard panels. Apply a filter to view the women's clothing data generated on Wednesday from the Gnomehouse manufacturer.
To view a subset of the data, you can apply filters to the dashboard data. Apply a filter to view the women's clothing data generated on Wednesday from the Gnomehouse manufacturer.
. Click *Add filter*.
+
[role="screenshot"]
image::images/addFilter_dashboard_8.4.0.png[The Add filter action that applies dashboard-level filters]
. From the *Field* dropdown, select *day_of_week*.
. From the *Operator* dropdown, select *is*.
. From the *Value* dropdown, select *Wednesday*.
. Click *Save*.
+
[role="screenshot"]
image::images/dashboard_sampleDataAddFilter_7.15.0.png[The [eCommerce] Revenue Dashboard that shows only the women's clothing data generated on Wednesday from the Gnomehouse manufacturer]
image::images/addFilterOptions_dashboard_8.4.0.png[The Add filter options configured to display only the women's clothing data generated on Wednesday from the Gnomehouse manufacturer]
. Click *Add filter*.
+
[role="screenshot"]
image::images/dashboard_sampleDataAddFilter_8.4.0.png[The [eCommerce] Revenue Dashboard that shows only the women's clothing data generated on Wednesday from the Gnomehouse manufacturer]
[float]
[[quick-start-whats-next]]
@ -142,6 +150,6 @@ image::images/dashboard_sampleDataAddFilter_7.15.0.png[The [eCommerce] Revenue D
*Explore your own data in Discover.* Ready to learn more about exploring your data in *Discover*? Go to <<discover, Discover>>.
*Create a dashboard with your own data.* Ready to learn more about analyzing your data in *Dashboard*? Go to <<dashboard, Dashboard>>.
*Create a dashboard with your own data.* Ready to learn more about visualizing your data on a *Dashboard*? Go to <<dashboard, Dashboard>>.
*Try out the {ml-features}.* Ready to analyze the sample data sets and generate models for its patterns of behavior? Go to {ml-docs}/ml-getting-started.html[Getting started with {ml}].

View file

@ -140,9 +140,11 @@ a bar chart that displays the top five log traffic sources for every three hours
Add the sample web logs data that you'll use to create the bar chart, then create the dashboard.
. From the *Home* page, click *Try our sample data*.
. On the home page, click *Try sample data*.
. From *Sample web logs*, click *Add data*.
. Click *Other sample data sets*.
. On the *Sample web logs* card, click *Add data*.
. Open the main menu, then click *Dashboard*.
@ -153,9 +155,9 @@ Add the sample web logs data that you'll use to create the bar chart, then creat
Open the *Aggregation based* editor and change the time range.
. On the dashboard, click *All types > Aggregation based*, select *Vertical bar*, then select *kibana_sample_data_logs*.
. On the dashboard, click *All types > Aggregation based*, select *Vertical bar*, then select *Kibana Sample Data Logs*.
. Make sure the <<set-time-filter, time filter>>> is *Last 7 days*.
. Make sure the <<set-time-filter, time filter>> is *Last 7 days*.
[float]
[[tutorial-configure-the-bar-chart]]
@ -172,7 +174,7 @@ To create the bar chart, add a <<bucket-aggregations,bucket aggregation>>, then
.. Click *Update*.
+
[role="screenshot"]
image:images/aggBased_barChartTutorial1_8.3.png[Bar chart with sample logs data]
image:images/aggBased_barChartTutorial1_8.4.png[Bar chart with sample logs data]
. To show the top five log traffic sources, add a sub-bucket aggregation.
@ -187,7 +189,7 @@ TIP: Aggregation-based panels support a maximum of three *Split series*.
.. Click *Update*.
+
[role="screenshot"]
image:images/aggBased_barChartTutorial2_8.3.png[Bar chart with sample logs data]
image:images/aggBased_barChartTutorial2_8.4.png[Bar chart with sample logs data]
[float]
[[save-the-aggregation-based-panel]]

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 361 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 51 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

View file

@ -16,7 +16,9 @@ Before you begin, you should be familiar with the <<kibana-concepts-analysts>>.
Add the sample ecommerce data, and create and set up the dashboard.
. Go to the *Home* page, then click *Try sample data*.
. On the home page, click *Try sample data*.
. Click *Other sample data sets*.
. On the *Sample eCommerce orders* card, click *Add data*.

View file

@ -73,7 +73,7 @@ Change the fields list to display a different {data-source}, different time rang
* To add fields, open the {data-source} dropdown, then select *Add a field to this {data-source}*.
+
[role="screenshot"]
image:images/lens_dataViewDropDown_8.3.png[Dropdown menu located next to {data-source} field with items for adding and managing fields]
image:images/lens_dataViewDropDown_8.4.0.png[Dropdown menu located next to {data-source} field with items for adding and managing fields]
+
For more information about adding fields to {data-sources} and examples, refer to <<runtime-fields>>.

View file

@ -8,7 +8,7 @@ at website logs, but this type of dashboard works on any type of data.
When you're done, you'll have a complete overview of the sample web logs data.
[role="screenshot"]
image::images/lens_logsDashboard_8.3.png[Logs dashboard]
image::images/lens_logsDashboard_8.4.0.png[Logs dashboard]
Before you begin, you should be familiar with the <<kibana-concepts-analysts>>.
@ -18,7 +18,9 @@ Before you begin, you should be familiar with the <<kibana-concepts-analysts>>.
Add the sample web logs data, and create and set up the dashboard.
. Go to the *Home* page, then click *Try sample data*.
. On the home page, click *Try sample data*.
. Click *Other sample data sets*.
. On the *Sample web logs* card, click *Add data*.
@ -38,10 +40,10 @@ Open the visualization editor, then make sure the correct fields appear.
. On the dashboard, click *Create visualization*.
. Make sure the *kibana_sample_data_logs* data view appears.
. Make sure the *{kib} Sample Data Logs* {data-source} appears.
+
[role="screenshot"]
image::images/lens_dataViewDropDown_8.3.png[Data view dropdown]
image::images/lens_dataViewDropDown_8.4.0.png[Data view dropdown]
To create the visualizations in this tutorial, you'll use the following fields:
@ -68,12 +70,12 @@ The only number function that you can use with *clientip* is *Unique count*, als
. Open the *Visualization type* dropdown, then select *Metric*.
+
[role="screenshot"]
image::images/lens_visualizationTypeDropdown_8.0.png[Visualization type dropdown]
image::images/lens_visualizationTypeDropdown_8.4.0.png[Visualization type dropdown]
. From the *Available fields* list, drag *clientip* to the workspace or layer pane.
+
[role="screenshot"]
image::images/lens_metricUniqueCountOfClientip_7.16.png[Metric visualization of the clientip field]
image::images/lens_metricUniqueCountOfClientip_8.4.0.png[Metric visualization of the clientip field]
+
In the layer pane, *Unique count of clientip* appears because the editor automatically applies the *Unique count* function to the *clientip* field. *Unique count* is the only numeric function that works with IP addresses.
@ -133,7 +135,7 @@ image::images/lens_lineChartMetricOverTimeLeftAxis_8.3.png[Left axis menu]
. Open the *Bottom axis* menu, then select *None* from the *Axis title* dropdown.
+
[role="screenshot"]
image::images/lens_lineChartMetricOverTimeBottomAxis_8.3.png[Line chart that displays metric data over time]
image::images/lens_lineChartMetricOverTimeBottomAxis_8.3.png[Bottom axis menu]
. Click *Save and return*
@ -142,6 +144,9 @@ Since you removed the axis labels, add a panel title:
. Open the panel menu, then select *Edit panel title*.
. In the *Panel title* field, enter `Median of bytes`, then click *Save*.
+
[role="screenshot"]
image::images/lens_lineChartMetricOverTime_8.4.0.png[Line chart that displays metric data over time]
[discrete]
[[view-the-distribution-of-visitors-by-operating-system]]
@ -174,7 +179,7 @@ The chart labels are unable to display because the *request.keyword* field conta
[role="screenshot"]
image::images/lens_end_to_end_2_1_2.png[Table with top values of request.keyword by most unique visitors]
. In the layer pane, click *Top values of request.keyword*.
. In the layer pane, click *Top 5 values of request.keyword*.
.. In the *Number of values* field, enter `10`.
@ -201,7 +206,7 @@ Create a proportional visualization that helps you determine if your users trans
. In the layer pane, click *Median of bytes*.
. Click the *Sum* function, then click *Close*.
. Click the *Sum* quick function, then click *Close*.
. From the *Available fields* list, drag *bytes* to the *Break down by* field in the layer pane.
@ -256,7 +261,7 @@ The distribution of a number can help you find patterns. For example, you can an
. In the layer pane, click *Median of bytes*.
.. Click the *Sum* function.
.. Click the *Sum* quick function.
.. In the *Name* field, enter `Transferred bytes`.
@ -293,7 +298,7 @@ Add a panel title:
Create a filter for each website traffic source:
. Click the *Filters* function.
. Click *Filters*.
. Click *All records*, enter the following in the query bar, then press Return:
@ -319,14 +324,14 @@ Add the user geography grouping:
. From the *Available fields* list, drag *geo.srcdest* to the workspace.
. To change the *Group by* order, drag *Top values of geo.srcdest* in the layer pane so that appears first.
. To change the *Group by* order, drag *Top 3 values of geo.srcdest* in the layer pane so that appears first.
+
[role="screenshot"]
image::images/lens_end_to_end_7_2.png[Treemap visualization]
Remove the documents that do not match the filter criteria:
. In the layer pane, click *Top values of geo.srcdest*.
. In the layer pane, click *Top 3 values of geo.srcdest*.
. Click *Advanced*, deselect *Group other values as "Other"*, then click *Close*.
+
@ -358,7 +363,7 @@ Decrease the size of the following panels, then move the panels to the first row
* *Website traffic*
+
[role="screenshot"]
image::images/lens_logsDashboard_8.3.png[Logs dashboard]
image::images/lens_logsDashboard_8.4.0.png[Logs dashboard]
[discrete]
=== Save the dashboard

View file

@ -40,9 +40,11 @@ As you edit the specs, work in small steps, and frequently save your work. Small
Before starting, add the eCommerce sample data that you'll use in your spec, then create the dashboard.
. From the {kib} *Home* page, click *Try our sample data*.
. On the home page, click *Try sample data*.
. From *eCommerce sample data*, click *Add data*.
. Click *Other sample data sets*.
. On the *Sample eCommerce orders* card, click *Add data*.
. Open the main menu, then click *Dashboard*.