diff --git a/docs/management/numeral.asciidoc b/docs/management/numeral.asciidoc index 79ce9fdbd1a7..893873eb1075 100644 --- a/docs/management/numeral.asciidoc +++ b/docs/management/numeral.asciidoc @@ -10,8 +10,8 @@ Numeral formatting patterns are used in multiple places in {kib}, including: * <> * <> -* <> -* <> +* <> +* <> The simplest pattern format is `0`, and the default {kib} pattern is `0,0.[000]`. The numeral pattern syntax expresses: diff --git a/docs/redirects.asciidoc b/docs/redirects.asciidoc index f2a20e5bba9e..2d8a91eec0d5 100644 --- a/docs/redirects.asciidoc +++ b/docs/redirects.asciidoc @@ -179,11 +179,6 @@ This content has moved. See <>. This content has moved. See <>. -[role="exclude",id="lens"] -== Lens - -This content has moved. See <>. - [role="exclude",id="known-plugins"] == Known plugins @@ -257,7 +252,7 @@ This page has been moved. Refer to <> [[heatmap-chart]] === Heatmap Chart -This page has been moved. Refer to <>. +This page has been moved. Refer to <>. [float] [[interface-overview]] diff --git a/docs/user/canvas.asciidoc b/docs/user/canvas.asciidoc index e5ac44a4e540..1face015f1f7 100644 --- a/docs/user/canvas.asciidoc +++ b/docs/user/canvas.asciidoc @@ -126,7 +126,7 @@ image::images/canvas-element-select.gif[Canvas elements] * *{es} documents* — Access your data in {es} without using aggregations. To use, select an index and fields, and optionally enter a query using the <>. Use the *{es} documents* data source when you have low volume datasets, to view raw documents, or to plot exact, non-aggregated values on a chart. -* *Timelion* — Access your time series data using <> queries. To use *Timelion* queries, you can enter a query using the <>. +* *Timelion* — Access your time series data using <> queries. To use *Timelion* queries, you can enter a query using the <>. + Each element can display a different data source, and pages and workpads often contain multiple data sources. diff --git a/docs/user/dashboard/advanced-editors.asciidoc b/docs/user/dashboard/advanced-editors.asciidoc deleted file mode 100644 index e2e32c8373f5..000000000000 --- a/docs/user/dashboard/advanced-editors.asciidoc +++ /dev/null @@ -1,65 +0,0 @@ -[[add-panels-with-advanced-editors]] -== Create panels with the advanced editors - -{kib} provides you with three advanced editors that you can use to manually create dashboard panels. - -[float] -[[tsvb-advanced-editor]] -=== TSVB - -*TSVB* is a time series data visualization editor that allows you to use the full power of the {es} aggregation framework. - -With *TSVB*, you can: - -* Combine an infinite number of <> to display your data. -* Annotate time series data with timestamped events from an {es} index. -* View the data in several types of visualizations, including charts, data tables, and markdown panels. -* Display multiple <> in each visualization. -* Customize the data with labels and colors. - -image::images/tsvb.png[TSVB UI] - -[float] -[[vega-advanced-editor]] -=== Custom visualizations - -*Vega* and *Vega-Lite* are visualization grammars that are integrated into {kib} for custom visualizations. - -* *Vega-Lite* — A high-level grammar for rapid analysis - -* *Vega* — A declarative language with support for interactivity - -*Vega* and *Vega-Lite* panels can display one or more data sources, including {es}, Elastic Map Service, -URL, or static data, and support <> that allow you to embed the panels on your dashboard and add interactive tools. - -Use *Vega* or *Vega-Lite* when you want to create visualizations with: - -* Aggregations that use `nested` or `parent/child` mapping -* Aggregations without an index pattern -* Queries that use custom time filters -* Complex calculations -* Extracted data from _source instead of aggregations -* Scatter charts, sankey charts, and custom maps -* An unsupported visual theme - -These grammars have some limitations: they do not support tables, and can't run queries conditionally. - -image::images/vega.png[Vega UI] - -For detailed *Vega* and *Vega-Lite* information and examples, refer to <>. - -[float] -[[timelion-advanced-editor]] -=== Timelion - -*Timelion* is driven by a simple expression language that you use to: - -* Retrieve time series data from one or more indices -* Perform math across two or more time series -* Visualize the results - -image:dashboard/images/timelion.png[Timelion] - -include::tsvb.asciidoc[] -include::vega.asciidoc[] -include::timelion.asciidoc[] \ No newline at end of file diff --git a/docs/user/dashboard/aggregation-based.asciidoc b/docs/user/dashboard/aggregation-based.asciidoc index b086214c87ed..49c092f8baa4 100644 --- a/docs/user/dashboard/aggregation-based.asciidoc +++ b/docs/user/dashboard/aggregation-based.asciidoc @@ -1,32 +1,14 @@ [[add-aggregation-based-visualization-panels]] -== Create aggregation-based visualization panels +=== Aggregation-based Aggregation-based visualizations are the core {kib} panels, and are not optimized -for a specific use case. If you are new to {kib}, <> is recommended as a -simpler way to get started. - -The main features that these panel types have compared to other {kib} panel types are: - -* Support for heat map, tag cloud, gauge, and goal chart types -* Support for split charts at up to 3 levels of aggregation, more than *Lens* and *TSVB* -* Time series data is not required -* Ability to use a <> as an input -* Data table can be sorted, also supports summary row and percentage column features -* Can assign specific colors to series -* Ability for plugin authors to extend the features - -These panel types also have some limitations: - -* Not as simple as *Lens* -* Limited styling options -* No support for math -* No support for multiple indices +for a specific use case. [float] -[[types-of-visualization-panels]] -=== Types of aggregation-based panels +[[types-of-visualizations]] +==== Types of aggregation-based visualizations -{kib} supports the following types of aggregation-based panels. +{kib} supports the following types of aggregation-based visualizations. [cols="50, 50"] |=== @@ -106,13 +88,13 @@ create visual art for a specific topic. [float] [[create-aggregation-based-panel]] -=== Create an aggregation-based panel +==== Create an aggregation-based visualization panel -Choose the type of panel you want to create, then use the editor to configure the options. Each panel type supports different options. +Choose the type of visualization you want to create, then use the editor to configure the options. . From the dashboard, click *Create panel*, then click *Aggregation based* on the *New visualization* window. -.. Click the type of panel you want to create. +.. Click the type of visualization you want to create. .. Click the data source you want to visualize. @@ -132,13 +114,13 @@ image:images/aggregation-based-color-picker.png[Color picker] [float] [[try-it-aggregation-based-panel]] -=== Try it: Create an aggregation-based bar chart +==== Try it: Create an aggregation-based bar chart You collected data from your web server, and you want to visualize and analyze the data on a dashboard. To create a dashboard panel of the data, create a bar chart that displays the top five log traffic sources for every three hours. [float] -==== 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 bar chart, then create the dashboard. @@ -151,7 +133,7 @@ Add the sample web logs data that you'll use to create the bar chart, then creat . On the *Dashboards* page, click *Create dashboard*. [float] -==== Open and set up the aggregation-based bar chart +===== Open and set up the aggregation-based bar chart Open the bar chart visualization builder and change the time range. @@ -165,7 +147,7 @@ Open the bar chart visualization builder and change the time range. [float] [[tutorial-configure-the-bar-chart]] -==== Create the bar chart +===== Create the bar chart To create the bar chart, add a <>, then add the terms sub-aggregation to display the top values. @@ -196,7 +178,7 @@ TIP: Aggregation-based panels support a maximum of three *Split series*. image:images/bar-chart-tutorial-2.png[Bar chart with sample logs data] [float] -==== Save the panel +===== Save the panel Save and add the visualization panel to the dashboard. diff --git a/docs/user/dashboard/create-panels-with-editors.asciidoc b/docs/user/dashboard/create-panels-with-editors.asciidoc new file mode 100644 index 000000000000..8e047819fd1c --- /dev/null +++ b/docs/user/dashboard/create-panels-with-editors.asciidoc @@ -0,0 +1,131 @@ +[[create-panels-with-editors]] +== Create panels with editors + +{kib} provides several editors that you can use to create dashboard panels. + +[cols="2"] +|=== + +| <> +| Create visualizations with the drag and drop editor. *Lens* is recommended for most users. + +| <> +| Create visualizations with your geographical data. + +| <> +| Create visualizations with your time series data. + +| <> +| Create custom visualizations with the *Vega* and *Vega-Lite* grammars. + +| <> +| Build most visualization types using {es} <>. + +| <> +| Create visualizations with your time series data using a simple expression language. + +|=== + +[float] +[[lens-editor]] +=== Lens + +*Lens* is the drag and drop editor that creates visualizations of your data. + +With *Lens*, you can: + +* Use the automatically generated suggestions to change the visualization type. +* Create visualizations with multiple layers and indices. +* Change the aggregation and labels to customize the data. + +[role="screenshot"] +image:dashboard/images/lens_advanced_1_1.png[Lens] + +[float] +[[tsvb-editor]] +=== TSVB + +*TSVB* is a time series data visualization editor that allows you to use the full power of the {es} aggregation framework. + +With *TSVB*, you can: + +* Combine an infinite number of <> to display your data. +* Annotate time series data with timestamped events from an {es} index. +* View the data in several types of visualizations, including charts, data tables, and markdown panels. +* Display multiple <> in each visualization. +* Customize the data with labels and colors. + +[role="screenshot"] +image::images/tsvb.png[TSVB UI] + +[float] +[[custom-visualizations]] +=== Custom visualizations + +*Vega* and *Vega-Lite* are visualization grammars that are integrated into {kib} for custom visualizations. + +* *Vega-Lite* — A high-level grammar for rapid analysis. + +* *Vega* — A declarative language with support for interactivity. + +*Vega* and *Vega-Lite* panels can display one or more data sources, including {es}, Elastic Map Service, +URL, or static data, and support <> that allow you to embed the panels on your dashboard and add interactive tools. + +Use *Vega* or *Vega-Lite* when you want to create visualizations with: + +* Aggregations that use `nested` or `parent/child` mapping +* Aggregations without an index pattern +* Queries that use custom time filters +* Complex calculations +* Extracted data from _source instead of aggregations +* Scatter charts, sankey charts, and custom maps +* An unsupported visual theme + +These grammars have some limitations: they do not support tables, and can't run queries conditionally. + +[role="screenshot"] +image::images/vega.png[Vega UI] + +For detailed *Vega* and *Vega-Lite* information and examples, refer to <>. + +[float] +[[aggregation-based]] +=== Aggregation-based + +With aggregation-based visualizations, you can: + +* Create heat map, tag cloud, gauge, and goal visualizations +* Split charts up to three aggregation levels, which is more than *Lens* and *TSVB* +* Time series data is not required +* Use a <> as an input +* Sort data tables and use the summary row and percentage column features +* Assign colors to series +* Extend features with plugins + +[role="screenshot"] +image:dashboard/images/aggregation_based.png[Aggregation-based editor] + +Aggregation-based visualizations include the following limitations: + +* Limited styling options +* Math is unsupported +* Multiple indices is unsupported + +[float] +[[timelion-editor]] +=== Timelion + +*Timelion* is driven by a simple expression language that you use to: + +* Retrieve time series data from one or more indices +* Perform math across two or more time series +* Visualize the results + +[role="screenshot"] +image:dashboard/images/timelion.png[Timelion] + +include::lens.asciidoc[] +include::tsvb.asciidoc[] +include::vega.asciidoc[] +include::aggregation-based.asciidoc[] +include::timelion.asciidoc[] \ No newline at end of file diff --git a/docs/user/dashboard/dashboard.asciidoc b/docs/user/dashboard/dashboard.asciidoc index 1752f067801b..89fa564b0ac7 100644 --- a/docs/user/dashboard/dashboard.asciidoc +++ b/docs/user/dashboard/dashboard.asciidoc @@ -12,25 +12,18 @@ then compare the panels side-by-side to identify the patterns and connections in [role="screenshot"] image:images/Dashboard_example.png[Example dashboard] -[[tsvb]] - Dashboards support many types of panels, and provide several editors that you can use to create panels. [cols="2"] |=== -| <> -| The drag and drop editor that creates visualizations of your data. *Lens* is recommended for most users. +| <> +| Use the *Lens*, *TSVB*, *Vega*, and *Timelion* editors to help you create visualizations of your data, or create aggregation-based visualizations using {es} <>. +*Lens* is recommended for most users. | <> | Create beautiful displays of your geographical data. -| <> -| Visualize time series data with *TSVB* or *Timelion*, or create a custom visualization using *Vega* or *Vega-Lite*. - -| <> -| Build most visualization types using {es} <>. - | <> | Add context to your panels with <>, or add dynamic filters with <>. @@ -152,6 +145,8 @@ Add a panel that displays the results from machine learning anomaly detection jo . On the *Add from library* flyout, click *Create new*, then select *ML Anomaly Swim Lane*. +[[tsvb]] + [float] [[arrange-panels]] [[moving-containers]] @@ -332,11 +327,16 @@ for *Lens* panels. [role="xpack"] To download *Lens* panel data in a CSV file: -Open the *Lens* panel menu, then select *More > Download as CSV*. +. Open the *Lens* panel menu. +. Select *More > Download as CSV*. ++ [role="screenshot"] image::images/download_csv_context_menu.png[Download as CSV from panel context menu] +Each layer produces a single CSV file with columns. +When you download multiple layers, the file names combine the visualization and layer index names. + To download all other panel data in a CSV file: . Open the panel menu, then select *Inspect*. @@ -385,11 +385,11 @@ log in using their {kib} credentials, via reverse proxy, or enable <>. It is important to export dashboards with all references needed. -- -include::lens.asciidoc[] +include::tutorial-create-a-dashboard-of-lens-panels.asciidoc[] -include::advanced-editors.asciidoc[] +include::lens-advanced.asciidoc[] -include::aggregation-based.asciidoc[] +include::create-panels-with-editors.asciidoc[] include::enhance-dashboards.asciidoc[] diff --git a/docs/user/dashboard/images/aggregation_based.png b/docs/user/dashboard/images/aggregation_based.png new file mode 100644 index 000000000000..0e34dbf66581 Binary files /dev/null and b/docs/user/dashboard/images/aggregation_based.png differ diff --git a/docs/user/dashboard/images/lens.png b/docs/user/dashboard/images/lens.png new file mode 100644 index 000000000000..a78af1414df7 Binary files /dev/null and b/docs/user/dashboard/images/lens.png differ 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 000000000000..9d67f5cc691f 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 000000000000..8b5fe130ce7b 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 000000000000..bc5d1f67be46 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 000000000000..5090f0d3b284 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 000000000000..f4d9ca488782 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 000000000000..820bc3bd4dfa 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 000000000000..3124dd1de065 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 000000000000..5fdf58eb2fc8 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 000000000000..4d52a23cc2cf 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 000000000000..20da2ed706df 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 000000000000..1d88bcd238ca 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 000000000000..43c8db213d48 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 000000000000..4b3e98910e7b 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 000000000000..19963d87c8e1 Binary files /dev/null and b/docs/user/dashboard/images/lens_advanced_result.png differ diff --git a/docs/user/dashboard/images/lens_area_percentage.png b/docs/user/dashboard/images/lens_area_percentage.png new file mode 100644 index 000000000000..e682dbb24c05 Binary files /dev/null and b/docs/user/dashboard/images/lens_area_percentage.png differ diff --git a/docs/user/dashboard/images/lens_bucketed_aggregation_advanced_dropdown.png b/docs/user/dashboard/images/lens_bucketed_aggregation_advanced_dropdown.png new file mode 100644 index 000000000000..f4616905ad34 Binary files /dev/null and b/docs/user/dashboard/images/lens_bucketed_aggregation_advanced_dropdown.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 22939467daa1..000000000000 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 000000000000..e2fc30fc7cae 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 000000000000..3462e26026d2 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 000000000000..4c3c35ce58c9 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 000000000000..39211300301b Binary files /dev/null and b/docs/user/dashboard/images/lens_drag_drop_3.gif differ diff --git a/docs/user/dashboard/images/lens_fields_indexpattern.png b/docs/user/dashboard/images/lens_fields_indexpattern.png new file mode 100644 index 000000000000..87804fd06020 Binary files /dev/null and b/docs/user/dashboard/images/lens_fields_indexpattern.png differ diff --git a/docs/user/dashboard/images/lens_ip_mixed_sorting.png b/docs/user/dashboard/images/lens_ip_mixed_sorting.png new file mode 100644 index 000000000000..b10d77b72358 Binary files /dev/null and b/docs/user/dashboard/images/lens_ip_mixed_sorting.png differ diff --git a/docs/user/dashboard/images/lens_ipv4_sorting.png b/docs/user/dashboard/images/lens_ipv4_sorting.png new file mode 100644 index 000000000000..cec8c458d1f3 Binary files /dev/null and b/docs/user/dashboard/images/lens_ipv4_sorting.png differ diff --git a/docs/user/dashboard/images/lens_value_labels_partition_toggle.png b/docs/user/dashboard/images/lens_value_labels_partition_toggle.png new file mode 100644 index 000000000000..82ee7b1b7eed Binary files /dev/null and b/docs/user/dashboard/images/lens_value_labels_partition_toggle.png differ diff --git a/docs/user/dashboard/images/lens_value_labels_xychart_toggle.png b/docs/user/dashboard/images/lens_value_labels_xychart_toggle.png new file mode 100644 index 000000000000..8cf5feb5712a Binary files /dev/null and b/docs/user/dashboard/images/lens_value_labels_xychart_toggle.png differ diff --git a/docs/user/dashboard/lens-advanced.asciidoc b/docs/user/dashboard/lens-advanced.asciidoc new file mode 100644 index 000000000000..6b090f6017f5 --- /dev/null +++ b/docs/user/dashboard/lens-advanced.asciidoc @@ -0,0 +1,259 @@ +[[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-advanced]] +=== 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-advanced]] +=== 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. + +[discrete] +[[view-the-number-of-transactions-per-day]] +=== View the number of transactions per hour + +To determine the number of orders made every hour, create a bar chart, then add the chart 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. + +.. In the editor, click *Count of Records*. + +.. In the *Display name* field, enter `Number of orders`. + +.. Click *Add advanced options > Normalize by unit*. + +.. From the *Normalize by unit* dropdown, select *per 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 every 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"`, then press Return. ++ +The <> displays all documents where `day_of_week` matches `Saturday` or `Sunday`. ++ +[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-advanced]] +=== 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-advanced]] +=== 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 49b917753b7e..000000000000 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 64330de64ca7..000000000000 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.asciidoc b/docs/user/dashboard/lens.asciidoc index ca651ed16189..58476bcae87d 100644 --- a/docs/user/dashboard/lens.asciidoc +++ b/docs/user/dashboard/lens.asciidoc @@ -1,436 +1,222 @@ -[[create-a-dashboard-of-panels-with-web-server-data]] -== Tutorial: Create a dashboard of panels with web server data +[[lens]] +=== Lens -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. +To create visualizations with *Lens*, you drag and drop data fields onto the visualization builder, +then *Lens* uses heuristics to apply each field. -[discrete] -[[add-the-data-and-create-the-dashboard]] -=== Add the data and create the dashboard - -To create visualizations of the data from the web server, add the data set, then create the dashboard. - -. From the {kib} *Home* page, click *Try our sample data*. - -. From *Sample web logs*, click *Add data*. - -. Open the main menu, click *Dashboard*. - -. Click *Create dashboard*. +[role="screenshot"] +image:dashboard/images/lens.png[Lens] [float] -[[open-and-set-up-lens]] -=== Open and set up Lens +[[lens-required-choices]] +==== Open and set up Lens -With *Lens*, you identify the data fields you want to visualize, drag and drop the fields, then watch as -*Lens* uses heuristics to apply the fields and create a visualization for you. +Open *Lens*, then explore the fields in your data. The list of fields are determined by the index pattern and time filter. -. From the dashboard, click *Create panel*. +. On 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_logs* index appears. +. <>. + +. To view the fields in the a different index pattern, click the index pattern, then select a different index pattern from the dropdown. + +. Scan through the list of fields to see what’s in your data. + -The list of fields are dependent on the <>, <>, and field filters. +TIP: For sparse datasets, *Empty fields* can contain data, which you can use to create visualizations. + +. To filter the data fields, use the following options: + +* Enter the field name in the *Search field names* field. + +* Click *Field by type*, then select the filter. To show all fields in the index pattern, deselect *Only show fields with data*. [float] [[view-the-data-summaries]] -=== View the data summaries +===== View the data summaries -For each field, *Lens* shows a summary depending on the type of data. Date fields show the time distribution, string fields show the top 10 values, -and numeric fields show a detailed summary with the top 10 values and a value distribution. +For each field, *Lens* displays a summary depending on the type of data. To analyze the fields, *Lens* uses a sample of 5,000 documents. +Each summary displays the percentage of sampled documents over all available documents. -To view the data summary for a field, click *i* next to the field. +To view a data summary, click *i* next to the field. [role="screenshot"] image::images/lens_data_info_documents.png[Data summary analyzed documents] -*Lens* uses a sample of 5,000 documents to perform the field analysis. The bottom line of the summary shows the percentage of sampled documents over all available documents. +Each data type display the following summaries: -When *Lens* presents the top 10 values distribution, it also shows the percentage of *Other* values. For array value fields, the percentage distribution considers each value in the array as separate. +* *Date* — Displays the time distribution. -[role="screenshot"] -image::images/lens_data_info.png[Data summary window with Other] +* *String* — Displays the top 10 values. -NOTE: The sum of all the *Other* fields can equal more than 100% by a small amount. +* *Numeric* — Displays the top 10 values and a value distribution. When *Lens* displays the top 10 values distribution, the percentage of *Other* values is also displayed. +For array value fields, the percentage distribution considers each value in the array as separate. -[discrete] -[[view-the-number-of-website-visitors]] -=== View the number of website visitors - -To determine how many users have visited your website within the last 90 days, create a metric visualization, then add it to the dashboard. - -. Set the <> to *Last 90 days*. - -. From the *Chart Type* dropdown, select *Metric*. -+ -[role="screenshot"] -image::images/lens_end_to_end_1_2_1.png[Chart Type dropdown with Metric selected] - -. From the *Available fields* list, drag and drop *clientip* to the visualization builder. -+ -[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 *Display name* field, enter `Unique visitors`. - -.. Click *Close*. -+ -[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. - -[discrete] -[[view-the-distribution-of-visitors-by-operating-system]] -=== 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 used to access your website within the last 90 days. - -. Open *Lens*, then set the <> 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 *Compatibility*. - -.. Click *Close*. -+ -[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. - -[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. To compare -the data to the number of visitors to your website, add a line chart layer. - -. Open *Lens*. - -. 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`, then click *Close*. -+ -[role="screenshot"] -image::images/lens_end_to_end_3_1.png[Customize time interval] - -. 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`, then 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*, then 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*, then click *Close*. +TIP: *Other* can equal more than 100% by a small amount. [float] -[[change-the-visualization-type]] -==== Change the visualization type +[[create-the-visualization-panel]] +==== Create the visualization panel -. From the editor, click *Average of bytes* in the area chart layer. +Drag and drop the fields on to the visualization builder, then -. From the *Value format* dropdown, select *Bytes (1024)*, then click *Close*. +. Drag and drop the fields to the visualization builder. + +. To change the visualization type, use the following options: + +* Click the *Suggestions*. + +* From the *Chart Type* dropdown, click the visualization. + +. To configure the data, use the editor, then click *Close*. + +. To configure the visualization, use the dropdown menus. + [role="screenshot"] -image::images/lens_end_to_end_3_4.png[Multiaxis chart] - -[discrete] -[[lens-legend-position]] -==== Change the legend position - -The visualization is done, but the legend uses a lot of space. Change the legend position to the top of the chart. - -. From the *Legend* dropdown, select the top position. -+ -[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. - -[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. - -. Open *Lens*. - -. 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`, then press Return. -+ -[role="screenshot"] -image::images/lens_end_to_end_4_1.png[First filter in filters aggregation] - -. 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 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. - -[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. - -. Open *Lens*. - -. 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)`, then 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 panel, enter `Hourly Traffic Distribution` in the *Title* field, then add the panel to the dashboard. - -[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. - -. Open *Lens*. - -. 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*, then 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)*, then 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 panel, enter `File size distribution` in the *Title* field, then add the panel to the dashboard. - -[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. - -. Open *Lens*. - -. 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. - -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"*, 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. +image::images/lens_value_labels_xychart_toggle.png[Lens Bar chart value labels menu] [float] -== What's next? +[[drag-and-drop-keyboard-navigation]] +===== Create visualization panels with keyboard navigation -Your dashboard is complete and provides you with an overall picture of the data from your web server. +*Lens* has a fully accessible, continuously improved drag and drop system, which allows you to use a keyboard instead of a mouse. [role="screenshot"] -image::images/lens_end_to_end_dashboard.png[Final dashboard vis] \ No newline at end of file +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 detailed information or options. +The outer focus state allows you to drag an item. Tab through the page until you get the outer focus state on the chosen item: ++ +[role="screenshot"] +image::images/lens_drag_drop_2.png[Lens drag and drop focus state] + +. Complete the following actions: + +* To start dragging an item, press Space bar. + +* To select where you want to drop the item, use the Left and Right arrows. + +* To reorder the fields in the group, use Up and Down arrows. + +* To duplicate an operation, use the 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] + +. Press Space bar to confirm, or to cancel, press Esc. + +[float] +[[lens-faq]] +==== Frequently asked questions + +For the answers to common *Lens* questions, review the following. + +[float] +[[kql-]] +===== When should I use the Filter function instead of KQL filters? + +The easiest way to apply KQL filters is to use <>, but you can also use the *Filters* function in the following scenarios: + +* When you want to apply more than one KQL filter to the visualization. + +* When you want to apply the KQL filter to a single layer, which allows you to visualize filtered and unfiltered data. + +[float] +[[when-should-i-normalize-the-data-by-unit-or-use-a-custom-interval]] +===== When should I normalize the data by unit or use a custom interval? + +* *Normalize by unit* — Calculates the average for the specified interval. When you normalize the data by unit, the data appears less granular, but *Lens* is able to calculate the data faster. + +* *Customize time interval* — Creates a bucket for each specified interval. When you customize the time interval, you can use a large time range, but *Lens* calculates the data slower. + +To normalize the interval: + +. In the editor, click a field. + +. Click *Add advanced options > Normalize by unit*. + +. From the *Normalize by unit* dropdown, select an option, then click *Close*. + +To create a custom interval: + +. In the editor, click a field. + +. Select *Customize time interval*. + +. Change the *Minimum interval*, then click *Close*. + +[float] +[[can-i-show-value-labels-for-my-chart]] +===== How do I display value labels? + +A subset of *Lens* visualizations support value labels. + +* *Bar* and *Horizontal Bar* ++ +[role="screenshot"] +image::images/lens_value_labels_xychart_toggle.png[Lens Bar chart value labels menu] + +* *Pie*, *Donut*, and *Treemap* ++ +[role="screenshot"] +image::images/lens_value_labels_partition_toggle.png[Lens Pie chart value labels menu] + +[float] +[[what-is-the-other-category]] +===== What data is categorized as Other? + +The *Other* category contains all of the documents that do not match the specified criteria or filters. +Use *Other* when you want to compare a value, or multiple values, to a whole. +By default, *Group other values as "Other"* is enabled when you select the *Top values* function. + +To disable *Group other values as "Other"*: + +. In the editor, click *Advanced*. + +. Deselect *Group other values as "Other"*. + +[float] +[[how-can-i-include-documents-without-the-field-in-the-operation]] +===== How can I include documents without the field? + +By default, *Lens* retrieves only the documents from the specified field. +For bucket aggregations, such as *Top values*, you can choose to include documents that do not contain the specified field, +which is helpful when you want to compare to the whole documentation set. + +. In the editor, click *Advanced*. + +. Select *Include documents without this field*. ++ +[role="screenshot"] +image::images/lens_bucketed_aggregation_advanced_dropdown.png[Lens Advanced options for bucketed aggregations] + +[float] +[[is-it-possible-to-select-color-for-specific-bar-or-point]] +===== How do I change the color for a single data point? + +*Lens* provides you with color pallettes that you can apply to the entire visualization, but you are unable to change the color for a single data point, such as a bar or line. + +[float] +[[can-i-sort-by-multiple-columns]] +===== How do I sort by multiple columns? + +Multiple column sorting is unsupported in *Lens*, but is supported in *Discover*. For information on how to sort multiple columns in *Discover*, +refer to <>. + +[float] +[[is-it-possible-to-sort-dimensions-in-a-chart]] +===== How do I sort the dimensions in a chart? + +Sorting dimensions in visualizations is unsupported in *Lens*. + +[float] +[[is-it-possible-to-use-saved-serches-in-lens]] +===== How do I visualize saved searches? + +Visualizing saved searches in unsupported in *Lens*. + +[float] +[[is-it-possible-to-decrease-or-increase-the-number-of-suggestions]] +===== How do I change the number of suggestions? + +Configuring the *Suggestions* that *Lens* automatically populates is unsupported. diff --git a/docs/user/dashboard/timelion.asciidoc b/docs/user/dashboard/timelion.asciidoc index f785f147d04e..941f78168ecf 100644 --- a/docs/user/dashboard/timelion.asciidoc +++ b/docs/user/dashboard/timelion.asciidoc @@ -1,4 +1,4 @@ -[[create-panels-with-timelion]] +[[timelion]] === Timelion Instead of using a visual editor to create charts, you define a graph by chaining functions together, using the *Timelion*-specific syntax. diff --git a/docs/user/dashboard/tsvb.asciidoc b/docs/user/dashboard/tsvb.asciidoc index 0fa0b00ad040..f94048a836a1 100644 --- a/docs/user/dashboard/tsvb.asciidoc +++ b/docs/user/dashboard/tsvb.asciidoc @@ -1,4 +1,4 @@ -[[TSVB]] +[[tsvb]] === TSVB *TSVB* enables you to visualize the data from multiple data series, supports <> or <>. +Performing math across data series is unsupported in *TSVB*. To calculate the difference between two data series, use <> or <>. [float] ===== How do I compare the current versus previous month? @@ -153,7 +153,7 @@ The ability to calculate a month over month change is not fully supported in *TS time filter is set to 3 months or more _and_ the *Interval* is `1m`. Use the *Derivative* to get the absolute monthly change. To convert to a percent, add the *Math* function with the `params.current / (params.current - params.derivative)` formula, then select *Percent* from the *Data Formatter* dropdown. -For other types of month over month calculations, use <> or <>. +For other types of month over month calculations, use <> or <>. [float] ===== How do I calculate the duration between the start and end of an event? diff --git a/docs/user/dashboard/lens-end-to-end/lens-end-to-end.asciidoc b/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc similarity index 61% rename from docs/user/dashboard/lens-end-to-end/lens-end-to-end.asciidoc rename to docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc index f111f602de84..22483b280184 100644 --- a/docs/user/dashboard/lens-end-to-end/lens-end-to-end.asciidoc +++ b/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc @@ -1,43 +1,81 @@ -[float] -[[lens-end-to-end]] -== Tutorial: Analyze website data on a dashboard +[[create-a-dashboard-of-panels-with-web-server-data]] +== Tutorial: Create a dashboard of panels with web server data -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. +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're finished creating the dashboard, you'll be able to answer the following questions: +When you've completed the tutorial, you'll have a dashboard that provides you with a complete overview of your web server data. -* 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? +[role="screenshot"] +image::images/lens_end_to_end_dashboard.png[Final dashboard vis] [discrete] -[[add-the-sample-web-logs-data]] +[[add-the-data-and-create-the-dashboard]] === Add the data and create the dashboard -To create visualizations of the website traffic data, add the data set, then create the dashboard. +To create visualizations of the data from the web server, add the data set, then create the dashboard. -. From the *Home* page, click *Try our sample data*. +. From the {kib} *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*. +. Click *Create dashboard*. + +[float] +[[open-and-set-up-lens]] +=== Open and set up Lens + +With *Lens*, you identify the data fields you want to visualize, drag and drop the fields, then watch as +*Lens* uses heuristics to apply the fields and create a visualization for you. + +. 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_logs* index appears. [discrete] -[[donut-vis]] +[[view-the-number-of-website-visitors]] +=== View the number of website visitors + +To determine how many users have visited your website within the last 90 days, create a metric visualization, then add it to the dashboard. + +. Set the <> to *Last 90 days*. + +. From the *Chart Type* dropdown, select *Metric*. ++ +[role="screenshot"] +image::images/lens_end_to_end_1_2_1.png[Chart Type dropdown with Metric selected] + +. From the *Available fields* list, drag and drop *clientip* to the visualization builder. ++ +[role="screenshot"] +image::images/lens_end_to_end_1_3.png[Changed type and dropped clientip field] + +. In the editor, click *Unique count of clientip*. + +.. In the *Display name* field, enter `Unique visitors`. + +.. Click *Close*. ++ +[role="screenshot"] +image::images/lens_end_to_end_1_4.png[Flyout config open] + +. Click *Save and return*. + +[discrete] +[[view-the-distribution-of-visitors-by-operating-system]] === 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. +create a donut chart that displays the top operating systems that your visitors used to access your website within the last 90 days. -. 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*. +. Open *Lens*, then set the <> to *Last 90 days*. . From the *Chart Type* dropdown, select *Donut*. @@ -52,35 +90,25 @@ 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 *Compability*. +.. From the *Color palette* dropdown, select *Compatibility*. .. 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*. +. 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. +To prevent potential server failures, and optimize the cost of website maintenance, create an area chart that displays the average of bytes transfer. To compare +the data to the number of visitors to your website, add a line chart layer. -. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window. - -. Make sure the *kibana_sample_data_logs* index appears. +. Open *Lens*. . From the *Available fields* list, drag and drop *bytes* to the visualization builder. @@ -91,17 +119,15 @@ 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*. -.. Change the *Minimum interval* to `1 days`. +.. Change the *Minimum interval* to `1 days`, then click *Close*. + [role="screenshot"] image::images/lens_end_to_end_3_1.png[Customize time interval] -.. Click *Close*. - . From the *Chart Type* dropdown, select *Area*. [discrete] @@ -110,7 +136,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] @@ -130,23 +156,19 @@ 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*. -.. Change the *Minimum interval* to `1 days`. - -.. Click *Close*. +.. Change the *Minimum interval* to `1 days`, then click *Close*. . 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. -.. In the *Series color* field, enter *#CA8EAE*. - -.. Click *Close*. +.. In the *Series color* field, enter *#CA8EAE*, then click *Close*. [discrete] [[configure-the-multiaxis-chart]] @@ -155,41 +177,33 @@ 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*. +. For *Axis side*, click *Right*, then click *Close*. -.. Click *Close*. +[float] +[[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)*. +. From the *Value format* dropdown, select *Bytes (1024)*, then click *Close*. + [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 +==== Change the legend position -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. +The visualization is done, but the legend uses a lot of space. Change the legend position to the top of the chart. . 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*. +. Click *Save and return*. [discrete] [[percentage-stacked-area]] @@ -197,9 +211,7 @@ image::images/lens_end_to_end_3_5.png[legend position] 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. +. Open *Lens*. . From the *Available fields* list, drag and drop the data fields to the *Drop a field or click to add* fields in the editor. @@ -220,7 +232,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*. @@ -230,13 +242,11 @@ For each response code that you want to display, create a filter. .. In the *KQL* field, enter `response.keyword>=200 AND response.keyword<300`. -.. In the *Label* field, enter `2XX`. +.. In the *Label* field, enter `2XX`, then press Return. + [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*. @@ -261,19 +271,9 @@ image::images/lens_end_to_end_4_1.png[First filter in filters aggregation] .. In the *Label* field, enter `5XX`, then press Return. -. To change the color pallette, select *Status* from the *Color palette* dropdown. +. To change the color palette, select *Status* from the *Color palette* dropdown, then click *Close*. -.. 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*. +. Click *Save and return*. [discrete] [[histogram]] @@ -281,9 +281,7 @@ image::images/lens_end_to_end_4_1.png[First filter in filters aggregation] 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. +. Open *Lens*. . From the *Available fields* list, drag and drop *bytes* to *Vertical axis* in the editor, then configure the options. @@ -293,9 +291,7 @@ To find the best time to shut down your website for maintenance, create a histog .. In the *Display name* field, enter `Transferred bytes`. -.. From the *Value format* dropdown, select `Bytes (1024)`. - -.. Click *Close*. +.. From the *Value format* dropdown, select `Bytes (1024)`, then click *Close*. . From the *Available fields* list, drag and drop *hour_of_day* to *Horizontal axis* in the editor, then configure the options. @@ -306,15 +302,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 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*. +. Click *Save and return*. [discrete] [[custom-ranges]] @@ -322,17 +310,13 @@ image::images/lens_end_to_end_5_2.png[Create custom ranges] 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. +. Open *Lens*. . 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 *Select a function*, click *Sum*, then click *Close*. . From the *Available fields* list, drag and drop *bytes* to *Break down by* in the editor, then specify the file size ranges. @@ -353,24 +337,14 @@ To determine if your users transfer more small files versus large files, create [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 *Value format* dropdown, select *Bytes (1024)*, then 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*. +. Click *Save and return*. [discrete] [[treemap]] @@ -379,15 +353,13 @@ image::images/lens_end_to_end_6_2.png[Files size distribution] 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. +. Open *Lens*. . 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. +. 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*. @@ -415,7 +387,7 @@ enter your website from specific social media websites, and the top countries wh [[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. +To determine the top countries where users are located, add the geographic data. Compare the top sources of website traffic data to the top three countries. @@ -428,26 +400,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"*. +.. 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] -.. Click *Close*. +. Click *Save and return*. -. Save the visualization, then add it to the dashboard. +[discrete] +=== Save the dashboard -.. From the toolbar, click *Save*. +Now that you have a complete overview of your web server data, save the dashboard. -.. In the *Title* field, enter `Traffic Source For Top 3 Countries`. +. In the toolbar, click *Save*. -.. 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] +. On the *Save dashboard* window, enter `Web server data`, then click *Save*.