diff --git a/docs/user/dashboard/images/lens_advanced_1_1.png b/docs/user/dashboard/images/lens_advanced_1_1.png new file mode 100644 index 00000000000000..9d67f5cc691ffb Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_1_1.png differ diff --git a/docs/user/dashboard/images/lens_advanced_1_1_2.png b/docs/user/dashboard/images/lens_advanced_1_1_2.png new file mode 100644 index 00000000000000..03c94e50a9136d Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_1_1_2.png differ diff --git a/docs/user/dashboard/images/lens_advanced_1_2.png b/docs/user/dashboard/images/lens_advanced_1_2.png new file mode 100644 index 00000000000000..bc5d1f67be46c3 Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_1_2.png differ diff --git a/docs/user/dashboard/images/lens_advanced_2_1.png b/docs/user/dashboard/images/lens_advanced_2_1.png new file mode 100644 index 00000000000000..5090f0d3b2841f Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_2_1.png differ diff --git a/docs/user/dashboard/images/lens_advanced_2_1_1.png b/docs/user/dashboard/images/lens_advanced_2_1_1.png new file mode 100644 index 00000000000000..f05f17c6093223 Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_2_1_1.png differ diff --git a/docs/user/dashboard/images/lens_advanced_2_2.png b/docs/user/dashboard/images/lens_advanced_2_2.png new file mode 100644 index 00000000000000..820bc3bd4dfa9e Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_2_2.png differ diff --git a/docs/user/dashboard/images/lens_advanced_2_2_1.png b/docs/user/dashboard/images/lens_advanced_2_2_1.png new file mode 100644 index 00000000000000..1aa0ed860f8d98 Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_2_2_1.png differ diff --git a/docs/user/dashboard/images/lens_advanced_3_1.gif b/docs/user/dashboard/images/lens_advanced_3_1.gif new file mode 100644 index 00000000000000..5fdf58eb2fc868 Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_3_1.gif differ diff --git a/docs/user/dashboard/images/lens_advanced_3_1_1.png b/docs/user/dashboard/images/lens_advanced_3_1_1.png new file mode 100644 index 00000000000000..240b75e1139df0 Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_3_1_1.png differ diff --git a/docs/user/dashboard/images/lens_advanced_3_2.png b/docs/user/dashboard/images/lens_advanced_3_2.png new file mode 100644 index 00000000000000..20da2ed706dfd2 Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_3_2.png differ diff --git a/docs/user/dashboard/images/lens_advanced_3_3.png b/docs/user/dashboard/images/lens_advanced_3_3.png new file mode 100644 index 00000000000000..1d88bcd238ca30 Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_3_3.png differ diff --git a/docs/user/dashboard/images/lens_advanced_4_1.png b/docs/user/dashboard/images/lens_advanced_4_1.png new file mode 100644 index 00000000000000..43c8db213d482c Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_4_1.png differ diff --git a/docs/user/dashboard/images/lens_advanced_4_2.png b/docs/user/dashboard/images/lens_advanced_4_2.png new file mode 100644 index 00000000000000..4b3e98910e7b79 Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_4_2.png differ diff --git a/docs/user/dashboard/images/lens_advanced_result.png b/docs/user/dashboard/images/lens_advanced_result.png new file mode 100644 index 00000000000000..19963d87c8e1c5 Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_result.png differ diff --git a/docs/user/dashboard/images/lens_drag_drop.gif b/docs/user/dashboard/images/lens_drag_drop.gif deleted file mode 100644 index 22939467daa120..00000000000000 Binary files a/docs/user/dashboard/images/lens_drag_drop.gif and /dev/null differ diff --git a/docs/user/dashboard/images/lens_drag_drop_1.gif b/docs/user/dashboard/images/lens_drag_drop_1.gif new file mode 100644 index 00000000000000..e2fc30fc7caed0 Binary files /dev/null and b/docs/user/dashboard/images/lens_drag_drop_1.gif differ diff --git a/docs/user/dashboard/images/lens_drag_drop_1.png b/docs/user/dashboard/images/lens_drag_drop_1.png new file mode 100644 index 00000000000000..3462e26026d255 Binary files /dev/null and b/docs/user/dashboard/images/lens_drag_drop_1.png differ diff --git a/docs/user/dashboard/images/lens_drag_drop_2.png b/docs/user/dashboard/images/lens_drag_drop_2.png new file mode 100644 index 00000000000000..4c3c35ce58c9f8 Binary files /dev/null and b/docs/user/dashboard/images/lens_drag_drop_2.png differ diff --git a/docs/user/dashboard/images/lens_drag_drop_3.gif b/docs/user/dashboard/images/lens_drag_drop_3.gif new file mode 100644 index 00000000000000..39211300301b06 Binary files /dev/null and b/docs/user/dashboard/images/lens_drag_drop_3.gif differ diff --git a/docs/user/dashboard/lens-advanced.asciidoc b/docs/user/dashboard/lens-advanced.asciidoc new file mode 100644 index 00000000000000..e6a805e39af0d3 --- /dev/null +++ b/docs/user/dashboard/lens-advanced.asciidoc @@ -0,0 +1,280 @@ +[[create-a-dashboard-of-panels-with-ecommerce-data]] +== Tutorial: Create a dashboard of panels with ecommerce sales data + +You collected sales data from your store, and you want to visualize and analyze the data on a dashboard. +To create dashboard panels of the data, open the *Lens* visualization builder, then +create the visualization panels that best display the data. + +When you've completed the tutorial, you'll have a dashboard that provides you with a complete overview of your ecommerce sales data. + +[role="screenshot"] +image::images/lens_advanced_result.png[Dashboard view] + +[discrete] +[[add-the-data-and-create-the-dashboard]] +=== Add the data and create the dashboard + +To create visualizations of the data from your store, add the data set, then create the dashboard. + +. From the {kib} *Home* page, click *Try our sample data*. + +. From *Sample eCommerce orders*, click *Add data*. + +. Open the main menu, then click *Dashboard*. + +. On the *Dashboards* page, click *Create dashboard*. + +[float] +[[open-and-set-up-lens]] +=== Open and set up Lens + +Open the *Lens* editor, then make sure the correct fields appear. + +. From the dashboard, click *Create panel*. + +. On the *New visualization* window, click *Lens*. ++ +[role="screenshot"] +image::images/lens_end_to_end_1_1.png[New visualization popover] + +. Make sure the *kibana_sample_data_ecommerce_* index appears. ++ +The list of fields that appear depend on the <>, <>, and field filters. + +[discrete] +[[view-the-number-of-transactions-per-day]] +=== View the number of transactions per hour by normalizing by unit or selecting custom interval + +To determine the number of orders made per hour, create a bar chart, then add it to the dashboard. + +. Set the <> to *Last 30 days*. + +. From the *Available fields* list, drag and drop *Records* to the visualization builder. ++ +[role="screenshot"] +image::images/lens_advanced_1_1.png[Added records to the workspace] + +. Change the *Vertical axis* title and display the number of orders per day. + +.. From the editor, click *Count of Records*. + +.. In the *Display name* field, enter `Number of orders`. + +. To view number of transactions per hour, you can normalize the current interval by unit or customize time interval to 1 hour. *Normalize by unit* will calculate an hourly average for each 12-hour interval, which is less granular but faster than querying each hour. Customizing time interval will create a bucket for each hour, so querying will be slower. Apart from that, for a very big timerange, the created interval can be bigger than 1 hour as the maximum number of buckets is limited. + +.. To Normalize the current interval by unit: + +... Click *Add advanced options > Normalize by unit*. + +... From the *Normalize by unit* dropdown, select *per hour*, then click *Close*. + +.. To create hourly time intervals on date histogram: + +... Close *Count of Records* editor by clicking *Close*. + +... From the editor, click *order date*. + +... Select *Customize time interval*. + +... Change the *Minimum interval* to `1 hour`, then click *Close*. + +. To hide the *Horizontal axis* label, open the *Bottom Axis* menu, then deselect *Show*. + ++ +[role="screenshot"] +image::images/lens_advanced_1_1_2.png[Bottom axis menu] ++ +You have a bar chart that shows you how many orders were made at your store per hour. ++ +[role="screenshot"] +image::images/lens_advanced_1_2.png[Orders per day] + +. Click *Save and return*. + +[discrete] +[[view-the-cumulative-number-of-products-sold-over-time]] +=== View the cumulative number of products sold on weekends + +To determine the number of orders made only on Saturday and Sunday, create an area chart, then add it to the dashboard. + +. Open *Lens*. + +. From the *Chart Type* dropdown, select *Area*. ++ +[role="screenshot"] +image::images/lens_advanced_2_1_1.png[Chart type menu with Area selected] + +. Configure the cumulative sum of the store orders. + +.. From the *Available fields* list, drag and drop *Records* to the visualization builder. + +.. From the editor, click *Count of Records*. + +.. From *Select a function*, click *Cumulative sum*. + +.. In the *Display name* field, enter `Cumulative orders during weekend days`, then click *Close*. + +. Filter the results to display the data for only Saturday and Sunday. + +.. From the editor, click the *Drop a field or click to add* field for *Break down by*. + +.. From *Select a function*, click *Filters*. + +.. Click *All records*. + +.. In the *KQL* field, enter `day_of_week : "Saturday" or day_of_week : "Sunday"`. This <> will match documents where `day_of_week` matches exactly `Saturday` or `Sunday`. + +Hint: A simpler way to achieve the same effect is typing a filter in KQL bar above the chart. However, there are powerful advantages of using Filters aggregation over KQL bar: + - you can add only one filter to KQL bar, but you can add as many filters as needed with Filters aggregations, + - KQL bar will filter all data used in visualization, whereas Filters aggregation will only filter the current layer so you can have a chart with both filtered and unfiltered data if needed. + +.. Press Return. ++ +[role="screenshot"] +image::images/lens_advanced_2_1.png[Filter aggregation to filter weekend days] + +. To hide the legend, open the *Legend* menu, then click *Hide*. ++ +[role="screenshot"] +image::images/lens_advanced_2_2_1.png[Legend menu] ++ +You have an area chart that shows you how many orders your store received during the weekend. ++ +[role="screenshot"] +image::images/lens_advanced_2_2.png[Line chart with cumulative sum of orders made on the weekend] + +. Click *Save and return*. + +[discrete] +[[add-a-data-layer]] +=== Create multiple key percentiles of product prices + +To view the price distribution of products sold over time, create a percentile chart, then add it to the dashboard. + +. Open *Lens*. + +. From the *Chart Type* dropdown, select *Line*. + +. From the *Available fields* list, drag and drop the data fields to the *Drop a field or click to add* fields in the editor. + +* Drag and drop *products.price* to the *Vertical axis* field. + +* Drag and drop *order_date* to the *Horizontal axis* field. + +. Create the 95th percentile. + +.. In the editor, click *Median of products.price*. + +.. From *Select a function*, click *Percentile*. + +.. In the *Display name* field, enter `95th`, then click *Close*. + +. To create the 90th percentile, duplicate the `95th` percentile. + +.. Drag and drop *95th* to *Drop a field or click to add*. + +.. Click *95th [1]*, then enter `90` in the *Percentile* field. + +.. In the *Display name* field enter `90th`, then click *Close*. ++ +[role="screenshot"] +image::images/lens_advanced_3_1.gif[Easily duplicate the items with drag and drop] + +. Create the 50th percentile. + +.. Drag and drop *90th* to *Drop a field or click to add*. + +.. Click *90th [1]*, then enter `50` in the *Percentile* field. + +.. In the *Display name* field enter `50th`, then click *Close*. + +. Create the 10th percentile. + +.. Drag and drop *50th* to *Drop a field or click to add*. + +.. Click *50th [1]*, then enter `10` in the *Percentile* field. + +.. In the *Display name* field enter `10th`, then click *Close*. + +. To change the left axis label, open the *Left Axis* menu, then enter `Percentiles for product prices` in the *Axis name* field. ++ +[role="screenshot"] +image::images/lens_advanced_3_1_1.png[Left Axis menu] ++ +You have a line chart that shows you the price distribution of products sold over time. ++ +[role="screenshot"] +image::images/lens_advanced_3_3.png[Percentiles for product prices chart] + +. Click *Save and return*. + +[discrete] +[[add-the-response-code-filters]] +=== View the moving average of inventory prices + +To view and analyze the prices of shoes, accessories, and clothing in the store inventory, create a line chart. + +. Open *Lens*. + +. From the *Chart Type* dropdown, select *Line*. + +. From the *Available fields* list, drag and drop *products.price* to the visualization builder. + +. In the editor, click the *Drop a field or click to add* field for *Break down by*. + +. From *Select a function*, click *Filters*. + +. Add a filter for shoes. + +.. Click *All records*. + +.. In the *KQL* field, enter `category.keyword : *Shoes*`. + +.. In the *Label* field, enter `Shoes`, then press Return. + +. Add a filter for accessories. + +.. Click *Add a filter*. + +.. In the *KQL* field, enter `category.keyword : *Accessories*`. + +.. In the *Label* field, enter `Accessories`, then press Return. + +. Add a filter for clothing. + +.. Click *Add a filter*. + +.. In the *KQL* field, enter `category.keyword : *Clothing*`. + +.. In the *Label* field, enter `Clothing`, then press Return. + +. Click *Close* ++ +[role="screenshot"] +image::images/lens_advanced_4_1.png[Median prices chart for different categories] + +[discrete] +[[add-the-moving-average]] +==== Add the moving average + +To focus on the general trends rather than on the peaks in the data, add the moving average, then add the visualization to the dashboard. + +. In the editor, click the *Median of products.price*. + +. From *Select a function*, click *Moving average*. + +. In the *Window size* field, enter `7`, then click *Close*. ++ +[role="screenshot"] +image::images/lens_advanced_4_2.png[Moving average prices chart for different categories] + +. Click *Save and return*. + +[discrete] +=== Save the dashboard + +Now that you have a complete overview of your ecommerce sales data, save the dashboard. + +. In the toolbar, click *Save*. + +. On the *Save dashboard* window, enter `Ecommerce sales data`, then click *Save*. diff --git a/docs/user/dashboard/lens-end-to-end/images/non-edited/lens_end_to_end_1.png b/docs/user/dashboard/lens-end-to-end/images/non-edited/lens_end_to_end_1.png deleted file mode 100644 index 49b917753b7ef9..00000000000000 Binary files a/docs/user/dashboard/lens-end-to-end/images/non-edited/lens_end_to_end_1.png and /dev/null differ diff --git a/docs/user/dashboard/lens-end-to-end/images/non-edited/lens_end_to_end_2.png b/docs/user/dashboard/lens-end-to-end/images/non-edited/lens_end_to_end_2.png deleted file mode 100644 index 64330de64ca782..00000000000000 Binary files a/docs/user/dashboard/lens-end-to-end/images/non-edited/lens_end_to_end_2.png and /dev/null differ diff --git a/docs/user/dashboard/lens-end-to-end/lens-end-to-end.asciidoc b/docs/user/dashboard/lens-end-to-end/lens-end-to-end.asciidoc deleted file mode 100644 index f111f602de8493..00000000000000 --- a/docs/user/dashboard/lens-end-to-end/lens-end-to-end.asciidoc +++ /dev/null @@ -1,453 +0,0 @@ -[float] -[[lens-end-to-end]] -== Tutorial: Analyze website data on a dashboard - -Most dashboards use similar types of analysis to answer key questions. In this tutorial you will base your analysis off of {kib} sample data which resembles logs from the Apache web server. - -When you're finished creating the dashboard, you'll be able to answer the following questions: - -* How many users have visited your website? -* What is the distribution of visitors by operating system? -* What is the average of bytes transfer per day? -* What is the health of your website? -* What is the traffic for your website by the hour? -* What is the percentage of small compared to large transferred files? -* What are the top social media sources of website traffic, and from what countries? - -[discrete] -[[add-the-sample-web-logs-data]] -=== Add the data and create the dashboard - -To create visualizations of the website traffic data, add the data set, then create the dashboard. - -. From the *Home* page, click *Try our sample data*. - -. From *Sample web logs*, click *Add data*. - -. Open the main menu, click *Dashboard*. - -. On the *Dashboards* page, click *Create dashboard*. - -[discrete] -[[donut-vis]] -=== View the distribution of visitors by operating system - -To determine the operating systems you should continue to support, and the importance of mobile traffic from iOS devices, -create a donut chart that displays the top operating systems that your visitors use to access your webiste. - -. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window. - -. Make sure the *kibana_sample_data_logs* index appears, and the <> is set to *Last 90 days*. - -. From the *Chart Type* dropdown, select *Donut*. - -. From the *Available fields* list, drag and drop the data fields to the *Drop a field or click to add* fields in the editor. - -.. Drag and drop *clientip* to the *Size by* field. - -.. Drag and drop *machine.os.keyword* to the *Slice by* field. -+ -[role="screenshot"] -image::images/lens_end_to_end_2_1_1.png[Donut chart with clientip and machine.os.keyword fields] - -. Change the color palette. - -.. From the editor, click *Top values of machine.os.keyword*. - -.. From the *Color palette* dropdown, select *Compability*. - -.. Click *Close*. -+ -[role="screenshot"] -image::images/lens_end_to_end_2_1.png[Donut chart with open config panel] - -. Save the visualization, then add it to the dashboard. - -.. From the toolbar, click *Save*. - -.. In the *Title* field, enter `Visitors by OS`. - -.. Select *Add to dashboard after saving*. - -.. Click *Save and return*. - -[discrete] -[[mixed-multiaxis]] -=== View the average of bytes transfer per day - -To prevent potential server failures and optimize the cost of website maintenance, create an area chart that displays the average of bytes transfer, -then add a line chart layer to compare the data to the number of visitors to your website. - -. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window. - -. Make sure the *kibana_sample_data_logs* index appears. - -. From the *Available fields* list, drag and drop *bytes* to the visualization builder. - -. To zoom in on the data you want to view, 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] - -. Change the *timestamp* interval. - -.. From the editor, click *timestamp*. - -.. Select *Customize time interval*. - -.. Change the *Minimum interval* to `1 days`. -+ -[role="screenshot"] -image::images/lens_end_to_end_3_1.png[Customize time interval] - -.. Click *Close*. - -. From the *Chart Type* dropdown, select *Area*. - -[discrete] -[[add-a-data-layer]] -==== Add the line chart layer - -To compare the average of bytes transfer to the number of users that visit your website, add a line chart layer. - -. From the editor, click *+*. -+ -[role="screenshot"] -image::images/lens_end_to_end_3_2.png[Add new layer button] - -. From the new layer editor, click the *Chart type* dropdown, then click the line chart. -+ -[role="screenshot"] -image::images/lens_end_to_end_3_3.png[Change layer type] -+ -The chart type for the visualization changes to *Mixed XY*. - -. From the *Available fields* list, drag and drop the data fields to the *Drop a field or click to add* fields in the editor. - -.. Drag and drop *timestamp* to the *Horizontal axis* field. - -.. Drag and drop *clientip* to the *Vertical axis* field. - -. Change the *timestamp* interval. - -.. From the editor, click *timestamp* in the line chart layer. - -.. Select *Customize time interval*. - -.. Change the *Minimum interval* to `1 days`. - -.. Click *Close*. - -. Change the *Unique count of clientip* label and color. - -.. From the editor, click *Unique count of clientip*. - -.. In the *Display name* field, enter `Unique visitors` in the line chart layer. - -.. In the *Series color* field, enter *#CA8EAE*. - -.. Click *Close*. - -[discrete] -[[configure-the-multiaxis-chart]] -==== Configure the y-axes - -There is a significant difference between the *timestamp per day* and *Unique visitors* data, which makes the *Unique visitors* data difficult to read. To improve the readability, -display the *Unique visitors* data along a second y-axis, then change the formatting. When functions contain multiple formats, separate axes are created by default. - -. From the editor, click *Unique visitors* in the line chart layer. - -.. For *Axis side*, click *Right*. - -.. Click *Close*. - -. From the editor, click *Average of bytes* in the area chart layer. - -.. From the *Value format* dropdown, select *Bytes (1024)*. -+ -[role="screenshot"] -image::images/lens_end_to_end_3_4.png[Multiaxis chart] - -.. Click *Close*. - -[discrete] -[[lens-legend-position]] -==== Change the legend position and save the visualization - -The visualization is done, but the legend uses a lot of space. Change the legend position to the top of the chart, then save the visualization and add it to the dashboard. - -. From the *Legend* dropdown, select the top position. -+ -[role="screenshot"] -image::images/lens_end_to_end_3_5.png[legend position] - -. Save the visualization, then add it to the dashboard. - -.. From the toolbar, click *Save*. - -.. In the *Title* field, enter `Average Bytes vs. Unique Visitors`. - -.. Select *Add to dashboard after saving*. - -.. Click *Save and return*. - -[discrete] -[[percentage-stacked-area]] -=== View the health of your website - -To detect unusual traffic, bad website links, and server errors, create a percentage stacked area chart that displays the associated response codes. - -. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window. - -. Make sure the *kibana_sample_data_logs* index appears. - -. From the *Available fields* list, drag and drop the data fields to the *Drop a field or click to add* fields in the editor. - -.. Drag and drop *Records* to the *Vertical axis* field. - -.. Drag and drop *@timestamp* to the *Horizontal axis* field. - -. From the *Chart Type* dropdown, select *Percentage bar*. - -. To remove the vertical axis label, click *Left axis*, then deselect *Show*. -+ -[role="screenshot"] -image::images/lens_end_to_end_4_3.png[Turn off axis name] - -[discrete] -[[add-the-response-code-filters]] -==== Add the response code filters - -For each response code that you want to display, create a filter. - -. From the editor, click the *Drop a field or click to add* field for *Break down by*. - -. From *Select a function*, click *Filters*. - -. Add the filter for the successful response codes. - -.. Click *All records*. - -.. In the *KQL* field, enter `response.keyword>=200 AND response.keyword<300`. - -.. In the *Label* field, enter `2XX`. -+ -[role="screenshot"] -image::images/lens_end_to_end_4_1.png[First filter in filters aggregation] - -.. Press Return. - -. Add the filter for the redirect codes. - -.. Click *Add a filter*. - -.. In the *KQL* field, enter `response.keyword>=300 AND response.keyword<400`. - -.. In the *Label* field, enter `3XX`, then press Return. - -. Add the filter for the client error codes. - -.. Click *Add a filter*. - -.. In the *KQL* field, enter `response.keyword>=400 AND response.keyword<500`. - -.. In the *Label* field, enter `4XX`, then press Return. - -. Add the filter for the server error codes. - -.. Click *Add a filter*. - -.. In the *KQL* field, enter `response.keyword>=500 AND response.keyword<600`. - -.. In the *Label* field, enter `5XX`, then press Return. - -. To change the color pallette, select *Status* from the *Color palette* dropdown. - -.. Click *Close*. - -. Save the visualization, then add it to the dashboard. - -.. From the toolbar, click *Save*. - -.. In the *Title* field, enter `Response Codes Over Time`. - -.. Select *Add to dashboard after saving*. - -.. Click *Save and return*. - -[discrete] -[[histogram]] -=== View the traffic for your website by the hour - -To find the best time to shut down your website for maintenance, create a histogram that displays the traffic for your website by the hour. - -. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window. - -. Make sure the *kibana_sample_data_logs* index appears. - -. From the *Available fields* list, drag and drop *bytes* to *Vertical axis* in the editor, then configure the options. - -.. Click *Average of bytes*. - -.. From *Select a function*, click *Sum*. - -.. In the *Display name* field, enter `Transferred bytes`. - -.. From the *Value format* dropdown, select `Bytes (1024)`. - -.. Click *Close*. - -. From the *Available fields* list, drag and drop *hour_of_day* to *Horizontal axis* in the editor, then configure the options. - -.. Click *hour_of_day*. - -.. Click and slide the *Intervals granularity* slider until the horizontal axis displays hourly intervals. -+ -[role="screenshot"] -image::images/lens_end_to_end_5_2.png[Create custom ranges] - -. Save the visualization, then add it to the dashboard. - -.. From the toolbar, click *Save*. - -.. In the *Title* field, enter `Hourly Traffic Distribution`. - -.. Select *Add to dashboard after saving*. - -.. Click *Save and return*. - -[discrete] -[[custom-ranges]] -=== View the percent of small versus large transferred files - -To determine if your users transfer more small files versus large files, create a pie chart that displays the percentage of each size. - -. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window. - -. Make sure the *kibana_sample_data_logs* index appears. - -. From the *Available fields* list, drag and drop *bytes* to *Vertical axis* in the editor, then configure the options. - -.. Click *Average of bytes*. - -.. From *Select a function*, click *Sum*. - -.. Click *Close*. - -. From the *Available fields* list, drag and drop *bytes* to *Break down by* in the editor, then specify the file size ranges. - -.. Click *bytes*. - -.. Click *Create custom ranges*, enter the following, then press Return: - -* *Ranges* — `0` -> `10240` - -* *Label* — `Below 10KB` - -.. Click *Add range*, enter the following, then press Return: - -* *Ranges* — `10240` -> `+∞` - -* *Label* — `Above 10KB` -+ -[role="screenshot"] -image::images/lens_end_to_end_6_1.png[Custom ranges configuration] - -.. From the *Value format* dropdown, select *Bytes (1024)*. - -.. Click *Close*. - -. From the *Chart Type* dropdown, select *Pie*. -+ -[role="screenshot"] -image::images/lens_end_to_end_6_2.png[Files size distribution] - -. Save the visualization, then add it to the dashboard. - -.. From the toolbar, click *Save*. - -.. In the *Title* field, enter `File size distribution`. - -.. Select *Add to dashboard after saving*. - -.. Click *Save and return*. - -[discrete] -[[treemap]] -=== View the top sources of website traffic - -To determine how users find out about your website and where your users are located, create a treemap that displays the percentage of users that -enter your website from specific social media websites, and the top countries where users are located. - -. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window. - -. Make sure the *kibana_sample_data_logs* index appears. - -. From the *Chart Type* dropdown, select *Treemap*. - -. From the *Available fields* list, drag and drop *Records* to the *Size by* field in the editor. - -. From the editor, click the *Drop a field or click to add* field for *Group by*, then create a filter for each website traffic source. - -.. From *Select a function*, click *Filters*. - -.. Click *All records*, enter the following, then press Return: - -* *KQL* — `referer : *facebook.com*` - -* *Label* — `Facebook` - -.. Click *Add a filter*, enter the following, then press Return: - -* *KQL* — `referer : *twitter.com*` - -* *Label* — `Twitter` - -.. Click *Add a filter*, enter the following, then press Return: - -* *KQL* — `NOT referer : *twitter* OR NOT referer: *facebook.com*` - -* *Label* — `Other` - -.. Click *Close*. - -[discrete] -[[add-the-countries]] -==== Add the geographic data - -To determine the top countries where users are located, add the geographic data, then save and add the visualization to the dashboard. - -Compare the top sources of website traffic data to the top three countries. - -. From the *Available fields* list, drag and drop *geo.src* to the visualization builder. - -. To change the *Group by* order, click and drag *Top values of geo.src* so that it appears first in the editor. -+ -[role="screenshot"] -image::images/lens_end_to_end_7_2.png[Treemap vis] - -. To view only the Facebook and Twitter data, remove the *Other* category. - -.. From the editor, click *Top values of geo.src*. - -.. From the *Advanced* dropdown, deselect *Group other values as "Other"*. -+ -[role="screenshot"] -image::images/lens_end_to_end_7_3.png[Group other values as Other] - -.. Click *Close*. - -. Save the visualization, then add it to the dashboard. - -.. From the toolbar, click *Save*. - -.. In the *Title* field, enter `Traffic Source For Top 3 Countries`. - -.. Select *Add to dashboard after saving*. - -.. Click *Save and return*. - -That's it! You've created a dashboard that provides you with a complete picture of your website data. - -[role="screenshot"] -image::images/lens_end_to_end_dashboard.png[Final dashboard vis] diff --git a/docs/user/dashboard/lens.asciidoc b/docs/user/dashboard/lens.asciidoc index e0a66210f78938..be84ba7fe37744 100644 --- a/docs/user/dashboard/lens.asciidoc +++ b/docs/user/dashboard/lens.asciidoc @@ -32,6 +32,38 @@ image::images/lens_fields_indexpattern.png[Lens fields list can be filtered] NOTE: The sum of the *Other* fields can equal more than 100% by a small amount. +[float] +[[drag-and-drop-keyboard-navigation]] +=== Create your visualizations faster with keyboard navigation + +Lens has a fully accessible, continuously improved drag and drop system. By using keyboard navigation instead of a mouse, you can significantly speed up your work. + +[role="screenshot"] +image::images/lens_drag_drop_1.gif[Presented Lens drag and drop] + +. Set a focus on the chosen item. Most of the draggable elements have two focus states. The inner focus state opens a panel with more detailed information or options. The outer one allows dragging an element. Tab through the page until you get the outer focus state on the chosen element: ++ +[role="screenshot"] +image::images/lens_drag_drop_2.png[Lens drag and drop focus state] + +Complete the following actions: + +. Press Space bar to start dragging an item. + +. Use Left and Right arrows to select where you want to drop the field. + +. To duplicate an operation, use Left and Right arrows to select the `Drop a field or click to add` in the same group. + ++ +[role="screenshot"] +image::images/lens_drag_drop_3.gif[Using drag and drop to reorder] + +. To reorder the fields in the group, use Up and Down arrows. + +. Press Space bar to confirm. + +. To cancel the action, press Esc. + [float] [[lens-faq]] ==== Frequently asked questions @@ -153,4 +185,3 @@ Visualizing saved searches in unsupported in *Lens*. ===== How do I change the number of suggestions? Configuring the *Suggestions* that *Lens* automatically populates is unsupported. - diff --git a/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc b/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc index c115ba56e28c3a..31b0909a71101b 100644 --- a/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc +++ b/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc @@ -4,6 +4,11 @@ You collected data from your web server, and you want to visualize and analyze the data on a dashboard. To create dashboard panels of the data, open the *Lens* visualization builder, then create the visualization panels that best display the data. +When you've completed the tutorial, you'll have a dashboard that provides you with a complete overview of your web server data. + +[role="screenshot"] +image::images/lens_end_to_end_dashboard.png[Final dashboard vis] + [discrete] [[add-the-data-and-create-the-dashboard]] === Add the data and create the dashboard @@ -54,7 +59,7 @@ image::images/lens_end_to_end_1_2_1.png[Chart Type dropdown with Metric selected [role="screenshot"] image::images/lens_end_to_end_1_3.png[Changed type and dropped clientip field] -. From the editor, click *Unique count of clientip*. +. In the editor, click *Unique count of clientip*. .. In the *Display name* field, enter `Unique visitors`. @@ -63,7 +68,7 @@ image::images/lens_end_to_end_1_3.png[Changed type and dropped clientip field] [role="screenshot"] image::images/lens_end_to_end_1_4.png[Flyout config open] -. *Save* the panel, enter `Unique visitors` in the *Title* field, then add the panel to the dashboard. +. Click *Save and return*. [discrete] [[view-the-distribution-of-visitors-by-operating-system]] @@ -87,7 +92,7 @@ image::images/lens_end_to_end_2_1_1.png[Donut chart with clientip and machine.os . Change the color palette. -.. From the editor, click *Top values of machine.os.keyword*. +.. In the editor, click *Top values of machine.os.keyword*. .. From the *Color palette* dropdown, select *Compatibility*. @@ -96,7 +101,7 @@ image::images/lens_end_to_end_2_1_1.png[Donut chart with clientip and machine.os [role="screenshot"] image::images/lens_end_to_end_2_1.png[Donut chart with open config panel] -. *Save* the panel, enter `Visitors by OS` in the *Title* field, then add the panel to the dashboard. +. Click *Save and return*. [discrete] [[mixed-multiaxis]] @@ -116,7 +121,7 @@ image::images/lens_end_to_end_3_1_1.gif[Zoom in on the data] . Change the *timestamp* interval. -.. From the editor, click *timestamp*. +.. In the editor, click *timestamp*. .. Select *Customize time interval*. @@ -133,7 +138,7 @@ image::images/lens_end_to_end_3_1.png[Customize time interval] To compare the average of bytes transfer to the number of users that visit your website, add a line chart layer. -. From the editor, click *+*. +. In the editor, click *+*. + [role="screenshot"] image::images/lens_end_to_end_3_2.png[Add new layer button] @@ -153,7 +158,7 @@ The chart type for the visualization changes to *Mixed XY*. . Change the *timestamp* interval. -.. From the editor, click *timestamp* in the line chart layer. +.. In the editor, click *timestamp* in the line chart layer. .. Select *Customize time interval*. @@ -161,7 +166,7 @@ The chart type for the visualization changes to *Mixed XY*. . Change the *Unique count of clientip* label and color. -.. From the editor, click *Unique count of clientip*. +.. In the editor, click *Unique count of clientip*. .. In the *Display name* field, enter `Unique visitors` in the line chart layer. @@ -174,7 +179,7 @@ The chart type for the visualization changes to *Mixed XY*. There is a significant difference between the *timestamp per day* and *Unique visitors* data, which makes the *Unique visitors* data difficult to read. To improve the readability, display the *Unique visitors* data along a second y-axis, then change the formatting. When functions contain multiple formats, separate axes are created by default. -. From the editor, click *Unique visitors* in the line chart layer. +. In the editor, click *Unique visitors* in the line chart layer. . For *Axis side*, click *Right*, then click *Close*. @@ -182,7 +187,7 @@ display the *Unique visitors* data along a second y-axis, then change the format [[change-the-visualization-type]] ==== Change the visualization type -. From the editor, click *Average of bytes* in the area chart layer. +. In the editor, click *Average of bytes* in the area chart layer. . From the *Value format* dropdown, select *Bytes (1024)*, then click *Close*. + @@ -200,7 +205,7 @@ The visualization is done, but the legend uses a lot of space. Change the legend [role="screenshot"] image::images/lens_end_to_end_3_5.png[legend position] -. *Save* the panel, enter `Average Bytes vs. Unique Visitors` in the *Title* field, then add the panel to the dashboard. +. Click *Save and return*. [discrete] [[percentage-stacked-area]] @@ -229,7 +234,7 @@ image::images/lens_end_to_end_4_3.png[Turn off axis name] For each response code that you want to display, create a filter. -. From the editor, click the *Drop a field or click to add* field for *Break down by*. +. In the editor, click the *Drop a field or click to add* field for *Break down by*. . From *Select a function*, click *Filters*. @@ -270,7 +275,7 @@ image::images/lens_end_to_end_4_1.png[First filter in filters aggregation] . To change the color palette, select *Status* from the *Color palette* dropdown, then click *Close*. -. *Save* the panel, enter `Response Codes Over Time` in the *Title* field, then add the panel to the dashboard. +. Click *Save and return*. [discrete] [[histogram]] @@ -299,7 +304,7 @@ To find the best time to shut down your website for maintenance, create a histog [role="screenshot"] image::images/lens_end_to_end_5_2.png[Create custom ranges] -. *Save* the panel, enter `Hourly Traffic Distribution` in the *Title* field, then add the panel to the dashboard. +. Click *Save and return*. [discrete] [[custom-ranges]] @@ -341,7 +346,7 @@ image::images/lens_end_to_end_6_1.png[Custom ranges configuration] [role="screenshot"] image::images/lens_end_to_end_6_2.png[Files size distribution] -. *Save* the panel, enter `File size distribution` in the *Title* field, then add the panel to the dashboard. +. Click *Save and return*. [discrete] [[treemap]] @@ -356,7 +361,7 @@ enter your website from specific social media websites, and the top countries wh . From the *Available fields* list, drag and drop *Records* to the *Size by* field in the editor. -. From 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 the *Drop a field or click to add* field for *Group by*, then create a filter for each website traffic source. .. From *Select a function*, click *Filters*. @@ -397,19 +402,20 @@ image::images/lens_end_to_end_7_2.png[Treemap vis] . To view only the Facebook and Twitter data, remove the *Other* category. -.. From the editor, click *Top values of geo.src*. +.. In the editor, click *Top values of geo.src*. .. From the *Advanced* dropdown, deselect *Group other values as "Other"*, then click *Close*. + [role="screenshot"] image::images/lens_end_to_end_7_3.png[Group other values as Other] -. *Save* the panel, enter `Traffic Source For Top 3 Countries` in the *Title* field, then add the panel to the dashboard. +. Click *Save and return*. -[float] -== What's next? +[discrete] +=== Save the dashboard -Your dashboard is complete and provides you with an overall picture of the data from your web server. +Now that you have a complete overview of your web server data, save the dashboard. -[role="screenshot"] -image::images/lens_end_to_end_dashboard.png[Final dashboard vis] \ No newline at end of file +. In the toolbar, click *Save*. + +. On the *Save dashboard* window, enter `Web server data`, then click *Save*.