[DOCS] Adds the 7.16 Lens docs (#116222)

* [DOCS] Adds the 7.16 Lens docs

* Updates end-to-end tutorial screenshots and text

* Updates text and images in advanced tutorial

* Updates the Lens advanced tutorial text and images

* Adds images to end-to-end tutorial

* Review comments

* Update docs/user/dashboard/lens-advanced.asciidoc

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

* Review comments pt 2

* Remove comments pt 3

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>
This commit is contained in:
Kaarina Tungseth 2021-11-05 11:48:37 -05:00 committed by GitHub
parent 62be2737bc
commit 8aa45f4cec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 279 additions and 184 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 859 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

View file

@ -2,18 +2,21 @@
== Analyze time series data
In this tutorial, you'll use the ecommerce sample data to analyze sales trends, but you can use any type of data to complete the tutorial.
Before using this tutorial, review the <<kibana-concepts-analysts>>.
When you're done, you'll have a complete overview of the sample web logs data.
[role="screenshot"]
image::images/final_time_series_analysis_dashboard.png[Final dashboard with ecommerce sample data, width=50%]
image::images/lens_timeSeriesDataTutorialDashboard_7.16.png[Final dashboard with ecommerce sample data]
Before you begin, you should be familiar with the <<kibana-concepts-analysts>>.
[discrete]
[[add-the-data-and-create-the-dashboard-advanced]]
=== Add the data and create the dashboard
Add the sample ecommerce data that you'll use to create the dashboard panels.
Add the sample ecommerce data, and create and set up the dashboard.
. Go to the {kib} *Home* page, then click *Try our sample data*.
. Go to the *Home* page, then click *Try sample data*.
. On the *Sample eCommerce orders* card, click *Add data*.
@ -25,40 +28,30 @@ Create the dashboard where you'll display the visualization panels.
[float]
[[open-and-set-up-lens-advanced]]
=== Open and set up Lens
=== Open and set up the visualization editor
Open *Lens*, then make sure the correct fields appear.
Open the visualization editor, then make sure the correct fields appear.
. From the dashboard, click *Create visualization*.
. On the dashboard, click *Create visualization*.
. Make sure the *kibana_sample_data_ecommerce* index appears.
+
If you are using your own data, select the <<data-views, data view>> that contains your data.
. Make sure the *kibana_sample_data_ecommerce* index appears, then set the <<set-time-filter,time filter>> to *Last 30 days*.
[discrete]
[[custom-time-interval]]
=== View a date histogram with a custom time interval
=== Create visualizations with custom time intervals
It is common to use the automatic date histogram interval, but sometimes you want a larger or smaller
interval. For performance reasonse, *Lens* lets you choose the minimum time interval, not the exact time interval. The performance limit is controlled by the <<histogram-maxbars, `histogram:maxBars`>> setting and the <<set-time-filter,time range>>.
When you create visualizations with time series data, you can use the default time interval, or increase and decrease the interval. For performance reasons, the visualization editor allows you to choose the minimum time interval, but not the exact time interval. The interval limit is controlled by the <<histogram-maxbars, `histogram:maxBars`>> setting and <<set-time-filter,time range>>.
If you are using your own data, use one of the following options to see hourly sales over the last 30 days:
* View less than 30 days at a time, then use the time filter to select each day separately.
* Increase `histogram:maxBars` to at least 720, which is the number of hours in 30 days. This affects all visualizations and can reduce performance.
If you are using the sample data, use *Normalize unit*, which converts *Average sales per 12 hours*
into *Average sales per 12 hours (per hour)* by dividing the number of hours:
. Set the <<set-time-filter,time filter>> to *Last 30 days*.
To analyze the data with a custom time interval, create a bar chart that shows you how many orders were made at your store every hour:
. From the *Available fields* list, drag *Records* to the workspace.
+
The visualization editor creates a bar chart.
. To zoom in on the data you want to view, click and drag your cursor across the bars.
. To zoom in on the data, click and drag your cursor across the bars.
+
[role="screenshot"]
image::images/lens_advanced_1_1.png[Added records to the workspace]
image::images/lens_clickAndDragZoom_7.16.gif[Cursor clicking and dragging across the bars to zoom in on the data]
. In the layer pane, click *Count of Records*.
@ -67,32 +60,51 @@ image::images/lens_advanced_1_1.png[Added records to the workspace]
.. Click *Add advanced options > Normalize by unit*.
.. From the *Normalize by unit* dropdown, select *per hour*, then click *Close*.
+
*Normalize unit* converts *Average sales per 12 hours* into *Average sales per 12 hours (per hour)* by dividing the number of hours.
. To hide the *Horizontal axis* label, open the *Bottom Axis* menu, then deselect *Show*.
+
You have a bar chart that shows you how many orders were made at your store every hour.
To identify the 75th percentile of orders, add a reference line:
. In the layer pane, click *Add layer > Add reference layer*.
. Click *Static value*.
. Click the *Percentile* function, then enter `75` in the *Percentile* field.
. Configure the display options.
.. In the *Display name* field, enter `75th`.
.. Select *Show display name*.
.. From the *Icon* dropdown, select *Tag*.
.. In the *Color* field, enter `#E7664C`.
. Click *Close*.
+
[role="screenshot"]
image::images/lens_advanced_1_2.png[Orders per day]
image::images/lens_barChartCustomTimeInterval_7.16.png[Orders per day]
. Click *Save and return*.
[discrete]
[[add-a-data-layer-advanced]]
=== Monitor multiple series
=== Analyze multiple data series
It is often required to monitor multiple series within a time interval. These series can have similar configurations with minor differences.
*Lens* copies a function when you drag it to the *Drop a field or click to add* field within the same group.
You can create visualizations with multiple data series within the same time interval, even when the series have similar configurations with minor differences.
To quickly create many copies of a percentile metric that shows distribution of price over time:
To analyze multiple series, create a line chart that displays the price distribution of products sold over time:
. On the dashboard, click *Create visualization*.
. Open the *Chart Type* dropdown, then select *Line*.
. Open the *Visualization type* dropdown, then select *Line*.
. From the *Available fields* list, drag *products.price* to the workspace.
Create the 95th percentile.
Create the 95th price distribution percentile:
. In the layer pane, click *Median of products.price*.
@ -100,9 +112,9 @@ Create the 95th percentile.
. In the *Display name* field, enter `95th`, then click *Close*.
To create the 90th percentile, duplicate the `95th` percentile.
To copy a function, you drag it to the *Drop a field or click to add* field within the same group. To create the 90th percentile, duplicate the `95th` percentile:
. Drag the *95th* field to the *Drop a field or click to add* field in the *Vertical axis* group.
. Drag the *95th* field to *Add or drag-and-drop a field* for *Vertical axis*.
+
[role="screenshot"]
image::images/lens_advanced_2_2.gif[Easily duplicate the items with drag and drop]
@ -111,22 +123,22 @@ image::images/lens_advanced_2_2.gif[Easily duplicate the items with drag and dro
. In the *Display name* field enter `90th`, then click *Close*.
. Repeat the duplication steps to create the `50th` and `10th` percentiles.
. To create the `50th` and `10th` percentiles, repeat the duplication steps.
. Open the *Left Axis* menu, then enter `Percentiles for product prices` in the *Axis name* field.
+
You have a line chart that shows you the price distribution of products sold over time.
+
[role="screenshot"]
image::images/lens_advanced_2_3.png[Percentiles for product prices chart]
image::images/lens_lineChartMultipleDataSeries_7.16.png[Percentiles for product prices chart]
. Click *Save and return*.
[discrete]
[[add-a-data-layer]]
==== Add multiple chart types or index patterns
=== Analyze multiple visualization types
To overlay visualization types or index patterns, add layers. When you create layered charts, match the data on the horizontal axis so that it uses the same scale.
With layers, you can analyze your data with multiple visualization types. When you create layered visualizations, match the data on the horizontal axis so that it uses the same scale.
To analyze multiple visualization types, create an area chart that displays the average order prices, then add a line chart layer that displays the number of customers.
. On the dashboard, click *Create visualization*.
@ -136,19 +148,19 @@ To overlay visualization types or index patterns, add layers. When you create la
.. Click the *Average* function.
.. In the *Display name* field, enter `Average of prices`, then click *Close*.
.. In the *Display name* field, enter `Average price`, then click *Close*.
. Open the *Chart Type* dropdown, then select *Area*.
. Open the *Visualization type* dropdown, then select *Area*.
Create a new layer to overlay with custom traffic.
Add a layer to display the customer traffic:
. In the layer pane, click *+*.
. In the layer pane, click *Add layer > Add visualization layer*.
. From the *Available fields* list, drag *customer_id* to the *Vertical Axis* field in the second layer.
. In the second layer, click *Unique count of customer_id*.
. In the layer pane, click *Unique count of customer_id*.
.. In the *Display name* field, enter `Unique customers`.
.. In the *Display name* field, enter `Number of customers`.
.. In the *Series color* field, enter *#D36086*.
@ -156,12 +168,15 @@ Create a new layer to overlay with custom traffic.
. From the *Available fields* list, drag *order_date* to the *Horizontal Axis* field in the second layer.
. In the second layer pane, open the *Chart type* menu, then click the line chart.
. In the second layer, open the *Layer visualization type* menu, then click *Line*.
+
[role="screenshot"]
image::images/lens_advanced_3_2.png[Change layer type]
image::images/lens_layerVisualizationTypeMenu_7.16.png[Layer visualization type menu]
. Open the *Legend* menu, then select the arrow that points up.
. To change the position of the legend, open the *Legend* menu, then select the *Alignment* arrow that points up.
+
[role="screenshot"]
image::images/lens_mixedXYChart_7.16.png[Layer visualization type menu]
. Click *Save and return*.
@ -169,35 +184,35 @@ image::images/lens_advanced_3_2.png[Change layer type]
[[percentage-stacked-area]]
=== Compare the change in percentage over time
By default, *Lens* shows *date histograms* using a stacked chart visualization, which helps understand how distinct sets of documents perform over time. Sometimes it is useful to understand how the distributions of these sets change over time.
Combine *filters* and *date histogram* functions to see the change over time in specific
sets of documents. To view this as a percentage, use a *Stacked percentage* bar or area chart.
By default, the visualization editor displays time series data with stacked charts, which show how the different document sets change over time.
To view change over time as a percentage, create an *Area percentage* chart that displays three order categories over time:
. On the dashboard, click *Create visualization*.
. From the *Available fields* list, drag *Records* to the workspace.
. Open the *Chart type* dropdown, then select *Area percentage*.
. Open the *Visualization type* dropdown, then select *Area percentage*.
For each category type, create a filter.
For each order category, create a filter:
. In the layer pane, click the *Drop a field or click to add* field for *Break down by*.
. In the layer pane, click *Add or drag-and-drop a field* for *Break down by*.
. Click the *Filters* function.
. Click *All records*, enter the following, then press Return:
. Click *All records*, enter the following in the query bar, then press Return:
* *KQL* &mdash; `category.keyword : *Clothing`
* *Label* &mdash; `Clothing`
. Click *Add a filter*, enter the following, then press Return:
. Click *Add a filter*, enter the following in the query bar, then press Return:
* *KQL* &mdash; `category.keyword : *Shoes`
* *Label* &mdash; `Shoes`
. Click *Add a filter*, enter the following, then press Return:
. Click *Add a filter*, enter the following in the query bar, then press Return:
* *KQL* &mdash; `category.keyword : *Accessories`
@ -205,10 +220,10 @@ For each category type, create a filter.
. Click *Close*.
. Open the *Legend* menu, then select the arrow that points up.
. Open the *Legend* menu, then select the *Alignment* arrow that points up.
+
[role="screenshot"]
image::images/lens_advanced_4_1.png[Prices share by category]
image::images/lens_areaPercentageNumberOfOrdersByCategory_7.16.png[Prices share by category]
. Click *Save and return*.
@ -220,9 +235,9 @@ To determine the number of orders made only on Saturday and Sunday, create an ar
. On the dashboard, click *Create visualization*.
. Open the *Chart Type* dropdown, then select *Area*.
. Open the *Visualization type* dropdown, then select *Area*.
Configure the cumulative sum of the store orders.
Configure the cumulative sum of store orders:
. From the *Available fields* list, drag *Records* to the workspace.
@ -230,15 +245,15 @@ Configure the cumulative sum of the store orders.
. Click the *Cumulative sum* function.
. In the *Display name* field, enter `Cumulative orders during weekend days`, then click *Close*.
. In the *Display name* field, enter `Cumulative weekend orders`, then click *Close*.
Filter the results to display the data for only Saturday and Sunday.
Filter the results to display the data for only Saturday and Sunday:
. In the layer pane, click the *Drop a field or click to add* field for *Break down by*.
. In the layer pane, click *Add or drag-and-drop a field* for *Break down by*.
. Click the *Filters* function.
. Click *All records*, enter the following, then press Return:
. Click *All records*, enter the following in the query bar, then press Return:
* *KQL* &mdash; `day_of_week : "Saturday" or day_of_week : "Sunday"`
@ -249,7 +264,7 @@ The <<kuery-query,KQL filter>> displays all documents where `day_of_week` matche
. Open the *Legend* menu, then click *Hide*.
+
[role="screenshot"]
image::images/lens_advanced_5_2.png[Line chart with cumulative sum of orders made on the weekend]
image::images/lens_areaChartCumulativeNumberOfSalesOnWeekend_7.16.png[Area chart with cumulative sum of orders made on the weekend]
. Click *Save and return*.
@ -257,30 +272,25 @@ image::images/lens_advanced_5_2.png[Line chart with cumulative sum of orders mad
[[compare-time-ranges]]
=== Compare time ranges
*Lens* allows you to compare the selected time range with historical data using the *Time shift* option.
With *Time shift*, you can compare the data from different time ranges. To make sure the data correctly displays, choose a multiple of the date histogram interval when you use multiple time shifts. For example, you are unable to use a *36h* time shift for one series, and a *1d* time shift for the second series if the interval is *days*.
If multiple time shifts are used in a single chart, a multiple of the date histogram interval should be chosen, or the data points might not line up and gaps can appear.
For example, if a daily interval is used, shifting one series by *36h*, and another by *1d* is not recommended. You can reduce the interval to *12h*, or create two separate charts.
To compare current sales numbers with sales from a week ago, follow these steps:
To compare two time ranges, create a line chart that compares the sales in the current week with sales from the previous week:
. On the dashboard, click *Create visualization*.
. Open the *Chart Type* dropdown, then select *Line*.
. Open the *Visualization type* dropdown, then select *Line*.
. From the *Available fields* list, drag *Records* to the workspace.
. In the layer pane, drag *Count of Records* to the *Drop a field or click to add* field in the *Vertical axis* group.
. To duplicate *Count of Records*, drag *Count of Records* to *Add or drag-and-drop a field* for *Vertical axis* in the layer pane.
To create a week-over-week comparison, shift the second *Count of Records* by one week.
To create a week-over-week comparison, shift *Count of Records [1]* by one week:
. In the layer pane, click *Count of Records [1]*.
. Open the *Add advanced options* dropdown, then select *Time shift*.
. Click *1 week ago*.
. Click *Add advanced options > Time shift*, select *1 week ago*, then click *Close*.
+
To define custom time shifts, enter the time value, the time increment, then press Enter. For example, to use a one week time shift, enter *1w*.
To use custom time shifts, enter the time value and increment, then press Enter. For example, enter *1w* to use the *1 week ago* time shift.
+
[role="screenshot"]
image::images/lens_time_shift.png[Line chart with week-over-week sales comparison]
@ -289,9 +299,11 @@ image::images/lens_time_shift.png[Line chart with week-over-week sales compariso
[float]
[[compare-time-as-percent]]
==== Compare time ranges as a percent change
==== Analyze the percent change between time ranges
To view the percent change in sales between the current time and the previous week, create a *Formula*.
With *Formula*, you can analyze the percent change in your data from different time ranges.
To compare time range changes as a percent, create a bar chart that compares the sales in the current week with sales from the previous week:
. On the dashboard, click *Create visualization*.
@ -299,11 +311,11 @@ To view the percent change in sales between the current time and the previous we
. In the layer pane, click *Count of Records*.
.. Click *Formula*, then enter `count() / count(shift='1w') - 1`.
. Click *Formula*, then enter `count() / count(shift='1w') - 1`.
.. Open the *Value format* dropdown, select *Percent*, then enter `0` in the *D*ecimals* field.
. Open the *Value format* dropdown, select *Percent*, then enter `0` in the *Decimals* field.
.. In the *Display name* field, enter `Percent change`, then click *Close*.
. In the *Display name* field, enter `Percent of change`, then click *Close*.
+
[role="screenshot"]
image::images/lens_percent_chage.png[Bar chart with percent change in sales between the current time and the previous week]
@ -312,34 +324,33 @@ image::images/lens_percent_chage.png[Bar chart with percent change in sales betw
[discrete]
[[view-customers-over-time-by-continents]]
=== Create a table of customers by category over time
=== Analyze the data in a table
Tables are useful when you want to display the actual field values.
You can build a date histogram table, and group the customer count metric by category, such as the continent registered in user accounts.
With tables, you can view and compare the field values, which is useful for displaying the locations of customer orders.
In *Lens* you can split the metric in a table leveraging the *Columns* field, where each data value from the aggregation is used as column of the table and the relative metric value is shown.
Create a date histogram table and group the customer count metric by category, such as the continent registered in user accounts:
. On the dashboard, click *Create visualization*.
. Open the *Chart Type* dropdown, then click *Table*.
. Open the *Visualization type* dropdown, then select *Table*.
. From the *Available fields* list, drag *customer_id* to the *Metrics* field in the layer pane.
. In the layer pane, click *Unique count of customer_id*.
.. In the layer pane, click *Unique count of customer_id*.
. In the *Display name* field, enter `Customers`, then click *Close*.
.. In the *Display name* field, enter `Customers`, then click *Close*.
. From the *Available fields* list, drag *order_date* to the *Rows* field in the layer pane.
. In the layer pane, click the *order_date*.
.. In the layer pane, click the *order_date*.
.. Select *Customize time interval*.
.. Change the *Minimum interval* to *1 days*.
.. In the *Display name* field, enter `Sale`, then click *Close*.
.. In the *Display name* field, enter `Sales`, then click *Close*.
Add columns for each continent.
To split the metric, add columns for each continent using the *Columns* field:
. From the *Available fields* list, drag *geoip.continent_name* to the *Columns* field in the layer pane.
+
@ -360,3 +371,6 @@ Now that you have a complete overview of your ecommerce sales data, save the das
. Select *Store time with dashboard*.
. Click *Save*.
[role="screenshot"]
image::images/lens_timeSeriesDataTutorialDashboard_7.16.png[Final dashboard with ecommerce sample data]

View file

@ -48,6 +48,8 @@ Choose the data you want to visualize.
. If you want to learn more about the data a field contains, click the field.
. To visualize more than one index pattern, click *Add layer > Add visualization layer*, then select the index pattern.
Edit and delete.
. To change the aggregation *Quick function* and display options, click the field in the layer pane.
@ -60,11 +62,11 @@ Edit and delete.
Change the fields list to display a different index pattern, different time range, or add your own fields.
* To create a visualization with fields in a different index pattern, open the *Change index pattern* dropdown, then select the index pattern.
* To create a visualization with fields in a different index pattern, open the *Index pattern* dropdown, then select the index pattern.
* If the fields list is empty, change the <<set-time-filter,time filter>>.
* To add fields, open the action menu (*...*) next to the *Change index pattern* dropdown, then select *Add field to index pattern*.
* To add fields, open the action menu (*...*) next to the *Index pattern* dropdown, then select *Add field to index pattern*.
+
[role="screenshot"]
image:images/runtime-field-menu.png[Dropdown menu located next to index pattern field with items for adding and managing fields, width=50%]
@ -176,6 +178,29 @@ Compare your real-time data set to the results that are offset by a time increme
For a time shift example, refer to <<compare-time-ranges>>.
[float]
[[add-reference-lines]]
==== Add reference lines
With reference lines, you can identify specific values in your visualizations with icons, colors, and other display options. You can add reference lines to any visualization type that displays axes.
For example, to track the number of bytes in the 75th percentile, add a shaded *Percentile* reference line to your time series visualization.
[role="screenshot"]
image::images/lens_referenceLine_7.16.png[Lens drag and drop focus state]
. In the layer pane, click *Add layer > Add reference layer*.
. Click the reference line value, then specify the reference line you want to use:
* To add a static reference line, click *Static*, then enter the reference line value you want to use.
* To add a dynamic reference line, click *Quick functions*, then click and configure the functions you want to use.
* To calculate the reference line value with math, click *Formula*, then enter the formula.
. Specify the display options, such as *Display name* and *Icon*, then click *Close*.
[float]
[[filter-the-data]]
==== Apply filters
@ -236,9 +261,29 @@ The following component menus are available:
* *Left axis*, *Bottom axis*, and *Right axis* &mdash; Specify how you want to display the chart axes. For example, add axis labels and change the orientation and bounds.
[float]
[[view-data-and-requests]]
==== View the visualization data and requests
To view the data included in the visualization and the requests that collected the data, use the *Inspector*.
. In the toolbar, click *Inspect*.
. Open the *View* dropdown, then click *Data*.
.. From the dropdown, select the table that contains the data you want to view.
.. To download the data, click *Download CSV*, then select the format type.
. 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]
[[save-the-lens-panel]]
===== Save and add the 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.
@ -408,7 +453,7 @@ To configure the bounds, use the menus in the editor toolbar. Bar and area chart
.*Is it possible to display icons in data tables?*
[%collapsible]
====
You can display icons with <<managing-index-patterns, field formatter>> in data tables.
You can display icons with <<managing-index-patterns, field formatters>> in data tables.
====
[discrete]

View file

@ -1,21 +1,24 @@
[[create-a-dashboard-of-panels-with-web-server-data]]
== Build your first dashboard
== Create your first dashboard
Learn the most common ways to build a dashboard from your own data.
Learn the most common ways to create a dashboard from your own data.
The tutorial will use sample data from the perspective of an analyst looking
at website logs, but this type of dashboard works on any type of data.
Before using this tutorial, you should be familiar with the <<kibana-concepts-analysts>>.
When you're done, you'll have a complete overview of the sample web logs data.
[role="screenshot"]
image::images/lens_end_to_end_dashboard.png[Final dashboard vis]
image::images/lens_logsDashboard_7.16.png[Logs dashboard]
Before you begin, you should be familiar with the <<kibana-concepts-analysts>>.
[discrete]
[[add-the-data-and-create-the-dashboard]]
=== Add the data and create the dashboard
Add the sample web logs data that you'll use to create the dashboard panels.
Add the sample web logs data, and create and set up the dashboard.
. Go to the {kib} *Home* page, then click *Try our sample data*.
. Go to the *Home* page, then click *Try sample data*.
. On the *Sample web logs* card, click *Add data*.
@ -29,56 +32,70 @@ Create the dashboard where you'll display the visualization panels.
[float]
[[open-and-set-up-lens]]
=== Open Lens and get familiar with the data
=== Open the visualization editor and get familiar with the data
Open the visualization editor, then make sure the correct fields appear.
. On the dashboard, click *Create visualization*.
. Make sure the *kibana_sample_data_logs* index appears.
+
[role="screenshot"]
image::images/lens_end_to_end_1_2.png[Lens index pattern selector, width=50%]
image::images/lens_indexPatternDropDown_7.16.png[Index pattern dropdown]
. To create the visualizations in this tutorial, you'll use the *Records*, *timestamp*, *bytes*, *clientip*, and *referer.keyword* fields. To see the most frequent values of a field, hover over the field name, then click *i*.
To create the visualizations in this tutorial, you'll use the following fields:
* *Records*
* *timestamp*
* *bytes*
* *clientip*
* *referer.keyword*
To see the most frequent values in a field, hover over the field name, then click *i*.
[discrete]
[[view-the-number-of-website-visitors]]
=== Create your first visualization
Pick a field you want to analyze, such as *clientip*. If you want
to analyze only this field, you can use the *Metric* visualization to display a big number.
The only number function that you can use with *clientip* is *Unique count*.
*Unique count*, also referred to as cardinality, approximates the number of unique values
of the *clientip* field.
Pick a field you want to analyze, such as *clientip*. To analyze only the *clientip* field, use the *Metric* visualization to display the field as a number.
. To select the visualization type, open the *Chart type* dropdown, then select *Metric*.
The only number function that you can use with *clientip* is *Unique count*, also referred to as cardinality, which approximates the number of unique values.
. Open the *Visualization type* dropdown, then select *Metric*.
+
[role="screenshot"]
image::images/lens_end_to_end_1_2_1.png[Chart Type dropdown with Metric selected, width=50%]
image::images/lens_visualizationTypeDropdown_7.16.png[Visualization type dropdown]
. From the *Available fields* list, drag *clientip* to the workspace.
. From the *Available fields* list, drag *clientip* to the workspace or layer pane.
+
[role="screenshot"]
image::images/lens_end_to_end_1_3.png[Changed type and dropped clientip field]
image::images/lens_metricUniqueCountOfClientip_7.16.png[Metric visualization of the clientip field]
+
*Lens* selects the *Unique count* function because it is the only numeric function
that works for IP addresses. You can also drag *clientip* to the layer pane for the same result.
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.
. In the layer pane, click *Unique count of clientip*.
.. In the *Display name* field, enter `Unique visitors`.
.. Click *Close*.
+
[role="screenshot"]
image::images/lens_metricUniqueVisitors_7.16.png[Metric visualization that displays number of unique visitors]
. Click *Save and return*.
+
The metric visualization has its own label, so you do not need to add a panel title.
*[No Title]* appears in the visualization panel header. Since the visualization has its own `Unique visitors` label, you do not need to add a panel title.
[discrete]
[[mixed-multiaxis]]
=== View a metric over time
*Lens* has two shortcuts that simplify viewing metrics over time.
If you drag a numeric field to the workspace, *Lens* adds the default
There are two shortcuts you can use to view metrics over time.
When you drag a numeric field to the workspace, the visualization editor adds the default
time field from the index pattern. When you use the *Date histogram* function, you can
replace the time field by dragging the field to the workspace.
@ -88,78 +105,76 @@ To visualize the *bytes* field over time:
. From the *Available fields* list, drag *bytes* to the workspace.
+
*Lens* creates a bar chart with the *timestamp* and *Median of bytes* fields, and automatically chooses a date interval.
The visualization editor creates a bar chart with the *timestamp* and *Median of bytes* fields.
. To zoom in on the data you want to view, click and drag your cursor across the bars.
. To zoom in on the data, click and drag your cursor across the bars.
+
[role="screenshot"]
image::images/lens_end_to_end_3_1_1.gif[Zoom in on the data]
To emphasize the change in *Median of bytes* over time, change to a line chart with one of the following options:
To emphasize the change in *Median of bytes* over time, change the visualization type to *Line* with one of the following options:
* From the *Suggestions*, click the line chart.
* Open the *Chart type* dropdown in the editor toolbar, then select *Line*.
* Open the *Chart type* menu in the layer pane, then click the line chart.
* In the *Suggestions*, click the line chart.
* In the editor toolbar, open the *Visualization type* dropdown, then select *Line*.
* In the layer pane, open the *Layer visualization type* menu, then click *Line*.
You can increase and decrease the minimum interval that *Lens* uses, but you are unable to decrease the interval
below the <<advanced-options,*Advanced Settings*>>.
To set the minimum time interval:
To increase the minimum time interval:
. In the layer pane, click *timestamp*.
. Select *Customize time interval*.
. Change the *Minimum interval* to *1 days*, then click *Close*.
+
You can increase and decrease the minimum interval, but you are unable to decrease the interval below the <<advanced-options,*Advanced Settings*>>.
To save space on the dashboard, hide the vertical and horizontal axis labels.
To save space on the dashboard, hide the axis labels.
. Open the *Left axis* menu, then deselect *Show*.
+
[role="screenshot"]
image::images/lens_end_to_end_4_3.png[Turn off axis label]
image::images/lens_leftAxisMenu_7.16.png[Left axis menu]
. Open the *Bottom axis* menu, then deselect *Show*.
+
[role="screenshot"]
image::images/lens_lineChartMetricOverTime_7.16.png[Line chart that displays metric data over time]
. Click *Save and return*
Add a panel title to explain the panel, which is necessary because you removed the axis labels.
Since you removed the axis labels, add a panel title:
.. Open the panel menu, then select *Edit panel title*.
. Open the panel menu, then select *Edit panel title*.
.. In the *Panel title* field, enter `Median of bytes`, then click *Save*.
. In the *Panel title* field, enter `Median of bytes`, then click *Save*.
[discrete]
[[view-the-distribution-of-visitors-by-operating-system]]
=== View the top values of a field
Create a visualization that displays the most frequent values of *request.keyword* on your website, ranked by the unique visitors.
To create the visualization, use *Top values of request.keyword* ranked by *Unique count of clientip*, instead of being ranked by *Count of records*.
The *Top values* function ranks the unique values of a field by another function.
The values are the most frequent when ranked by a *Count* function, and the largest when ranked by the *Sum* function.
Create a visualization that displays the most frequent values of *request.keyword* on your website, ranked by the unique visitors.
To create the visualization, use *Top values of request.keyword* ranked by *Unique count of clientip*, instead of
being ranked by *Count of records*.
. On the dashboard, click *Create visualization*.
. From the *Available fields* list, drag *clientip* to the *Vertical axis* field in the layer pane.
+
*Lens* automatically chooses the *Unique count* function. If you drag *clientip* to the workspace, *Lens* adds the field to the incorrect axis.
+
When you drag a text or IP address field to the workspace,
*Lens* adds the *Top values* function ranked by *Count of records* to show the most frequent values.
The visualization editor automatically applies the *Unique count* function. If you drag *clientip* to the workspace, the editor adds the field to the incorrect axis.
. Drag *request.keyword* to the workspace.
+
[role="screenshot"]
image::images/lens_end_to_end_2_1_1.png[Vertical bar chart with top values of request.keyword by most unique visitors]
+
*Lens* adds *Top values of request.keyword* to the *Horizontal axis*.
When you drag a text or IP address field to the workspace,
the editor adds the *Top values* function ranked by *Count of records* to show the most frequent values.
The chart is hard to read because the *request.keyword* field contains long text. You could try
using one of the *Suggestions*, but the suggestions also have issues with long text. Instead, create a *Table* visualization.
The chart labels are unable to display because the *request.keyword* field contains long text fields. You could use one of the *Suggestions*, but the suggestions also have issues with long text. The best way to display long text fields is with the *Table* visualization.
. Open the *Chart type* dropdown, then select *Table*.
. Open the *Visualization type* dropdown, then select *Table*.
+
[role="screenshot"]
image::images/lens_end_to_end_2_1_2.png[Table with top values of request.keyword by most unique visitors]
@ -171,16 +186,19 @@ image::images/lens_end_to_end_2_1_2.png[Table with top values of request.keyword
.. In the *Display name* field, enter `Page URL`.
.. Click *Close*.
+
[role="screenshot"]
image::images/lens_tableTopFieldValues_7.16.png[Table that displays the top field values]
. Click *Save and return*.
+
The table does not need a panel title because the columns are clearly labeled.
Since the table columns are labeled, you do not need to add a panel title.
[discrete]
[[custom-ranges]]
=== Compare a subset of documents to all documents
Create a proportional visualization that helps you to determine if your users transfer more bytes from documents under 10KB versus documents over 10 Kb.
Create a proportional visualization that helps you determine if your users transfer more bytes from documents under 10KB versus documents over 10Kb.
. On the dashboard, click *Create visualization*.
@ -190,12 +208,14 @@ Create a proportional visualization that helps you to determine if your users tr
. From the *Available fields* list, drag *bytes* to the *Break down by* field in the layer pane.
Use the *Intervals* function to select documents based on the number range of a field.
If the ranges were non numeric, or if the query required multiple clauses, you could use the *Filters* function.
To select documents based on the number range of a field, use the *Intervals* function.
When the ranges are non numeric, or the query requires multiple clauses, you could use the *Filters* function.
. To specify the file size ranges, click *bytes* in the layer pane.
Specify the file size ranges:
. Click *Create custom ranges*, enter the following, then press Return:
. In the layer pane, click *bytes*.
. Click *Create custom ranges*, enter the following in the *Ranges* field, then press Return:
* *Ranges* &mdash; `0` -> `10240`
@ -214,27 +234,30 @@ image::images/lens_end_to_end_6_1.png[Custom ranges configuration]
To display the values as a percentage of the sum of all values, use the *Pie* chart.
. Open the *Chart Type* dropdown, then select *Pie*.
. Open the *Visualization Type* dropdown, then select *Pie*.
+
[role="screenshot"]
image::images/lens_pieChartCompareSubsetOfDocs_7.16.png[Pie chart that compares a subset of documents to all documents]
. Click *Save and return*.
. Add a panel title.
Add a panel title:
.. Open the panel menu, then select *Edit panel title*.
. Open the panel menu, then select *Edit panel title*.
.. In the *Panel title* field, enter `Sum of bytes from large requests`, then click *Save*.
. In the *Panel title* field, enter `Sum of bytes from large requests`, then click *Save*.
[discrete]
[[histogram]]
=== View the distribution of a number field
Knowing the distribution of a number helps you find patterns. For example, you can analyze the website traffic per hour to find the best time to do routine maintenance.
The distribution of a number can help you find patterns. For example, you can analyze the website traffic per hour to find the best time for routine maintenance.
. On the dashboard, click *Create visualization*.
. From the *Available fields* list, drag *bytes* to *Vertical axis* field in the layer pane.
. In the layer pane, click *Median of bytes*
. In the layer pane, click *Median of bytes*.
.. Click the *Sum* function.
@ -246,70 +269,80 @@ Knowing the distribution of a number helps you find patterns. For example, you c
. In the layer pane, click *hour_of_day*, then slide the *Intervals granularity* slider until the horizontal axis displays hourly intervals.
+
The *Intervals* function displays an evenly spaced distribution of the field.
[role="screenshot"]
image::images/lens_barChartDistributionOfNumberField_7.16.png[Bar chart that displays the distribution of a number field]
. Click *Save and return*.
Add a panel title:
. Open the panel menu, then select *Edit panel title*.
. In the *Panel title* field, enter `Website traffic`, then click *Save*.
[discrete]
[[treemap]]
=== Create a multi-level chart
You can use multiple functions in data tables and proportion charts. For example,
to create a chart that breaks down the traffic sources and user geography, use *Filters* and
*Top values*.
*Table* and *Proportion* visualizations support multiple functions. For example, to create visualizations that break down the data by website traffic sources and user geography, apply the *Filters* and *Top values* functions.
. On the dashboard, click *Create visualization*.
. Open the *Chart type* dropdown, then select *Treemap*.
. Open the *Visualization type* dropdown, then select *Treemap*.
. From the *Available fields* list, drag *Records* to the *Size by* field in the layer pane.
. In the editor, click the *Drop a field or click to add* field for *Group by*, then create a filter for each website traffic source.
. In the editor, click *Add or drag-and-drop a field* for *Group by*.
.. From *Select a function*, click *Filters*.
Create a filter for each website traffic source:
.. Click *All records*, enter the following, then press Return:
. From *Select a function*, click *Filters*.
. Click *All records*, enter the following in the query bar, then press Return:
* *KQL* &mdash; `referer : *facebook.com*`
* *Label* &mdash; `Facebook`
.. Click *Add a filter*, enter the following, then press Return:
. Click *Add a filter*, enter the following in the query bar, then press Return:
* *KQL* &mdash; `referer : *twitter.com*`
* *Label* &mdash; `Twitter`
.. Click *Add a filter*, enter the following, then press Return:
. Click *Add a filter*, enter the following in the query bar, then press Return:
* *KQL* &mdash; `NOT referer : *twitter.com* OR NOT referer: *facebook.com*`
* *Label* &mdash; `Other`
.. Click *Close*.
. Click *Close*.
Add a geography grouping:
Add the user geography grouping:
. From the *Available fields* list, drag *geo.src* to the workspace.
. From the *Available fields* list, drag *geo.srcdest* to the workspace.
. To change the *Group by* order, drag *Top values of geo.src* so that it appears first.
. To change the *Group by* order, drag *Top 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]
. To view only the Facebook and Twitter data, remove the *Other* category.
Remove the documents that do not match the filter criteria:
.. In the layer pane, click *Top values of geo.src*.
. In the layer pane, click *Top values of geo.srcdest*.
.. Open the *Advanced* dropdown, deselect *Group other values as "Other"*, then click *Close*.
. Click *Advanced*, then deselect *Group other values as "Other"*, the click *Close*.
+
[role="screenshot"]
image::images/lens_treemapMultiLevelChart_7.16.png[Treemap visualization]
. Click *Save and return*.
. Add a panel title.
Add a panel title:
.. Open the panel menu, then select *Edit panel title*.
. Open the panel menu, then select *Edit panel title*.
.. In the *Panel title* field, enter `Page views by location and referrer`, then click *Save*.
. In the *Panel title* field, enter `Page views by location and referrer`, then click *Save*.
[float]
[[arrange-the-lens-panels]]
@ -317,7 +350,7 @@ image::images/lens_end_to_end_7_2.png[Treemap visualization]
Resize and move the panels so they all appear on the dashboard without scrolling.
Decrease the size of the following panels, then move them to the first row:
Decrease the size of the following panels, then move the panels to the first row:
* *Unique visitors*
@ -325,7 +358,10 @@ Decrease the size of the following panels, then move them to the first row:
* *Sum of bytes from large requests*
* *hour_of_day*
* *Website traffic*
+
[role="screenshot"]
image::images/lens_logsDashboard_7.16.png[Logs dashboard]
[discrete]
=== Save the dashboard