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
Canvas _elements_ are the building blocks of your workpad. With elements, you can combine images, text, and visualizations to tell a story about your data.
5
+
Create a story about your data by adding elements to your workpad that include images, text, charts, and more. You can create your own elements and connect them to your data sources, add saved objects, and add your own images.
6
6
7
-
When you add elements to your workpad, you can:
8
-
9
-
* <<connect-element-data,Connect the elements to your live data>>
10
-
11
-
* <<configure-display-options,Choose how you want the element to appear on your workpad>>
12
-
13
-
* <<configure-auto-refresh-interval,Change the data refresh interval>>
7
+
[float]
8
+
[[create-canvas-element]]
9
+
==== Create an element
14
10
15
-
* <<organize-element,Move and arrange elements on your workpad>>
11
+
Choose the type of element you want to use, then connect it to your own data.
16
12
17
-
* <<element-save,Save your elements>>
13
+
. Click *Add element*, then select the element you want to use.
. To familiarize yourself with the element, use the preconfigured data demo data.
19
+
+
20
+
By default, most of the elements you create use demo data until you change the data source. The demo data includes a small data set that you can use to experiment with your element.
22
21
23
-
Choose the elements to display on your workpad, then familiarize yourself with the element using the preconfigured demo data. By default, most elements use demo data until you change the data source. The demo data includes a small sample data set that you can use to experiment with your element.
22
+
. To connect the element to your data, select *Data*, then select one of the following data sources:
24
23
25
-
To add a Canvas element:
24
+
* *{es} SQL* — Access your data in {es} using SQL syntax. For information about SQL syntax, refer to {ref}/sql-spec.html[SQL language].
26
25
27
-
. Click *Add element*.
26
+
* *{es} raw data* — Access your raw data in {es} without the use of aggregations. Use {es} raw data when you have low volume datasets, or to plot exact, non-aggregated values.
28
27
29
-
. In the *Elements* window, select the element you want to use.
* *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>>.
33
29
34
-
. Play around with the default settings and see what the element can do.
30
+
[float]
31
+
[[canvas-add-object]]
32
+
==== Add a saved object
35
33
36
-
To add a map:
34
+
Add a <<managing-saved-objects,saved object>>, such as a map or Lens visualization, then customize it to fit your display needs.
37
35
38
36
. Click *Embed object*.
39
37
40
-
. Select the map you want to add to the workpad.
38
+
. Select the object you want to add.
41
39
+
42
40
[role="screenshot"]
43
41
image::images/canvas-map-embed.gif[]
44
42
45
-
NOTE: Demo data is only supported on Canvas elements. Maps do not support demo data.
43
+
. To use the customization options, click the panel menu, then select one of the following options:
44
+
45
+
* *Edit map* — Opens <<maps,Maps>> so that you can edit the original map.
46
+
47
+
* *Customize panel* — Specifies the object title options.
46
48
47
-
Want to use a different element? You can delete the element by selecting it, clicking the *Element options* icon in the top right, then selecting *Delete*.
49
+
* *Inspect* — Allows you to drill down into the element data.
50
+
51
+
* *Customize time range* — Exposes a time filter dedicated to the map.
48
52
49
53
[float]
50
-
[[connect-element-data]]
51
-
=== Connect the Canvas element to your data
54
+
[[canvas-add-image]]
55
+
==== Add your own image
52
56
53
-
When you have finished using the demo data, connect the Canvas element to a data source.
57
+
To personalize your workpad, add your own logos and graphics.
54
58
55
-
NOTE: Maps do not support data sources. To change the map data, refer to <<maps, Elastic Maps>>.
59
+
. Click *Manage assets*.
56
60
57
-
. Make sure that the element is selected, then select *Data*.
61
+
. On the *Manage workpad assets* window, drag and drop your images.
58
62
59
-
. Click *Change your data source*.
63
+
. To add the image to the workpad, click the *Create image element* icon.
64
+
+
65
+
[role="screenshot"]
66
+
image::images/canvas-add-image.gif[]
60
67
61
68
[float]
62
-
[[elasticsearch-sql-data-source]]
63
-
==== Connect to {es} SQL
69
+
[[move-canvas-elements]]
70
+
==== Organize elements
71
+
72
+
Move and resize your elements to meet your design needs.
64
73
65
-
Access your data in {es} using SQL syntax. For information about SQL syntax, refer to {ref}/sql-spec.html[SQL language].
74
+
* To move, click and hold the element, then drag to the new location.
66
75
67
-
. Click *{es} SQL*.
76
+
* To move by 1 pixel, select the element, press and hold Shift, then use your arrow keys.
68
77
69
-
. In the *{es} SQL query* box, enter your query, then *Preview* it.
78
+
* To move by 10 pixels, select the element, then use your arrow keys.
70
79
71
-
. If everything looks correct, *Save* it.
80
+
* To resize, click and drag the resize handles to the new dimensions.
72
81
73
82
[float]
74
-
[[elasticsearch-raw-doc-data-source]]
75
-
==== Connect to {es} raw data
83
+
[[format-canvas-elements]]
84
+
==== Format elements
76
85
77
-
Access your raw data in {es} without the use of aggregations. Use {es} raw data when you have low volume datasets, or to plot exact, non-aggregated values.
86
+
Align, distribute, and reorder elements for consistency and readability across your workpad pages.
78
87
79
-
To use targeted queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
88
+
Access the align, distribute, and reorder options by clicking the *Element options* icon.
80
89
81
-
. Click *{es} raw documents*.
90
+
[role="screenshot"]
91
+
image::images/canvas_element_options.png[]
82
92
83
-
. In the *Index* field, enter the index pattern that you want to display.
93
+
To align elements:
84
94
85
-
. From the *Fields* dropdown, select the associated fields you want to display.
95
+
. Press and hold Shift, then select the elements you want to align.
86
96
87
-
. To sort the data, select an option from the *Sort Field* and *Sort Order* dropdowns.
97
+
. Click the , then select *Group*.
88
98
89
-
. For more targeted queries, enter a *Query* using the Lucene query string syntax.
99
+
. Click the *Element options* icon, then select *Alignment*.
90
100
91
-
. *Preview* the query.
101
+
. Select the alignment option.
92
102
93
-
. If your query looks correct, *Save* it.
103
+
To distribute elements:
94
104
95
-
[float]
96
-
[[timelion-data-source]]
97
-
==== Connect to Timelion
105
+
. Press and hold Shift, then select the elements you want to distribute.
98
106
99
-
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>>.
107
+
. Click the *Element options* icon, then select *Group*.
100
108
101
-
. Click *Timelion*.
109
+
. Click the *Element options* icon, then select *Distribution*.
102
110
103
-
. Enter a *Query* using the Lucene query string syntax.
111
+
. Select the distribution option.
104
112
105
-
. Enter the *Interval*, then *Preview* the query.
113
+
To reorder elements:
106
114
107
-
. If your query looks correct, *Save* it.
115
+
. Select the element you want to reorder.
108
116
109
-
[float]
110
-
[[configure-display-options]]
111
-
=== Choose the display options
117
+
. Click the *Element options* icon, then select *Order*.
112
118
113
-
Choose how you want the elements to appear on your workpad.
119
+
. Select the order option.
114
120
115
121
[float]
116
122
[[data-display]]
117
-
==== Specify how to display the data
118
-
119
-
When you connect your element to a data source, the element often appears as a warning. To remove the error, specify the display options.
123
+
==== Change the element display options
120
124
121
-
. Click *Display*
125
+
Each element has its own display options to fit your design needs.
122
126
123
-
. Change the display options for the element.
127
+
To choose the display options, click *Display*, then make your changes.
124
128
125
-
[float]
126
-
[[element-display-container]]
127
-
==== Change the appearance of the element container
128
-
129
-
Further define the appearance of the element container and border.
129
+
To define the appearance of the container and border:
130
130
131
131
. Next to *Element style*, click *+*, then select *Container style*.
132
132
133
133
. Expand *Container style*.
134
134
135
135
. Change the *Appearance* and *Border* options.
136
136
137
-
[float]
138
-
[[apply-element-styles]]
139
-
==== Apply a set of styles
140
-
141
-
To make your element look exactly the way you want, apply CSS overrides.
137
+
To apply CSS overrides:
142
138
143
139
. Next to *Element style*, click *+*, then select *CSS*.
144
140
145
141
. Enter the *CSS*. For example, to center the Markdown element, enter:
Increase or decrease how often your Canvas element data refreshes on your workpad.
161
-
162
-
. In the top left corner, click the *Control settings* icon.
163
-
164
-
. Under *Change auto-refresh interval*, select the interval you want to use.
165
-
+
166
-
[role="screenshot"]
167
-
image::images/canvas-refresh-interval.png[Element data refresh interval]
168
-
169
-
TIP: To manually refresh the data, click the *Refresh data* icon.
170
-
171
-
[float]
172
-
[[canvas-time-range]]
173
-
==== Customize map time ranges
174
-
175
-
Configure the maps on your workpad for a specific time range.
176
-
177
-
From the panel menu, select *Customize time range* to expose a time filter dedicated to the map.
178
-
179
-
[role="screenshot"]
180
-
image::images/canvas_map-time-filter.gif[]
181
-
182
-
[float]
183
-
[[organize-element]]
184
-
=== Organize the elements on your workpad
185
-
186
-
Choose where you want the elements to appear on your workpad.
187
-
188
-
[float]
189
-
[[move-canvas-elements]]
190
-
==== Move elements
191
-
192
-
Move the element to a preferred location on your workpad. As you move the element, notice the alignment lines that appear to help you place the element exactly where you want it.
193
-
194
-
* Click and drag the element to your preferred location.
195
-
196
-
* To move the element by 1 pixel, select the element, press and hold Shift, then use your arrow keys.
197
-
198
-
* To move the element by 10 pixels, select the element, then use your arrow keys.
199
-
200
-
[float]
201
-
[[resize-canvas-elements]]
202
-
==== Resize elements
153
+
[[save-elements]]
154
+
==== Save elements
203
155
204
-
Make your elements bigger or smaller than the default size.
156
+
To use the elements across all workpads, save the elements.
205
157
206
-
. Select the element.
207
-
208
-
. Click and drag the resize handles to the size you want.
209
-
210
-
[float]
211
-
[[align-canvas-elements]]
212
-
==== Align elements
158
+
When you're ready to save your element, select the element, then click the *Save as new element* icon.
213
159
214
-
Align two or more elements on your workpad.
215
-
216
-
. Press and hold Shift, then select the elements you want to align.
217
-
218
-
. Click the *Element options* icon in the top right corner, then select *Align elements*.
219
-
220
-
. From the *Alignment* menu, select how you want to align the elements on the workpad.
0 commit comments