kibana/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc

[[create-a-dashboard-of-panels-with-web-server-data]]
== Build your first dashboard

Learn the most common ways to build a dashboard from your own data.
The tutorial will use sample data from the perspective of an analyst looking
at website logs, but this type of dashboard works on any type of data.
Before using this tutorial, you should be familiar with the <<kibana-concepts-analysts>>.

[role="screenshot"]
image::images/lens_end_to_end_dashboard.png[Final dashboard vis]

[discrete]
[[add-the-data-and-create-the-dashboard]]
=== Add the data and create the dashboard

Add the sample web logs data that you'll use to create the dashboard panels.

. Go to the {kib} *Home* page, then click *Try our sample data*.

. On the *Sample web logs* card, click *Add data*.

Create the dashboard where you'll display the visualization panels.

. Open the main menu, then click *Dashboard*.

. Click *Create dashboard*.

. Set the <<set-time-filter,time filter>> to *Last 90 days*.

[float]
[[open-and-set-up-lens]]
=== Open Lens and get familiar with the data

. On the dashboard, click *Create visualization*.

. Make sure the *kibana_sample_data_logs* index appears.
+
[role="screenshot"]
image::images/lens_end_to_end_1_2.png[Lens index pattern selector, width=50%]

. To create the visualizations in this tutorial, you'll use the *Records*, *timestamp*, *bytes*, *clientip*, and *referer.keyword* fields. To see the most frequent values of a field, hover over the field name, then click *i*.

[discrete]
[[view-the-number-of-website-visitors]]
=== Create your first visualization

Pick a field you want to analyze, such as *clientip*. If you want
to analyze only this field, you can use the *Metric* visualization to display a big number.
The only number function that you can use with *clientip* is *Unique count*.
*Unique count*, also referred to as cardinality, approximates the number of unique values
of the *clientip* field.

. To select the visualization type, open the *Chart type* dropdown, then select *Metric*.
+
[role="screenshot"]
image::images/lens_end_to_end_1_2_1.png[Chart Type dropdown with Metric selected, width=50%]

. From the *Available fields* list, drag *clientip* to the workspace.
+
[role="screenshot"]
image::images/lens_end_to_end_1_3.png[Changed type and dropped clientip field]
+
*Lens* selects the *Unique count* function because it is the only numeric function
that works for IP addresses. You can also drag *clientip* to the layer pane for the same result.

. In the layer pane, click *Unique count of clientip*.

.. In the *Display name* field, enter `Unique visitors`.

.. Click *Close*.

. Click *Save and return*.
+
The metric visualization has its own label, so you do not need to add a panel title.

[discrete]
[[mixed-multiaxis]]
=== View a metric over time

*Lens* has two shortcuts that simplify viewing metrics over time. 
If you drag a numeric field to the workspace, *Lens* adds the default
time field from the index pattern. When you use the *Date histogram* function, you can
replace the time field by dragging the field to the workspace.

To visualize the *bytes* field over time:

. On the dashboard, click *Create visualization*. 

. From the *Available fields* list, drag *bytes* to the workspace. 
+
*Lens* creates a bar chart with the *timestamp* and *Median of bytes* fields, and automatically chooses a date interval. 

. 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]

To emphasize the change in *Median of bytes* over time, change to a line chart with one of the following options:

* From the *Suggestions*, click the line chart.
* Open the *Chart type* dropdown in the editor toolbar, then select *Line*.
* Open the *Chart type* menu in the layer pane, then click the line chart.

You can increase and decrease the minimum interval that *Lens* uses, but you are unable to decrease the interval
below the <<advanced-options,*Advanced Settings*>>. 

To set the minimum time interval:

. In the layer pane, click *timestamp*.

. Select *Customize time interval*.

. Change the *Minimum interval* to *1 days*, then click *Close*.

To save space on the dashboard, hide the vertical and horizontal axis labels.

. Open the *Left axis* menu, then deselect *Show*.
+
[role="screenshot"]
image::images/lens_end_to_end_4_3.png[Turn off axis label]

. Open the *Bottom axis* menu, then deselect *Show*.

. Click *Save and return*

Add a panel title to explain the panel, which is necessary because you removed the axis labels.

.. Open the panel menu, then select *Edit panel title*.

.. In the *Panel title* field, enter `Median of bytes`, then click *Save*.

[discrete]
[[view-the-distribution-of-visitors-by-operating-system]]
=== View the top values of a field

The *Top values* function ranks the unique values of a field by another function.
The values are the most frequent when ranked by a *Count* function, and the largest when ranked by the *Sum* function.

Create a visualization that displays the most frequent values of *request.keyword* on your website, ranked by the unique visitors.
To create the visualization, use *Top values of request.keyword* ranked by *Unique count of clientip*, instead of
being ranked by *Count of records*.

. On the dashboard, click *Create visualization*. 

. From the *Available fields* list, drag *clientip* to the *Vertical axis* field in the layer pane. 
+
*Lens* automatically chooses the *Unique count* function. If you drag *clientip* to the workspace, *Lens* adds the field to the incorrect axis.
+
When you drag a text or IP address field to the workspace,
*Lens* adds the *Top values* function ranked by *Count of records* to show the most frequent values.

