You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: explore-analyze/dashboards/create-dashboard-of-panels-with-ecommerce-data.md
+40-17Lines changed: 40 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,7 +19,6 @@ When you’re done, you’ll have a complete overview of the sample web logs dat
19
19
:screenshot:
20
20
:::
21
21
22
-
23
22
## Add the data and create the dashboard [add-the-data-and-create-the-dashboard-advanced]
24
23
25
24
Add the sample eCommerce data, and create and set up the dashboard.
@@ -33,9 +32,12 @@ Add the sample eCommerce data, and create and set up the dashboard.
33
32
34
33
Open the visualization editor, then make sure the correct fields appear.
35
34
36
-
1. On the dashboard, click **Create visualization**.
37
-
2. Make sure the **Kibana Sample Data eCommerce** {{data-source}} appears, then set the [time filter](../query-filter/filtering.md) to **Last 30 days**.
35
+
1. Create a visualization.
36
+
37
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
38
+
* {applies_to}`stack: ga 9.0` Click **Create visualization**.
38
39
40
+
2. Make sure the **Kibana Sample Data eCommerce** {{data-source}} appears, then set the [time filter](../query-filter/filtering.md) to **Last 30 days**.
39
41
40
42
## Create visualizations with custom time intervals [custom-time-interval]
41
43
@@ -91,14 +93,17 @@ To identify the 75th percentile of orders, add a reference line:
91
93
92
94
5. Click **Save and return**.
93
95
94
-
95
96
## Analyze multiple data series [add-a-data-layer-advanced]
96
97
97
98
You can create visualizations with multiple data series within the same time interval, even when the series have similar configurations with minor differences.
98
99
99
100
To analyze multiple series, create a line chart that displays the price distribution of products sold over time:
100
101
101
-
1. On the dashboard, click **Create visualization**.
102
+
1. Create a visualization.
103
+
104
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
105
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
106
+
102
107
2. Open the **Visualization type** dropdown, then select **Line**.
103
108
3. From the **Available fields** list, drag **products.price** to the workspace.
104
109
@@ -129,14 +134,17 @@ To copy a function, you drag it to the **Add or drag-and-drop a field** area wit
With layers, you can analyze your data with multiple visualization types. When you create layered visualizations, match the data on the horizontal axis so that it uses the same scale.
136
140
137
141
To analyze multiple visualization types, create an area chart that displays the average order prices, then add a line chart layer that displays the number of customers.
138
142
139
-
1. On the dashboard, click **Create visualization**.
143
+
1. Create a visualization.
144
+
145
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
146
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
147
+
140
148
2. From the **Available fields** list, drag **products.price** to the workspace.
141
149
3. In the layer pane, click **Median of products.price**.
142
150
@@ -169,14 +177,17 @@ Add a layer to display the customer traffic:
169
177
170
178
6. Click **Save and return**.
171
179
172
-
173
180
## Compare the change in percentage over time [percentage-stacked-area]
174
181
175
182
By default, the visualization editor displays time series data with stacked charts, which show how the different document sets change over time.
176
183
177
184
To view change over time as a percentage, create an **Area percentage** chart that displays three order categories over time:
178
185
179
-
1. On the dashboard, click **Create visualization**.
186
+
1. Create a visualization.
187
+
188
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
189
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
190
+
180
191
2. From the **Available fields** list, drag **Records** to the workspace.
181
192
3. Open the **Visualization type** dropdown, then select **Area**.
182
193
@@ -209,12 +220,15 @@ For each order category, create a filter:
209
220
210
221
8. Click **Save and return**.
211
222
212
-
213
223
## View the cumulative number of products sold on weekends [view-the-cumulative-number-of-products-sold-on-weekends]
214
224
215
225
To determine the number of orders made only on Saturday and Sunday, create an area chart, then add it to the dashboard.
216
226
217
-
1. On the dashboard, click **Create visualization**.
227
+
1. Create a visualization.
228
+
229
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
230
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
231
+
218
232
2. Open the **Visualization type** dropdown, then select **Area**.
219
233
220
234
Configure the cumulative sum of store orders:
@@ -246,14 +260,17 @@ Filter the results to display the data for only Saturday and Sunday:
246
260
247
261
6. Click **Save and return**.
248
262
249
-
250
263
## Compare time ranges [compare-time-ranges]
251
264
252
265
With **Time shift**, you can compare the data from different time ranges. To make sure the data displays correctly, choose a multiple of the date histogram interval when you use multiple time shifts. For example, you are unable to use a **36h** time shift for one series, and a **1d** time shift for the second series if the interval is **days**.
253
266
254
267
To compare two time ranges, create a line chart that compares the sales in the current week with sales from the previous week:
255
268
256
-
1. On the dashboard, click **Create visualization**.
269
+
1. Create a visualization.
270
+
271
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
272
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
273
+
257
274
2. Open the **Visualization type** dropdown, then select **Line**.
258
275
3. From the **Available fields** list, drag **Records** to the workspace.
259
276
4. To duplicate **Count of records**, drag **Count of records** to **Add or drag-and-drop a field** for **Vertical axis** in the layer pane.
@@ -275,14 +292,17 @@ To create a week-over-week comparison, shift **Count of records [1]** by one wee
275
292
276
293
Time shifts can be used on any metric. The special shift **previous** will show the time window preceding the currently selected one in the time picker in the top right, spanning the same duration. For example, if **Last 7 days** is selected in the time picker, **previous** will show data from 14 days ago to 7 days ago. This mode can’t be used together with date histograms.
277
294
278
-
279
295
### Analyze the percent change between time ranges [compare-time-as-percent]
280
296
281
297
With **Formula**, you can analyze the percent change in your data from different time ranges.
282
298
283
299
To compare time range changes as a percent, create a bar chart that compares the sales in the current week with sales from the previous week:
284
300
285
-
1. On the dashboard, click **Create visualization**.
301
+
1. Create a visualization.
302
+
303
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
304
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
305
+
286
306
2. From the **Available fields** list, drag **Records** to the workspace.
287
307
3. In the layer pane, click **Count of records**.
288
308
4. Click **Formula**, then enter `count() / count(shift='1w') - 1` in the **Formula** field.
@@ -298,14 +318,17 @@ To compare time range changes as a percent, create a bar chart that compares the
298
318
299
319
8. Click **Save and return**.
300
320
301
-
302
321
## Analyze the data in a table [view-customers-over-time-by-continents]
303
322
304
323
With tables, you can view and compare the field values, which is useful for displaying the locations of customer orders.
305
324
306
325
Create a date histogram table and group the customer count metric by category, such as the continent registered in user accounts:
307
326
308
-
1. On the dashboard, click **Create visualization**.
327
+
1. Create a visualization.
328
+
329
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
330
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
331
+
309
332
2. Open the **Visualization type** dropdown, then select **Table**.
310
333
3. From the **Available fields** list, drag **customer_id** to the **Metrics** field in the layer pane.
To create the visualizations in this tutorial, you’ll use the following fields:
47
49
48
50
***Records**
@@ -59,7 +61,6 @@ Click a field name to view more details, such as its top values and distribution
59
61
:width: 50%
60
62
:::
61
63
62
-
63
64
## Create your first visualization [view-the-number-of-website-visitors]
64
65
65
66
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.
@@ -89,17 +90,20 @@ The only number function that you can use with **clientip** is **Unique count**,
89
90
90
91
4. Click **Save and return**.
91
92
92
-
93
93
## View a metric over time [mixed-multiaxis]
94
94
95
95
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.
96
96
97
97
To visualize the **bytes** field over time:
98
98
99
-
1. On the dashboard, click **Create visualization**.
99
+
1. Create a visualization.
100
+
101
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
102
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
103
+
100
104
2. From the **Available fields** list, drag **bytes** to the workspace.
101
105
102
-
The visualization editor creates a bar chart with the **timestamp** and **Median of bytes** fields.
106
+
The visualization editor creates a bar chart with the **timestamp** and **Median of bytes** fields.
103
107
104
108
3. To zoom in on the data, click and drag your cursor across the bars.
105
109
@@ -150,15 +154,17 @@ Since you removed the axis labels, add a panel title:
150
154
:width: 50%
151
155
:::
152
156
153
-
154
-
155
157
## View the top values of a field [view-the-distribution-of-visitors-by-operating-system]
156
158
157
159
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**.
158
160
159
161
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.
160
162
161
-
1. On the dashboard, click **Create visualization**.
163
+
1. Create a visualization.
164
+
165
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
166
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
167
+
162
168
2. From the **Available fields** list, drag **clientip** to the **Vertical axis** field in the layer pane.
163
169
164
170
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.
@@ -200,13 +206,15 @@ The chart labels are unable to display because the **request.keyword** field con
200
206
201
207
Since the table columns are labeled, you do not need to add a panel title.
202
208
203
-
204
-
205
209
## Compare a subset of documents to all documents [custom-ranges]
206
210
207
211
Create a proportional visualization that helps you determine if your users transfer more bytes from documents under 10KB versus documents over 10Kb.
208
212
209
-
1. On the dashboard, click **Create visualization**.
213
+
1. Create a visualization.
214
+
215
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
216
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
217
+
210
218
2. From the **Available fields** list, drag **bytes** to the **Vertical axis** field in the layer pane.
211
219
3. In the layer pane, click **Median of bytes**.
212
220
4. Click the **Sum** quick function, then click **Close**.
@@ -251,12 +259,15 @@ Add a panel title:
251
259
1. Hover over the panel and click . The **Settings** flyout appears.
252
260
2. In the **Title** field, enter `Sum of bytes from large requests`, then click **Apply**.
253
261
254
-
255
262
## View the distribution of a number field [histogram]
256
263
257
264
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.
258
265
259
-
1. On the dashboard, click **Create visualization**.
266
+
1. Create a visualization.
267
+
268
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
269
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
270
+
260
271
2. From the **Available fields** list, drag **bytes** to **Vertical axis** field in the layer pane.
261
272
3. In the layer pane, click **Median of bytes**.
262
273
@@ -280,12 +291,15 @@ Add a panel title:
280
291
1. Hover over the panel and click . The **Settings** flyout appears.
281
292
2. In the **Title** field, enter `Website traffic`, then click **Apply**.
282
293
283
-
284
294
## Create a multi-level chart [treemap]
285
295
286
296
**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.
287
297
288
-
1. On the dashboard, click **Create visualization**.
298
+
1. Create a visualization.
299
+
300
+
* {applies_to}`stack: ga 9.2` Select **Add** > **Visualization** in the toolbar.
301
+
* {applies_to}`stack: ga 9.0` Click **Create visualization** in the dashboard toolbar.
302
+
289
303
2. Open the **Visualization type** dropdown, then select **Treemap**.
290
304
3. From the **Available fields** list, drag **Records** to the **Metric** field in the layer pane.
291
305
4. In the layer pane, click **Add or drag-and-drop a field** for **Group by**.
@@ -370,4 +384,4 @@ Now that you have a complete overview of your web server data, save the dashboar
Copy file name to clipboardExpand all lines: explore-analyze/visualize/esorql.md
+4-3Lines changed: 4 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,17 +13,18 @@ products:
13
13
14
14
You can add {{esql}} visualizations to a dashboard directly from queries in Discover, or you can start from a dashboard.
15
15
16
-
17
16
## Edit and add from Discover [_edit_and_add_from_discover]
18
17
19
18
In Discover, [typing ES|QL queries](../query-filter/languages/esql-kibana.md) automatically shows a visualization. The visualization type depends on the content of the query: histogram, bar charts, etc. You can manually make changes to that visualization and edit its type and display options using the pencil button .
20
19
21
20
You can then **Save** and add it to an existing or a new dashboard using the save button of the visualization .
22
21
23
-
24
22
## Create from dashboard [_create_from_dashboard]
25
23
26
-
1. From your dashboard, select **Add panel**.
24
+
1. Add a new panel from your dashboard.
25
+
26
+
* {applies_to}`stack: ga 9.2` Select **Add** > **New panel** in the toolbar.
27
+
* {applies_to}`stack: ga 9.0` Click **Add panel** in the dashboard toolbar.
27
28
28
29
::::{tip}
29
30
If you haven't created a [data view](/explore-analyze/find-and-organize/data-views.md) and you don't have a dashboard yet, the **Dashboards** page offers you the possibility to **Try ES|QL** right away. By selecting this option, a dashboard is created with an ES|QL visualization that you can interact with and configure using ES|QL.
# Advanced topics for working with time series data streams
11
+
12
+
This section contains information about advanced concepts and operations for [time series data streams](/manage-data/data-store/data-streams/time-series-data-stream-tsds.md):
0 commit comments