Skip to content

[Kibana] Update steps to create a visualization #3520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 17, 2025
Merged

[Kibana] Update steps to create a visualization #3520

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b142639
Update steps to create a visualization
alaudazzi Oct 17, 2025
7e073f4
Update create-dashboard-of-panels-with-web-server-data.md
alaudazzi Oct 17, 2025
cb81e47
Merge branch 'main' into fix-3214-create-simple-dashboard
alaudazzi Oct 17, 2025
d50c4ac
Merge branch 'main' into fix-3214-create-simple-dashboard
alaudazzi Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 32 additions & 18 deletions explore-analyze/dashboards/create-dashboard-of-panels-with-web-server-data.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ When you’re done, you’ll have a complete overview of the sample web logs dat
:screenshot:
:::


## Add the data and create the dashboard [add-the-data-and-create-the-dashboard]

Add the sample web logs data, and create and set up the dashboard.
Expand All @@ -34,15 +33,18 @@ Add the sample web logs data, and create and set up the dashboard.

Open the visualization editor, then make sure the correct fields appear.

1. On the dashboard, click **Create visualization**.
1. Create a visualization.

* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
* {applies_to}`stack: ga 9.0` Click **Create visualization**.

2. Make sure the **{{kib}} Sample Data Logs** {{data-source}} appears.

:::{image} /explore-analyze/images/kibana-lens_dataViewDropDown_8.4.0.png
:alt: Data view dropdown
:screenshot:
:::


To create the visualizations in this tutorial, you’ll use the following fields:

* **Records**
Expand All @@ -59,7 +61,6 @@ Click a field name to view more details, such as its top values and distribution
:width: 50%
:::


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

Pick a field you want to analyze, such as **clientip**. To analyze only the **clientip** field, use the **Metric** visualization to display the field as a number.
Expand Down Expand Up @@ -89,17 +90,20 @@ The only number function that you can use with **clientip** is **Unique count**,

4. Click **Save and return**.


## View a metric over time [mixed-multiaxis]

There are two shortcuts you can use to view metrics over time. When you drag a numeric field to the workspace, the visualization editor adds the default time field from the {{data-source}}. 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:

1. On the dashboard, click **Create visualization**.
1. Create a visualization.

* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.

2. From the **Available fields** list, drag **bytes** to the workspace.

The visualization editor creates a bar chart with the **timestamp** and **Median of bytes** fields.
The visualization editor creates a bar chart with the **timestamp** and **Median of bytes** fields.

3. To zoom in on the data, click and drag your cursor across the bars.

Expand Down Expand Up @@ -150,15 +154,17 @@ Since you removed the axis labels, add a panel title:
:width: 50%
:::



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

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

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

1. On the dashboard, click **Create visualization**.
1. Create a visualization.

* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.

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

The visualization editor automatically applies the **Unique count** function. If you drag **clientip** to the workspace, the editor adds the field to the incorrect axis.
Expand Down Expand Up @@ -200,13 +206,15 @@ The chart labels are unable to display because the **request.keyword** field con

Since the table columns are labeled, you do not need to add a panel title.



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

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

1. On the dashboard, click **Create visualization**.
1. Create a visualization.

* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.

2. From the **Available fields** list, drag **bytes** to the **Vertical axis** field in the layer pane.
3. In the layer pane, click **Median of bytes**.
4. Click the **Sum** quick function, then click **Close**.
Expand Down Expand Up @@ -251,12 +259,15 @@ Add a panel title:
1. Hover over the panel and click ![Settings icon](/explore-analyze/images/kibana-settings-icon-hover-action.png "kibana-settings-icon-hover-action =4%x4%"). The **Settings** flyout appears.
2. In the **Title** field, enter `Sum of bytes from large requests`, then click **Apply**.


## View the distribution of a number field [histogram]

The distribution of a number can help you find patterns. For example, you can analyze the website traffic per hour to find the best time for routine maintenance.

1. On the dashboard, click **Create visualization**.
1. Create a visualization.

* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.

2. From the **Available fields** list, drag **bytes** to **Vertical axis** field in the layer pane.
3. In the layer pane, click **Median of bytes**.

Expand All @@ -280,12 +291,15 @@ Add a panel title:
1. Hover over the panel and click ![Settings icon](/explore-analyze/images/kibana-settings-icon-hover-action.png "kibana-settings-icon-hover-action =4%x4%"). The **Settings** flyout appears.
2. In the **Title** field, enter `Website traffic`, then click **Apply**.


## Create a multi-level chart [treemap]

**Table** and **Proportion** visualizations support multiple functions. For example, to create visualizations that break down the data by website traffic sources and user geography, apply the **Filters** and **Top values** functions.

1. On the dashboard, click **Create visualization**.
1. Create a visualization.

* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.

2. Open the **Visualization type** dropdown, then select **Treemap**.
3. From the **Available fields** list, drag **Records** to the **Metric** field in the layer pane.
4. In the layer pane, click **Add or drag-and-drop a field** for **Group by**.
Expand Down Expand Up @@ -370,4 +384,4 @@ Now that you have a complete overview of your web server data, save the dashboar

:::{image} /explore-analyze/images/kibana-dashboard-creator-editor.png
:alt: Information panel of a dashboard showing its creator and last editor
:::
:::