[DOCS] Canvas updates for 7.12.0 (#94325) (#94724)

* [DOCS] Canvas updates for 7.12.0

* Fixes Visualize Library title
This commit is contained in:
Kaarina Tungseth 2021-03-16 11:31:15 -05:00 committed by GitHub
parent 56fe2be173
commit f10563fede
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 75 additions and 50 deletions

View file

@ -22,13 +22,13 @@ each element instead of updating them manually.
For example, to change the index pattern for a set of charts:
Specify the variable options.
. Specify the variable options.
+
[role="screenshot"]
image::images/specify_variable_syntax.png[Image describing how to specify the variable syntax]
Copy the variable, then apply it to each element you want to update in the *Expression editor*.
+
. Copy the variable, then apply it to each element you want to update in the *Expression editor*.
+
[role="screenshot"]
image::images/copy_variable_syntax.png[Image demonstrating expression editor]

View file

@ -20,7 +20,7 @@ image::images/canvas-autoplay-interval.png[Element autoplay interval]
[role="screenshot"]
image::images/canvas-fullscreen.png[Image showing how to enter fullscreen mode from view dropdown]
. When you are ready to exit fullscreen mode, press the Esc (Escape) key.
. When you are ready to exit fullscreen mode, press Esc.
[float]
[[zoom-in-out]]
@ -48,4 +48,4 @@ Change how often the data refreshes on your workpad.
[role="screenshot"]
image::images/canvas-refresh-interval.png[Element data refresh interval]
+
To manually refresh the data, click image:canvas/images/canvas-refresh-data.png[].
To manually refresh the data, click image:canvas/images/canvas-refresh-data.png[Canvas refresh data button].

View file

@ -23,7 +23,7 @@ Want to export multiple workpads? Go to the *Canvas* home page, select the workp
[[add-workpad-website]]
=== Share the workpad on a website
beta[] Canvas allows you to create _shareables_, which are workpads that you download and securely share on any website.
beta[] *Canvas* allows you to create _shareables_, which are workpads that you download and securely share on any website.
To customize the behavior of the workpad on your website, you can choose to autoplay the pages or hide the workpad toolbar.
. Click *Share > Share on a website*.
@ -32,7 +32,7 @@ To customize the behavior of the workpad on your website, you can choose to auto
. To customize the workpad behavior to autoplay the pages or hide the toolbar, use the inline parameters.
+
To make sure that your data remains secure, the data in the JSON file is not connected to {kib}. Canvas does not display elements that manipulate the data on the workpad.
To make sure that your data remains secure, the data in the JSON file is not connected to {kib}. *Canvas* does not display elements that manipulate the data on the workpad.
+
[role="screenshot"]
image::canvas/images/canvas-embed_workpad.gif[Image showing how to share the workpad on a website]

View file

@ -2,17 +2,16 @@
[[canvas-tutorial]]
== Tutorial: Create a workpad for monitoring sales
To get up and running with Canvas, add the Sample eCommerce orders data, then use the data to create a workpad for monitoring sales at an eCommerce store.
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.
[float]
=== Before you begin
=== Open and set up Canvas
For this tutorial, you'll need to add the <<add-sample-data, Sample eCommerce orders data>>.
To create a workpad of the eCommerce store data, add the data set, then create the workpad.
[float]
=== Create your workpad
. On the {kib} *Home* page, click *Try our sample data*.
Your first step to working with Canvas is to create a workpad.
. From *Sample eCommerce orders data*, click *Add data*.
. Open the main menu, then click *Canvas*.
@ -59,7 +58,7 @@ The query selects the total price field and sets it to the sum_total_price field
.. Change the *Label* to `Total sales`.
. The error is gone, but the element could use some formatting. To format the number, use the Canvas expression language.
. The error is gone, but the element could use some formatting. To format the number, use the *Canvas* expression language.
.. Click *Expression editor*.
+
@ -118,7 +117,7 @@ Your workpad is complete!
[float]
=== What's next?
Now that you know the Canvas basics, you're ready to explore on your own.
Now that you know the basics, you're ready to explore on your own.
Here are some things to try:
@ -126,4 +125,4 @@ Here are some things to try:
* Build presentations of your own data with <<create-workpads,workpads>>.
* Deep dive into the {kibana-ref}/canvas-function-reference.html[expression language and functions] that drive Canvas.
* Deep dive into the {kibana-ref}/canvas-function-reference.html[expression language and functions] that drive *Canvas*.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 200 KiB

View file

@ -5,31 +5,52 @@
[partintro]
--
Canvas is a data visualization and presentation tool that sits within {kib}. With Canvas, you can pull live data directly from {es}, and combine the data with colors, images, text, and your imagination to create dynamic, multi-page, pixel-perfect displays. If you are a little bit creative, a little bit technical, and a whole lot curious, then Canvas is for you.
*Canvas* is a data visualization and presentation tool that allows you to pull live data from {es},
then combine the data with colors, images, text, and your imagination to create dynamic, multi-page, pixel-perfect displays.
If you are a little bit creative, a little bit technical, and a whole lot curious, then *Canvas* is for you.
With Canvas, you can:
With *Canvas*, you can:
* Create and personalize your work space with backgrounds, borders, colors, fonts, and more.
* Customize your workpad with your own visualizations, such as images and text.
* Pull your data directly from Elasticsearch, then show it off with charts, graphs, progress monitors, and more.
* Pull your data directly from {es}, then show it off with charts, graphs, progress monitors, and more.
* Focus the data you want to display with filters.
To begin, open the main menu, then click *Canvas*.
[role="screenshot"]
image::images/canvas-gs-example.png[Getting started example]
For a quick overview of Canvas, watch link:https://www.youtube.com/watch?v=ZqvF_5-1xjQ[Stand out with Canvas].
++++
<iframe width="560" height="315"
src="https://www.youtube.com/embed/ZqvF_5-1xjQ"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</br>
++++
[float]
[[create-workpads]]
== Create workpads
A _workpad_ provides you with a space where you can build presentations of your live data. With Canvas,
you can create a workpad from scratch, start with a preconfigured workpad, import an existing workpad, or use a sample data workpad.
A _workpad_ provides you with a space where you can build presentations of your live data. You can create a workpad from scratch, start with a preconfigured workpad,
import an existing workpad, or use a sample data workpad.
[float]
[[canvas-minimum-requirements]]
=== Minimum requirements
To create workpads, you must meet the minimum requirements.
* If you need to set up {kib}, use https://www.elastic.co/cloud/elasticsearch-service/signup?baymax=docs-body&elektra=docs[our free trial].
* Make sure you have {ref}/getting-started-index.html[data indexed into {es}] and an <<index-patterns,index pattern>>.
* Have an understanding of {ref}/documents-indices.html[{es} documents and indices].
* Make sure you have sufficient privileges to create and save workpads. When the read-only indicator appears, you have insufficient privileges,
and the options to create and save workpads are unavailable. For more information, refer to <<xpack-security-authorization,Granting access to {kib}>>.
To open *Canvas*, open the main menu, then click *Canvas*.
[float]
[[start-with-a-blank-workpad]]
@ -54,7 +75,7 @@ image::images/canvas-background-color-picker.png[Canvas color picker]
[[create-workpads-from-templates]]
=== Create workpads from templates
If you're unsure about where to start, you can use one of the preconfigured templates that come with Canvas.
If you're unsure about where to start, you can use one of the preconfigured templates that come with *Canvas*.
. On the *Canvas workpads* page, select *Templates*.
@ -90,55 +111,60 @@ Create a story about your data by adding elements to your workpad that include i
[[create-elements]]
=== Create elements
Choose the type of element you want to use, then use the preconfigured demo data to familiarize yourself with the element. When you're ready, connect the element to your own data. 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.
To begin, click *Add element*, then select the element you want to use.
Choose the type of element you want to use, then use the preconfigured demo data to familiarize yourself with the element. When you're ready, connect the element to your own data.
By default, most of the elements you create use the 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.
. Click *Add element*, then select the element you want to use.
+
[role="screenshot"]
image::images/canvas-element-select.gif[Canvas elements]
When you're ready to connect the element to your data, select *Data*, then select one of the following data sources:
. To connect the element to your data, select *Data*, then select one of the following data sources:
* *{es} SQL* &mdash; Access your data in {es} using {ref}/sql-spec.html[SQL syntax].
* *{es} documents* &mdash; Access your data in {es} without using aggregations. To use, select an index and fields, and optionally enter a query using the <<lucene-query,Lucene Query Syntax>>. Use the *{es} documents* data source when you have low volume datasets, to view raw documents, or to plot exact, non-aggregated values on a chart.
* *Timelion* &mdash; Access your time series data using <<create-panels-with-timelion,Timelion>> queries. To use Timelion queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
* *{es} documents* &mdash; Access your data in {es} without using aggregations. To use, select an index and fields, and optionally enter a query using the <<lucene-query,Lucene Query Syntax>>.
Use the *{es} documents* data source when you have low volume datasets, to view raw documents, or to plot exact, non-aggregated values on a chart.
* *Timelion* &mdash; Access your time series data using <<create-panels-with-timelion,*Timelion*>> queries. To use *Timelion* queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
+
Each element can display a different data source, and pages and workpads often contain multiple data sources.
When you're ready to save your element, select the element, then click *Edit > Save as new element*.
. To save, use the following options:
* To save a single element, select the element, then click *Edit > Save as new element*.
+
[role="screenshot"]
image::images/canvas_save_element.png[]
To save a group of elements, press and hold Shift, select the elements you want to save, then click *Edit > Save as new element*.
* To save a group of elements, press and hold Shift, select the elements you want to save, then click *Edit > Save as new element*.
Elements are saved in *Add element > My elements*.
To access your saved elements, click *Add element > My elements*.
[float]
[[add-saved-objects]]
=== Add saved objects
[[add-kibana-visualizations]]
=== Add panels from the Visualize Library
Add <<managing-saved-objects,saved objects>> to your workpad, such as maps and visualizations.
Add a panel that you saved in *Visualize Library* to your workpad.
. Click *Add element > Add from {kib}*.
. Select the saved object you want to add.
. Select the panel you want to add.
+
[role="screenshot"]
image::images/canvas-map-embed.gif[]
. To use the customization options, click the panel menu, then select one of the following options:
. To use the customization options, open the panel menu, then select one of the following options:
* *Edit map* &mdash; Opens <<maps,Maps>> or a visualization builder so that you can edit the original saved object.
* *Edit map* &mdash; Opens <<maps,Maps>> so that you can edit the panel.
* *Edit panel title* &mdash; Adds a title to the saved object.
* *Edit visualization* &mdash; Opens the visualization editor so that you can edit the panel.
* *Customize time range* &mdash; Exposes a time filter dedicated to the saved object.
* *Edit panel title* &mdash; Allows you to change the panel title.
* *Inspect* &mdash; Allows you to drill down into the element data.
* *Customize time range* &mdash; Allows you to change the time filter dedicated to the panel.
* *Inspect* &mdash; Allows you to drill down into the panel data.
[float]
[[add-your-own-images]]