Skip to content

Commit f67ce25

Browse files
[E&A] Refine dashboards & viz sections (#356)
* first few files * dashboards section * viz section * remove raw maps files * Apply suggestions from code review * links * more links * moar links
1 parent df4ac8a commit f67ce25

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1376
-1473
lines changed

explore-analyze/dashboards.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ mapped_pages:
77

88
Dashboards are the best way to visualize and share insights from your {{es}} data.
99

10-
A **dashboard** is made of one or more **panels** that you can organize as you like. Each panel can display various types of content: *visualizations* such as charts, tables, metrics, and maps, *static annotations* like text or images, or even *specialized views* for Machine Learning or Observability data.
10+
A **dashboard** is made of one or more **panels** that you can organize as you like. Each panel can display various types of content: **visualizations** such as charts, tables, metrics, and maps, **static annotations** like text or images, or even **specialized views** for Machine Learning or Observability data.
1111

1212
![Example dashboard](../images/kibana-dashboard-overview.png "")
1313

explore-analyze/dashboards/_tutorials.md

Lines changed: 0 additions & 13 deletions
This file was deleted.

explore-analyze/dashboards/add-controls.md

Lines changed: 15 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,16 @@ mapped_pages:
1010
There are three types of controls:
1111

1212
* [**Options list**](#create-and-add-options-list-and-range-slider-controls) — Adds a dropdown that allows to filter data by selecting one or more values.
13-
14-
For example, if you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, you can add an options list for the `machine.os.keyword` field that allows you to display only the logs generated from `osx` and `ios` operating systems.
15-
16-
:::{image} ../../images/kibana-dashboard_controlsOptionsList_8.7.0.png
17-
:alt: Options list control for the `machine.os.keyword` field with the `osx` and `ios` options selected
18-
:class: screenshot
19-
:::
13+
For example, if you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, you can add an options list for the `machine.os.keyword` field that allows you to display only the logs generated from `osx` and `ios` operating systems.
14+
![Options list control for the `machine.os.keyword` field with the `osx` and `ios` options selected](../../images/kibana-dashboard_controlsOptionsList_8.7.0.png "title =50%")
2015

2116
* [**Range slider**](#create-and-add-options-list-and-range-slider-controls) — Adds a slider that allows to filter the data within a specified range of values. This type of control only works with numeric fields.
22-
23-
For example, if you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, you can add a range slider for the `hour_of_day` field that allows you to display only the log data from 9:00AM to 5:00PM.
24-
25-
:::{image} ../../images/kibana-dashboard_controlsRangeSlider_8.3.0.png
26-
:alt: Range slider control for the `hour_of_day` field with a range of `9` to `17` selected
27-
:class: screenshot
28-
:::
17+
For example, if you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, you can add a range slider for the `hour_of_day` field that allows you to display only the log data from 9:00AM to 5:00PM.
18+
![Range slider control for the `hour_of_day` field with a range of `9` to `17` selected](../../images/kibana-dashboard_controlsRangeSlider_8.3.0.png "title =50%")
2919

3020
* [**Time slider**](#add-time-slider-controls) — Adds a time range slider that allows to filter the data within a specified range of time, advance the time range backward and forward by a unit that you can define, and animate your change in data over the specified time range.
31-
32-
For example, you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, and the global time filter is **Last 7 days**. When you add the time slider, you can click the previous and next buttons to advance the time range backward or forward, and click the play button to watch how the data changes over the last 7 days.
33-
34-
:::{image} https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt672f3aaadf9ea5a6/6750dd6c2452f972af0a88b4/dashboard_timeslidercontrol_8.17.0.gif
35-
:alt: Time slider control for the the Last 7 days
36-
:class: screenshot
37-
:::
21+
For example, you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, and the global time filter is **Last 7 days**. When you add the time slider, you can click the previous and next buttons to advance the time range backward or forward, and click the play button to watch how the data changes over the last 7 days.
22+
![Time slider control for the the Last 7 days](https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt672f3aaadf9ea5a6/6750dd6c2452f972af0a88b4/dashboard_timeslidercontrol_8.17.0.gif)
3823

3924

4025

@@ -44,19 +29,14 @@ To add interactive Options list and Range slider controls, create the controls,
4429

4530
1. Open or create a new dashboard.
4631
2. In **Edit** mode, select **Controls** > **Add control** in the dashboard toolbar.
47-
48-
:::{image} ../../images/kibana-dashboard-add-control-8.15.0.png
49-
:alt: Controls button in the toolbar with the Add Control option selected
50-
:class: screenshot
51-
:::
32+
![Controls button in the toolbar with the Add Control option selected](../../images/kibana-dashboard-add-control-8.15.0.png "title =60%")
5233

5334
3. On the **Create control** flyout, from the **Data view** dropdown, select the data view that contains the field you want to use for the **Control**.
5435
4. In the **Field** list, select the field you want to filter on.
5536
5. Under **Control type**, select whether the control should be an **Options list** or a **Range slider**.
56-
57-
::::{tip}
58-
Range sliders are for Number type fields only.
59-
::::
37+
::::{tip}
38+
Range sliders are for Number type fields only.
39+
::::
6040

6141
6. Define how you want the control to appear:
6242

@@ -75,9 +55,9 @@ To add interactive Options list and Range slider controls, create the controls,
7555
* **Contains**: Show options that *contain* the entered value. This setting option is only available for *string* type fields. Results can take longer to show with this option.
7656
* **Exact**: Show options that are a 100% match with the entered value.
7757

78-
::::{tip}
79-
The search is not case sensitive. For example, searching for `ios` would still retrieve `iOS` if that value exists.
80-
::::
58+
::::{tip}
59+
The search is not case sensitive. For example, searching for `ios` would still retrieve `iOS` if that value exists.
60+
::::
8161

8262
* **Ignore timeout for results** delays the display of the list of values to when it is fully loaded. This option is useful for large data sets, to avoid missing some available options in case they take longer to load and appear when using the control.
8363

@@ -94,11 +74,7 @@ You can add one interactive time slider control to a dashboard.
9474

9575
1. Open or create a new dashboard.
9676
2. In **Edit** mode, select **Controls** > **Add time slider control**.
97-
98-
:::{image} ../../images/kibana-dashboard-add-time-slider-control-8.15.0.png
99-
:alt: Controls button in the toolbar with the Add a time slider option selected
100-
:class: screenshot
101-
:::
77+
![Controls button in the toolbar with the Add a time slider option selected](../../images/kibana-dashboard-add-time-slider-control-8.15.0.png "title =50%")
10278

10379
3. The time slider control uses the time range from the global time filter. To change the time range in the time slider control, [change the global time filter](../query-filter/filtering.md).
10480
4. Save the dashboard. The control can now be used.
@@ -109,11 +85,7 @@ You can add one interactive time slider control to a dashboard.
10985
Several settings that apply to all controls of the same dashboard are available.
11086

11187
1. In **Edit** mode, select **Controls** > **Settings**.
112-
113-
:::{image} ../../images/kibana-dashboard-controls-settings-8.15.0.png
114-
:alt: Controls button in the toolbar with the Settings option selected
115-
:class: screenshot
116-
:::
88+
![Controls button in the toolbar with the Settings option selected](../../images/kibana-dashboard-controls-settings-8.15.0.png "title =60%")
11789

11890
2. On the **Control settings** flyout, configure the following settings:
11991

explore-analyze/dashboards/arrange-panels.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ In the toolbar, click **Edit**, then use the following options:
1515
* To resize, click the resize control, then drag to the new dimensions.
1616
* To maximize to full screen, open the panel menu and click **Maximize**.
1717

18-
::::{tip}
19-
If you [share](sharing.md) a dashboard while viewing a full screen panel, the generated link will directly open the same panel in full screen mode.
20-
::::
18+
::::{tip}
19+
If you [share](sharing.md) a dashboard while viewing a full screen panel, the generated link will directly open the same panel in full screen mode.
20+
::::
2121

2222

2323

explore-analyze/dashboards/building.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ mapped_pages:
33
- https://www.elastic.co/guide/en/kibana/current/create-dashboards.html
44
---
55

6-
# Building [create-dashboards]
6+
# Building dashboards [create-dashboards]
77

88
{{kib}} offers many ways to build powerful dashboards that will help you visualize and keep track of the most important information contained in your {{es}} data.
99

@@ -16,9 +16,9 @@ $$$dashboard-minimum-requirements$$$
1616
To create or edit dashboards, you first need to:
1717

1818
* have [data indexed into {{es}}](https://www.elastic.co/guide/en/elasticsearch/reference/current/getting-started-index.html) and a [data view](../find-and-organize/data-views.md). A data view is a subset of your {{es}} data, and allows you to load just the right data when building a visualization or exploring it.
19-
20-
::::{tip}
21-
If you don’t have data at hand and still want to explore dashboards, you can import one of the [sample data sets](../../manage-data/ingest/sample-data.md) available.
22-
::::
19+
20+
::::{tip}
21+
If you don’t have data at hand and still want to explore dashboards, you can import one of the [sample data sets](../../manage-data/ingest/sample-data.md) available.
22+
::::
2323

2424
* have sufficient permissions on the **Dashboard** feature. If that’s not the case, you might get a read-only indicator. A {{kib}} administrator can [grant you the required privileges](../../deploy-manage/users-roles/cluster-or-deployment-auth/kibana-privileges.md).

explore-analyze/dashboards/create-dashboard-of-panels-with-ecommerce-data.md

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,10 @@ To analyze the data with a custom time interval, create a bar chart that shows y
4646

4747
2. To zoom in on the data, click and drag your cursor across the bars.
4848

49-
:::{image} ../../images/kibana-lens_clickAndDragZoom_7.16.gif
50-
:alt: Cursor clicking and dragging across the bars to zoom in on the data
51-
:class: screenshot
52-
:::
49+
:::{image} ../../images/kibana-lens_clickAndDragZoom_7.16.gif
50+
:alt: Cursor clicking and dragging across the bars to zoom in on the data
51+
:class: screenshot
52+
:::
5353

5454
3. In the layer pane, click **Count of records**.
5555

@@ -81,10 +81,10 @@ To identify the 75th percentile of orders, add a reference line:
8181

8282
4. Click **Close**.
8383

84-
:::{image} ../../images/kibana-lens_barChartCustomTimeInterval_8.3.png
85-
:alt: Orders per day
86-
:class: screenshot
87-
:::
84+
:::{image} ../../images/kibana-lens_barChartCustomTimeInterval_8.3.png
85+
:alt: Orders per day
86+
:class: screenshot
87+
:::
8888

8989
5. Click **Save and return**.
9090

@@ -109,20 +109,20 @@ To copy a function, you drag it to the **Add or drag-and-drop a field** area wit
109109

110110
1. Drag the **95th** field to **Add or drag-and-drop a field** for **Vertical axis**.
111111

112-
:::{image} https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt8fb6969daa820faf/6700642c363a96bb08f48bee/drag-and-drop-a-field-8.16.0.gif
113-
:alt: Easily duplicate the items with drag and drop
114-
:class: screenshot
115-
:::
112+
:::{image} https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt8fb6969daa820faf/6700642c363a96bb08f48bee/drag-and-drop-a-field-8.16.0.gif
113+
:alt: Easily duplicate the items with drag and drop
114+
:class: screenshot
115+
:::
116116

117117
2. Click **95th [1]**, then enter `90` in the **Percentile** field.
118118
3. In the **Name** field enter `90th`, then click **Close**.
119119
4. To create the `50th` and `10th` percentiles, repeat the duplication steps.
120120
5. Open the **Left Axis** menu, select **Custom** from the **Axis title** dropdown, then enter `Percentiles for product prices` in the **Axis title** field.
121121

122-
:::{image} ../../images/kibana-lens_lineChartMultipleDataSeries_7.16.png
123-
:alt: Percentiles for product prices chart
124-
:class: screenshot
125-
:::
122+
:::{image} ../../images/kibana-lens_lineChartMultipleDataSeries_7.16.png
123+
:alt: Percentiles for product prices chart
124+
:class: screenshot
125+
:::
126126

127127
6. Click **Save and return**.
128128

@@ -152,17 +152,17 @@ Add a layer to display the customer traffic:
152152
2. In the **Series color** field, enter `#D36086`.
153153
3. Click **Right** for the **Axis side**, then click **Close**.
154154

155-
:::{image} ../../images/kibana-lens_advancedTutorial_numberOfCustomers_8.5.0.png
156-
:alt: Number of customers area chart in Lens
157-
:::
155+
:::{image} ../../images/kibana-lens_advancedTutorial_numberOfCustomers_8.5.0.png
156+
:alt: Number of customers area chart in Lens
157+
:::
158158

159159
4. From the **Available fields** list, drag **order_date** to the **Horizontal Axis** field in the second layer.
160160
5. To change the position of the legend, open the **Legend** menu, then select the **Alignment** arrow that points up.
161161

162-
:::{image} ../../images/kibana-lens_mixedXYChart_7.16.png
163-
:alt: Layer visualization type menu
164-
:class: screenshot
165-
:::
162+
:::{image} ../../images/kibana-lens_mixedXYChart_7.16.png
163+
:alt: Layer visualization type menu
164+
:class: screenshot
165+
:::
166166

167167
6. Click **Save and return**.
168168

@@ -199,10 +199,10 @@ For each order category, create a filter:
199199
6. Click **Close**.
200200
7. Open the **Legend** menu, then select the **Alignment** arrow that points up.
201201

202-
:::{image} ../../images/kibana-lens_areaPercentageNumberOfOrdersByCategory_8.3.png
203-
:alt: Prices share by category
204-
:class: screenshot
205-
:::
202+
:::{image} ../../images/kibana-lens_areaPercentageNumberOfOrdersByCategory_8.3.png
203+
:alt: Prices share by category
204+
:class: screenshot
205+
:::
206206

207207
8. Click **Save and return**.
208208

@@ -235,10 +235,11 @@ Filter the results to display the data for only Saturday and Sunday:
235235
4. Click **Close**.
236236
5. Open the **Legend** menu, then click **Hide** next to **Display**.
237237

238-
:::{image} ../../images/kibana-lens_areaChartCumulativeNumberOfSalesOnWeekend_7.16.png
239-
:alt: Area chart with cumulative sum of orders made on the weekend
240-
:class: screenshot
241-
:::
238+
:::{image} ../../images/kibana-lens_areaChartCumulativeNumberOfSalesOnWeekend_7.16.png
239+
:alt: Area chart with cumulative sum of orders made on the weekend
240+
:class: screenshot
241+
:width: 50%
242+
:::
242243

243244
6. Click **Save and return**.
244245

@@ -259,12 +260,13 @@ To create a week-over-week comparison, shift **Count of records [1]** by one wee
259260
1. In the layer pane, click **Count of records [1]**.
260261
2. Click **Advanced**, select **1 week ago** from the **Time shift** dropdown, then click **Close**.
261262

262-
To use custom time shifts, enter the time value and increment, then press Enter. For example, enter **1w** to use the **1 week ago** time shift.
263+
To use custom time shifts, enter the time value and increment, then press Enter. For example, enter **1w** to use the **1 week ago** time shift.
263264

264-
:::{image} ../../images/kibana-lens_time_shift.png
265-
:alt: Line chart with week-over-week sales comparison
266-
:class: screenshot
267-
:::
265+
:::{image} ../../images/kibana-lens_time_shift.png
266+
:alt: Line chart with week-over-week sales comparison
267+
:class: screenshot
268+
:width: 50%
269+
:::
268270

269271
3. Click **Save and return**.
270272

@@ -285,10 +287,11 @@ To compare time range changes as a percent, create a bar chart that compares the
285287
6. From the **Value format** dropdown, select **Percent**, then enter `0` in the **Decimals** field.
286288
7. Click **Close**.
287289

288-
:::{image} ../../images/kibana-lens_percent_chage.png
289-
:alt: Bar chart with percent change in sales between the current time and the previous week
290-
:class: screenshot
291-
:::
290+
:::{image} ../../images/kibana-lens_percent_chage.png
291+
:alt: Bar chart with percent change in sales between the current time and the previous week
292+
:class: screenshot
293+
:width: 50%
294+
:::
292295

293296
8. Click **Save and return**.
294297

@@ -317,10 +320,11 @@ To split the metric, add columns for each continent using the **Columns** field:
317320

318321
1. From the **Available fields** list, drag **geoip.continent_name** to the **Split metrics by** field in the layer pane.
319322

320-
:::{image} ../../images/kibana-lens_table_over_time.png
321-
:alt: Date histogram table with groups for the customer count metric
322-
:class: screenshot
323-
:::
323+
:::{image} ../../images/kibana-lens_table_over_time.png
324+
:alt: Date histogram table with groups for the customer count metric
325+
:class: screenshot
326+
:width: 50%
327+
:::
324328

325329
2. Click **Save and return**.
326330

0 commit comments

Comments
 (0)