* [DOCS] Reformats Dashboard and adds Lens reference * ⚗️ First trial of Lens FAQ * Fixes broken title levels * Link fix * Fixes tsvb link * Fixes tsvb link * [DOCS] Reformats Dashboard and adds Lens reference * ⚗️ First trial of Lens FAQ * Fixes broken title levels * Link fix * Fixes tsvb link * Fixes tsvb link * [Lens] Add drag and drop keyboard navigation docs * remove unlinked files * [Lens] tutorial advanced first version * corrections * Kaarinas changes * corrections after CR * Update docs/user/dashboard/lens-advanced.asciidoc * 📝 Add more Lens related FAQ * Updates Lens page * Update docs/user/dashboard/lens.asciidoc * drag and drop copy and gif * some corrections after Wylie's second review * Review comments * Final changes * Update lens-advanced.asciidoc ordering fixed * Comment organization * Final clean up Co-authored-by: dej611 <dej611@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Marta Bondyra <marta.bondyra@elastic.co> Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com> Co-authored-by: dej611 <dej611@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Marta Bondyra <marta.bondyra@elastic.co> Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>
|
@ -10,8 +10,8 @@ Numeral formatting patterns are used in multiple places in {kib}, including:
|
|||
|
||||
* <<advanced-options, Advanced settings>>
|
||||
* <<field-formatters-numeric, Index pattern formatters>>
|
||||
* <<tsvb-advanced-editor, TSVB>>
|
||||
* <<canvas, Canvas>>
|
||||
* <<tsvb, *TSVB*>>
|
||||
* <<canvas, *Canvas*>>
|
||||
|
||||
The simplest pattern format is `0`, and the default {kib} pattern is `0,0.[000]`.
|
||||
The numeral pattern syntax expresses:
|
||||
|
|
|
@ -179,11 +179,6 @@ This content has moved. See <<discover, **Discover**>>.
|
|||
|
||||
This content has moved. See <<discover, **Discover**>>.
|
||||
|
||||
[role="exclude",id="lens"]
|
||||
== Lens
|
||||
|
||||
This content has moved. See <<create-panels-with-lens>>.
|
||||
|
||||
[role="exclude",id="known-plugins"]
|
||||
== Known plugins
|
||||
|
||||
|
@ -257,7 +252,7 @@ This page has been moved. Refer to <<vega-tutorial-create-a-stacked-area-chart>>
|
|||
[[heatmap-chart]]
|
||||
=== Heatmap Chart
|
||||
|
||||
This page has been moved. Refer to <<types-of-visualization-panels>>.
|
||||
This page has been moved. Refer to <<types-of-visualizations>>.
|
||||
|
||||
[float]
|
||||
[[interface-overview]]
|
||||
|
|
|
@ -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 <<lucene-query,Lucene Query Syntax>>.
|
||||
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 <<create-panels-with-timelion,*Timelion*>> queries. To use *Timelion* queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
|
||||
* *Timelion* — Access your time series data using <<timelion,*Timelion*>> queries. To use *Timelion* queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
|
||||
+
|
||||
Each element can display a different data source, and pages and workpads often contain multiple data sources.
|
||||
|
||||
|
|
|
@ -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 <<aggregation-reference,aggregations>> 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 <<index-patterns, index patterns>> 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 <<reference-for-kibana-extensions,{kib} extensions>> 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 <<resources-and-examples,Resources and examples>>.
|
||||
|
||||
[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[]
|
|
@ -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}, <<create-panels-with-lens,Lens>> 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 <<save-open-search,saved search>> 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 <<bucket-aggregations,bucket aggregation>>, 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.
|
||||
|
||||
|
|
131
docs/user/dashboard/create-panels-with-editors.asciidoc
Normal file
|
@ -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"]
|
||||
|===
|
||||
|
||||
| <<lens,*Lens*>>
|
||||
| Create visualizations with the drag and drop editor. *Lens* is recommended for most users.
|
||||
|
||||
| <<maps,*Maps*>>
|
||||
| Create visualizations with your geographical data.
|
||||
|
||||
| <<tsvb,*TSVB*>>
|
||||
| Create visualizations with your time series data.
|
||||
|
||||
| <<vega,*Vega*>>
|
||||
| Create custom visualizations with the *Vega* and *Vega-Lite* grammars.
|
||||
|
||||
| <<add-aggregation-based-visualization-panels,*Aggregation based*>>
|
||||
| Build most visualization types using {es} <<aggregation-reference,aggregations>>.
|
||||
|
||||
| <<timelion,*Timelion*>>
|
||||
| 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 <<aggregation-reference,aggregations>> 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 <<index-patterns, index patterns>> 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 <<reference-for-kibana-extensions,{kib} extensions>> 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 <<resources-and-examples,Resources and examples>>.
|
||||
|
||||
[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 <<save-open-search,saved search>> 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[]
|
|
@ -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"]
|
||||
|===
|
||||
|
||||
| <<create-panels-with-lens,Lens>>
|
||||
| The drag and drop editor that creates visualizations of your data. *Lens* is recommended for most users.
|
||||
| <<create-panels-with-editors,Visualization editors>>
|
||||
| Use the *Lens*, *TSVB*, *Vega*, and *Timelion* editors to help you create visualizations of your data, or create aggregation-based visualizations using {es} <<aggregation-reference,aggregations>>.
|
||||
*Lens* is recommended for most users.
|
||||
|
||||
| <<maps,Maps>>
|
||||
| Create beautiful displays of your geographical data.
|
||||
|
||||
| <<add-panels-with-advanced-editors,Advanced editors>>
|
||||
| Visualize time series data with *TSVB* or *Timelion*, or create a custom visualization using *Vega* or *Vega-Lite*.
|
||||
|
||||
| <<add-aggregation-based-visualization-panels,Aggregation-based visualization panels>>
|
||||
| Build most visualization types using {es} <<aggregation-reference,aggregations>>.
|
||||
|
||||
| <<enhance-dashboards,Tools>>
|
||||
| Add context to your panels with <<add-text,text>>, or add dynamic filters with <<add-controls,*Controls*>>.
|
||||
|
||||
|
@ -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 <<anonymous-a
|
|||
To automate {kib}, you can export dashboards as JSON using the <<dashboard-api,import and export dashboard APIs>>. 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[]
|
||||
|
||||
|
|
BIN
docs/user/dashboard/images/aggregation_based.png
Normal file
After Width: | Height: | Size: 110 KiB |
BIN
docs/user/dashboard/images/lens.png
Normal file
After Width: | Height: | Size: 144 KiB |
BIN
docs/user/dashboard/images/lens_advanced_1_1.png
Normal file
After Width: | Height: | Size: 276 KiB |
BIN
docs/user/dashboard/images/lens_advanced_1_1_2.png
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
docs/user/dashboard/images/lens_advanced_1_2.png
Normal file
After Width: | Height: | Size: 106 KiB |
BIN
docs/user/dashboard/images/lens_advanced_2_1.png
Normal file
After Width: | Height: | Size: 27 KiB |
BIN
docs/user/dashboard/images/lens_advanced_2_1_1.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
docs/user/dashboard/images/lens_advanced_2_2.png
Normal file
After Width: | Height: | Size: 85 KiB |
BIN
docs/user/dashboard/images/lens_advanced_2_2_1.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
docs/user/dashboard/images/lens_advanced_3_1.gif
Normal file
After Width: | Height: | Size: 451 KiB |
BIN
docs/user/dashboard/images/lens_advanced_3_1_1.png
Normal file
After Width: | Height: | Size: 23 KiB |
BIN
docs/user/dashboard/images/lens_advanced_3_2.png
Normal file
After Width: | Height: | Size: 45 KiB |
BIN
docs/user/dashboard/images/lens_advanced_3_3.png
Normal file
After Width: | Height: | Size: 183 KiB |
BIN
docs/user/dashboard/images/lens_advanced_4_1.png
Normal file
After Width: | Height: | Size: 152 KiB |
BIN
docs/user/dashboard/images/lens_advanced_4_2.png
Normal file
After Width: | Height: | Size: 113 KiB |
BIN
docs/user/dashboard/images/lens_advanced_result.png
Normal file
After Width: | Height: | Size: 458 KiB |
BIN
docs/user/dashboard/images/lens_area_percentage.png
Normal file
After Width: | Height: | Size: 210 KiB |
After Width: | Height: | Size: 71 KiB |
Before Width: | Height: | Size: 633 KiB |
BIN
docs/user/dashboard/images/lens_drag_drop_1.gif
Normal file
After Width: | Height: | Size: 8.7 MiB |
BIN
docs/user/dashboard/images/lens_drag_drop_1.png
Normal file
After Width: | Height: | Size: 501 KiB |
BIN
docs/user/dashboard/images/lens_drag_drop_2.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
docs/user/dashboard/images/lens_drag_drop_3.gif
Normal file
After Width: | Height: | Size: 268 KiB |
BIN
docs/user/dashboard/images/lens_fields_indexpattern.png
Normal file
After Width: | Height: | Size: 57 KiB |
BIN
docs/user/dashboard/images/lens_ip_mixed_sorting.png
Normal file
After Width: | Height: | Size: 33 KiB |
BIN
docs/user/dashboard/images/lens_ipv4_sorting.png
Normal file
After Width: | Height: | Size: 59 KiB |
After Width: | Height: | Size: 347 KiB |
BIN
docs/user/dashboard/images/lens_value_labels_xychart_toggle.png
Normal file
After Width: | Height: | Size: 215 KiB |
259
docs/user/dashboard/lens-advanced.asciidoc
Normal file
|
@ -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 <<set-time-filter,time filter>> 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 <<kuery-query,KQL filter>> 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*.
|
Before Width: | Height: | Size: 190 KiB |
Before Width: | Height: | Size: 67 KiB |
|
@ -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.
|
||||
. <<set-time-filter,Set the time filter>>.
|
||||
|
||||
. 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 <<index-patterns,index pattern>>, <<set-time-filter,time filter>>, 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 <<set-time-filter,time filter>> 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 <<set-time-filter,time filter>> 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]
|
||||
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 <<semi-structured-search>>, 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 <<explore-fields-in-your-data,Explore the fields in your data>>.
|
||||
|
||||
[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.
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
[[TSVB]]
|
||||
[[tsvb]]
|
||||
=== TSVB
|
||||
|
||||
*TSVB* enables you to visualize the data from multiple data series, supports <<aggregation-reference,
|
||||
|
@ -132,7 +132,7 @@ current time is 9:41, *TSVB* displays only the last 10 minutes — from 9:30
|
|||
[float]
|
||||
===== How do I calculate the difference between two data series?
|
||||
|
||||
Performing math across data series is unsupported in *TSVB*. To calculate the difference between two data series, use <<create-panels-with-timelion, Timelion>> or <<vega, Vega>>.
|
||||
Performing math across data series is unsupported in *TSVB*. To calculate the difference between two data series, use <<timelion, *Timelion*>> or <<vega, *Vega*>>.
|
||||
|
||||
[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 <<create-panels-with-timelion, Timelion>> or <<vega, Vega>>.
|
||||
For other types of month over month calculations, use <<timelion, *Timelion*>> or <<vega, *Vega*>>.
|
||||
|
||||
[float]
|
||||
===== How do I calculate the duration between the start and end of an event?
|
||||
|
|
|
@ -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 <<set-time-filter,time filter>> 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 <<set-time-filter,time filter>> is set to *Last 90 days*.
|
||||
. Open *Lens*, then set the <<set-time-filter,time filter>> 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*.
|