2019-04-01 20:26:32 +02:00
[role="xpack"]
2019-08-21 23:12:22 +02:00
[[canvas-tutorial]]
2020-08-12 18:13:04 +02:00
== Tutorial: Create a workpad for monitoring sales
2018-11-08 20:50:51 +01:00
2021-03-16 17:21:35 +01:00
To familiarize yourself with *Canvas*, add the Sample eCommerce orders data, then use the data to create a workpad for monitoring sales at an eCommerce store.
2019-06-24 20:06:28 +02:00
[float]
2021-03-16 17:21:35 +01:00
=== Open and set up Canvas
2019-06-24 20:06:28 +02:00
2021-03-16 17:21:35 +01:00
To create a workpad of the eCommerce store data, add the data set, then create the workpad.
2019-06-24 20:06:28 +02:00
2021-07-26 17:17:44 +02:00
. Go to the {kib} *Home* page, then click *Try our sample data*.
2019-06-24 20:06:28 +02:00
2021-07-26 17:17:44 +02:00
. On the *Sample eCommerce orders data* card, click *Add data*.
2019-06-24 20:06:28 +02:00
2020-10-22 16:06:51 +02:00
. Open the main menu, then click *Canvas*.
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
. On the *Canvas workpads* page, click *Create workpad*.
2019-06-24 20:06:28 +02:00
[float]
=== Customize your workpad with images
To customize your workpad to look the way you want, add your own images.
2020-06-03 21:28:33 +02:00
. Click *Add element > Image > Image*.
2019-06-24 20:06:28 +02:00
+
2020-06-03 21:28:33 +02:00
The default Elastic logo image appears on the page.
2019-06-24 20:06:28 +02:00
2021-07-26 17:17:44 +02:00
. To add your own image, click the Elastic logo, then drag the image file to the *Select or drag and drop an image* field.
+
2018-11-08 20:50:51 +01:00
[role="screenshot"]
2020-09-28 17:53:38 +02:00
image::images/canvas-image-element.png[Image showing how to add the image element]
2019-06-24 20:06:28 +02:00
[float]
=== Customize your data with metrics
Customize your data by connecting it to the Sample eCommerce orders data.
2018-11-08 20:50:51 +01:00
2020-06-03 21:28:33 +02:00
. Click *Add element > Chart > Metric*.
2019-06-24 20:06:28 +02:00
+
2020-06-03 21:28:33 +02:00
By default, the element is connected to the demo data, which enables you to experiment with the element before you connect it to your own data source.
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
. To connect the element to your own data source, make sure that the element is selected, click *Data > Demo data > Elasticsearch SQL*.
2018-11-08 20:50:51 +01:00
2020-06-03 21:28:33 +02:00
.. In the *Query* field, enter the following:
2018-11-08 20:50:51 +01:00
+
2019-06-24 20:06:28 +02:00
`SELECT sum(taxless_total_price) AS sum_total_price FROM "kibana_sample_data_ecommerce"`
2020-06-03 21:28:33 +02:00
.. Click *Save*.
2019-06-24 20:06:28 +02:00
+
2020-06-03 21:28:33 +02:00
The query selects the total price field and sets it to the sum_total_price field. All fields are pulled from the kibana_sample_data_ecommerce index.
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
. At this point, the element appears as an error, so you need to change the element display options.
2019-06-24 20:06:28 +02:00
.. Click *Display*
2020-06-03 21:28:33 +02:00
.. From the *Value* drop-down lists, make sure that *Unique* is selected, then select *sum_total_price*.
2018-11-08 20:50:51 +01:00
2019-06-24 20:06:28 +02:00
.. Change the *Label* to `Total sales`.
2021-03-16 17:21:35 +01:00
. The error is gone, but the element could use some formatting. To format the number, use the *Canvas* expression language.
2019-06-24 20:06:28 +02:00
2020-04-09 19:42:30 +02:00
.. Click *Expression editor*.
2019-06-24 20:06:28 +02:00
+
You're now looking at the raw data syntax that Canvas uses to display the element.
2020-06-03 21:28:33 +02:00
.. Change `metricFormat="0,0.[000]"` to `metricFormat="$0a"`.
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
.. Click *Run*.
2019-06-24 20:06:28 +02:00
[role="screenshot"]
2020-09-28 17:53:38 +02:00
image::images/canvas-metric-element.png[Image showing changes to the Canvas workpad]
2019-06-24 20:06:28 +02:00
[float]
=== Show off your data with charts
To show what your data can do, add charts, graphs, progress monitors, and more to your workpad.
2020-06-03 21:28:33 +02:00
. Click *Add element > Chart > Area*.
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
. Make sure that the element is selected, then click *Data > Demo data > Elasticsearch SQL*.
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
.. To obtain the taxless total price by date, enter the following in the *Query* field:
2019-06-24 20:06:28 +02:00
+
`SELECT order_date, taxless_total_price FROM "kibana_sample_data_ecommerce" ORDER BY order_date`
2020-06-03 21:28:33 +02:00
.. Click *Save*.
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
. Change the display options.
2019-06-24 20:06:28 +02:00
.. Click *Display*
.. From the *X-axis* drop-down lists, select *Value*, then select *order_date*.
.. From the *Y-axis* drop-down lists, select *Value*, then select *taxless_total_price*.
[role="screenshot"]
2020-09-28 17:53:38 +02:00
image::images/canvas-chart-element.png[Image showing Canvas workpad with sample data graph]
2019-06-24 20:06:28 +02:00
[float]
=== Show how your data changes over time
2020-06-03 21:28:33 +02:00
To focus your data on a specific time range, add the time filter.
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
. Click *Add element > Filter > Time filter*.
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
. Click *Display*
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
. To use the date time field from the sample data, enter `order_date` in the *Column* field, then click *Set*.
2019-06-24 20:06:28 +02:00
[role="screenshot"]
2020-09-28 17:53:38 +02:00
image::images/canvas-timefilter-element.png[Image showing Canvas workpad with filtered sample data graph]
2019-06-24 20:06:28 +02:00
2020-06-03 21:28:33 +02:00
To see how the data changes, set the time filter to *Last 7 days*. As you change the time filter options, the elements automatically update.
2019-06-24 20:06:28 +02:00
2020-10-08 19:04:59 +02:00
Your workpad is complete!
2020-03-26 16:28:55 +01:00
2019-06-24 20:06:28 +02:00
[float]
2020-10-08 19:04:59 +02:00
=== What's next?
2021-03-16 17:21:35 +01:00
Now that you know the basics, you're ready to explore on your own.
2019-06-24 20:06:28 +02:00
Here are some things to try:
2020-03-26 16:28:55 +01:00
* Play with the {kibana-ref}/add-sample-data.html[sample Canvas workpads].
2019-06-24 20:06:28 +02:00
2020-10-08 19:04:59 +02:00
* Build presentations of your own data with <<create-workpads,workpads>>.
2018-11-08 20:50:51 +01:00
2021-03-16 17:21:35 +01:00
* Deep dive into the {kibana-ref}/canvas-function-reference.html[expression language and functions] that drive *Canvas*.