. Drag *request.keyword* to the workspace.
+
[role="screenshot"]
image::images/lens_end_to_end_2_1_1.png[Vertical bar chart with top values of request.keyword by most unique visitors]
+
*Lens* adds *Top values of request.keyword* to the *Horizontal axis*.

The chart is hard to read because the *request.keyword* field contains long text. You could try
using one of the *Suggestions*, but the suggestions also have issues with long text. Instead, create a *Table* visualization.

. Open the *Chart type* dropdown, then select *Table*.
+
[role="screenshot"]
image::images/lens_end_to_end_2_1_2.png[Table with top values of request.keyword by most unique visitors]

. In the layer pane, click *Top values of request.keyword*.

.. In the *Number of values* field, enter `10`.

.. In the *Display name* field, enter `Page URL`.

.. Click *Close*.

. Click *Save and return*.
+
The table does not need a panel title because the columns are clearly labeled.

[discrete]
[[custom-ranges]]
=== Compare a subset of documents to all documents

Create a proportional visualization that helps you to determine if your users transfer more bytes from documents under 10KB versus documents over 10 Kb.

. On the dashboard, click *Create visualization*. 

. From the *Available fields* list, drag *bytes* to the *Vertical axis* field in the layer pane.

. Click *Median of bytes*, click the *Sum* function, then click *Close*.

. From the *Available fields* list, drag *bytes* to the *Break down by* field in the layer pane.

Use the *Intervals* function to select documents based on the number range of a field. 
If the ranges were non numeric, or if the query required multiple clauses, you could use the *Filters* function.

. To specify the file size ranges, click *bytes* in the layer pane.

. Click *Create custom ranges*, enter the following, then press Return:

* *Ranges* &mdash; `0` -> `10240`

* *Label* &mdash; `Below 10KB`

. Click *Add range*, enter the following, then press Return:

* *Ranges* &mdash; `10240` -> `+∞`

* *Label* &mdash; `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*.

To display the values as a percentage of the sum of all values, use the *Pie* chart. 

. Open the *Chart Type* dropdown, then select *Pie*.

. Click *Save and return*.

. Add a panel title.

.. Open the panel menu, then select *Edit panel title*.

.. In the *Panel title* field, enter `Sum of bytes from large requests`, then click *Save*.

[discrete]
[[histogram]]
=== View the distribution of a number field

Knowing the distribution of a number helps you find patterns. For example, you can analyze the website traffic per hour to find the best time to do routine maintenance.

. On the dashboard, click *Create visualization*. 

. From the *Available fields* list, drag *bytes* to *Vertical axis* field in the layer pane.

. In the layer pane, click *Median of bytes*

.. Click the *Sum* function.

.. 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 *hour_of_day* to *Horizontal axis* field in the layer pane.

. In the layer pane, click *hour_of_day*, then slide the *Intervals granularity* slider until the horizontal axis displays hourly intervals.
+
The *Intervals* function displays an evenly spaced distribution of the field.

. Click *Save and return*.

[discrete]
[[treemap]]
=== Create a multi-level chart

You can use multiple functions in data tables and proportion charts. For example,
to create a chart that breaks down the traffic sources and user geography, use *Filters* and
*Top values*.

. On the dashboard, click *Create visualization*. 

. Open the *Chart type* dropdown, then select *Treemap*.

. From the *Available fields* list, drag *Records* to the *Size by* field in the layer pane. 

. In the editor, click the *Drop a field or click to add* field for *Group by*, then create a filter for each website traffic source.

.. From *Select a function*, click *Filters*.

.. Click *All records*, enter the following, then press Return:

* *KQL* &mdash; `referer : *facebook.com*`

* *Label* &mdash; `Facebook`

.. Click *Add a filter*, enter the following, then press Return:

* *KQL* &mdash; `referer : *twitter.com*`

* *Label* &mdash; `Twitter`

.. Click *Add a filter*, enter the following, then press Return:

* *KQL* &mdash; `NOT referer : *twitter.com* OR NOT referer: *facebook.com*`

* *Label* &mdash; `Other`

.. Click *Close*.

Add a geography grouping:

. From the *Available fields* list, drag *geo.src* to the workspace.

. To change the *Group by* order, drag *Top values of geo.src* so that it appears first.
+
[role="screenshot"]
image::images/lens_end_to_end_7_2.png[Treemap visualization]

. To view only the Facebook and Twitter data, remove the *Other* category. 

.. In the layer pane, click *Top values of geo.src*.

.. Open the *Advanced* dropdown, deselect *Group other values as "Other"*, then click *Close*.

. Click *Save and return*.

. Add a panel title.

.. Open the panel menu, then select *Edit panel title*.

.. In the *Panel title* field, enter `Page views by location and referrer`, then click *Save*.

[float]
[[arrange-the-lens-panels]]
=== Arrange the dashboard panels

Resize and move the panels so they all appear on the dashboard without scrolling.

Decrease the size of the following panels, then move them to the first row:

* *Unique visitors* 

* *Median of bytes*

* *Sum of bytes from large requests*

* *hour_of_day*

[discrete]
=== Save the dashboard

Now that you have a complete overview of your web server data, save the dashboard.

. In the toolbar, click *Save*.

. On the *Save dashboard* window, enter `Logs dashboard` in the *Title* field.

. Select *Store time with dashboard*.

. Click *Save*.