diff --git a/docs/canvas/canvas-elements.asciidoc b/docs/canvas/canvas-elements.asciidoc index 4149039a3f87b1..9c7467bb452fd6 100644 --- a/docs/canvas/canvas-elements.asciidoc +++ b/docs/canvas/canvas-elements.asciidoc @@ -27,28 +27,30 @@ By default, most of the elements you create use demo data until you change the d * *Timelion* — Access your time series data using <> queries. To use Timelion queries, you can enter a query using the <>. +Each element can display a different data source. Pages and workpads often contain multiple data sources. + [float] [[canvas-add-object]] ==== Add a saved object -Add a <>, then customize it to fit your display needs. +Add <> to your workpad, such as maps and visualizations. -. Click *Embed object*. +. Click *Add element > Add from Visualize Library*. -. Select the object you want to add. +. Select the saved object 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: -* *Edit map* — Opens <> so that you can edit the original map. +* *Edit map* — Opens <> or <> so that you can edit the original saved object. -* *Customize panel* — Specifies the object title options. +* *Edit panel title* — Adds a title to the saved object. -* *Inspect* — Allows you to drill down into the element data. +* *Customize time range* — Exposes a time filter dedicated to the saved object. -* *Customize time range* — Exposes a time filter dedicated to the map. +* *Inspect* — Allows you to drill down into the element data. [float] [[canvas-add-image]] @@ -56,7 +58,7 @@ image::images/canvas-map-embed.gif[] To personalize your workpad, add your own logos and graphics. -. Click *Manage assets*. +. Click *Add element > Manage assets*. . On the *Manage workpad assets* window, drag and drop your images. @@ -83,40 +85,25 @@ Move and resize your elements to meet your design needs. [[format-canvas-elements]] ==== Format elements -Align, distribute, and reorder elements for consistency and readability across your workpad pages. - -Access the align, distribute, and reorder options by clicking the *Element options* icon. - -[role="screenshot"] -image::images/canvas_element_options.png[] +For consistency and readability across your workpad pages, align, distribute, and reorder elements. -To align elements: +To align two or more elements: . Press and hold Shift, then select the elements you want to align. -. Click the , then select *Group*. +. Click *Edit > Alignment*, then select the alignment option. -. Click the *Element options* icon, then select *Alignment*. - -. Select the alignment option. - -To distribute elements: +To distribute three or more elements: . Press and hold Shift, then select the elements you want to distribute. -. Click the *Element options* icon, then select *Group*. - -. Click the *Element options* icon, then select *Distribution*. - -. Select the distribution option. +. Click *Edit > Distribution*, then select the distribution option. To reorder elements: . Select the element you want to reorder. -. Click the *Element options* icon, then select *Order*. - -. Select the order option. +. Click *Edit > Order*, then select the order option. [float] [[data-display]] @@ -157,14 +144,14 @@ text.align: center; To use the elements across all workpads, save the elements. -When you're ready to save your element, select the element, then click the *Save as new element* icon. +When you're ready to save your 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, then select the elements you want to save. +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 access your saved elements, click *Add element*, then select *My elements*. +To access your saved elements, click *Add element > My elements*. [float] [[delete-elements]] @@ -174,9 +161,7 @@ When you no longer need an element, delete it from your workpad. . Select the element you want to delete. -. Click the *Element options* icon. +. Click *Edit > Delete*. + [role="screenshot"] image::images/canvas_element_options.png[] - -. Select *Delete*. diff --git a/docs/canvas/canvas-present-workpad.asciidoc b/docs/canvas/canvas-present-workpad.asciidoc index 9cd4ecc9519e15..e0139ab9431041 100644 --- a/docs/canvas/canvas-present-workpad.asciidoc +++ b/docs/canvas/canvas-present-workpad.asciidoc @@ -4,24 +4,20 @@ When you are ready to present your workpad, use and enable the presentation options. -[float] -[[view-fullscreen-mode]] -==== View your workpad in fullscreen mode +. Configure the autoplay options. -Click the *Enter fullscreen mode* icon. +.. From the workpad menu, click *View > Autoplay settings*. +.. Under *Change cycling interval*, select the interval you want to use, or *Set a custom interval*. ++ [role="screenshot"] -image::images/canvas-fullscreen.png[Fullscreen mode] - -[float] -[[enable-autoplay]] -==== Enable autoplay +image::images/canvas-autoplay-interval.png[Element autoplay interval] -Automatically cycle through your workpads pages in fullscreen mode. +. To enable autoplay, click *View > Turn autoplay on*. -. Click the *Control settings* icon. - -. Under *Change cycling interval*, select the interval you want to use. +. To start your presentation, click *View > Enter fullscreen mode*. + [role="screenshot"] -image::images/canvas-refresh-interval.png[Element data refresh interval] +image::images/canvas-fullscreen.png[Fullscreen mode] + +. When you are ready to exit fullscreen mode, press the Esc (Escape) key. diff --git a/docs/canvas/canvas-share-workpad.asciidoc b/docs/canvas/canvas-share-workpad.asciidoc index 5cae3fcc7b5319..a095253c6cff36 100644 --- a/docs/canvas/canvas-share-workpad.asciidoc +++ b/docs/canvas/canvas-share-workpad.asciidoc @@ -10,14 +10,12 @@ When you've finished your workpad, you can share it outside of {kib}. Create a JSON file of your workpad that you can export outside of {kib}. -. From your workpad, click the *Share workpad* icon. +Click *Share > Download as JSON*. -. Select *Download as JSON*. -+ [role="screenshot"] image::images/canvas-export-workpad.png[Export single workpad] -Want to export multiple workpads? Go to the *Canvas workpads* view, select the workpads you want to export, then click *Export*. +Want to export multiple workpads? Go to the *Canvas* home page, select the workpads you want to export, then click *Export*. [float] [[create-workpad-pdf]] @@ -25,69 +23,43 @@ Want to export multiple workpads? Go to the *Canvas workpads* view, select the w If you have a license that supports the {report-features}, you can create a PDF copy of your workpad that you can save and share outside {kib}. -For more information, refer to <>. - -. From your workpad, click the *Share workpad* icon, then select *PDF reports*. +Click *Share > PDF reports > Generate PDF*. -. Click *Generate PDF*. -+ [role="screenshot"] image::images/canvas-generate-pdf.gif[Generate PDF] +For more information, refer to <>. + [float] [[create-workpad-URL]] ==== Create a POST URL If you have a license that supports the {report-features}, you can create a POST URL that you can use to automatically generate PDF reports using Watcher or a script. -For more information, refer to <>. - -. From your workpad, click the *Share workpad* icon, then select *PDF reports*. +Click *Share > PDF reports > Copy POST URL*. -. Click *Copy POST URL*. -+ [role="screenshot"] image::images/canvas-create-URL.gif[Create POST URL] +For more information, refer to <>. + [float] [[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. To customize the behavior of the workpad on your website, you can choose to autoplay the pages or hide the workpad toolbar. -. From your workpad, click the *Share this workpad* icon, then select *Share on a website*. +. Click *Share > Share on a website*. -. On the *Share on a website* pane, follow the instructions. +. Follow the *Share on a website* instructions. . 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. + [role="screenshot"] -image::images/canvas-embed_workpad.gif[Share the workpad on a website] +image::canvas/images/canvas-embed_workpad.gif[Share the workpad on a website] + NOTE: Shareable workpads encode the current state of the workpad in a JSON file. When you make changes to the workpad, the changes do not appear in the shareable workpad on your website. -[float] -[[change-the-workpad-settings]] -==== Change the settings - -After you've added the workpad to your website, you can change the autoplay and toolbar settings. - -To change the autoplay settings: - -. Click the settings icon. - -. Click *Auto Play*, then change the settings. -+ -[role="screenshot"] -image::images/canvas_share_autoplay_480.gif[Autoplay settings] - -To change the toolbar settings: - -. Click the settings icon. - -. Click *Toolbar*, then change the settings. -+ -[role="screenshot"] -image::images/canvas_share_hidetoolbar_480.gif[Hide toolbar settings] +. To change the settings, click the settings icon, then choose the settings you want to use. diff --git a/docs/canvas/canvas-tutorial.asciidoc b/docs/canvas/canvas-tutorial.asciidoc index a38ab4a69598e0..9b23817de2767f 100644 --- a/docs/canvas/canvas-tutorial.asciidoc +++ b/docs/canvas/canvas-tutorial.asciidoc @@ -10,76 +10,64 @@ To get up and running with Canvas, use the following tutorial where you'll creat For this tutorial, you'll need to add the <>. [float] -=== Create and personalize your workpad +=== Create your workpad Your first step to working with Canvas is to create a workpad. -. Open *Canvas*. +. Open the menu, then click *Kibana > Canvas*. -. Click *Create workpad*. - -. To add a *Name* for your workpad, use the editor. For example, `My Canvas Workpad`. +. On the *Canvas workpads* page, click *Create workpad*. [float] === Customize your workpad with images To customize your workpad to look the way you want, add your own images. -. Click *Add element*, then click *Image*. +. Click *Add element > Image > Image*. + -The default Elastic logo image appears on your page. +The default Elastic logo image appears on the page. . To replace the Elastic logo with your own image, select the image, then use the editor. -. To move the image, click and drag it to your preferred location. - [role="screenshot"] image::images/canvas-image-element.png[] -You'll notice that the image is tagged as an asset, which allows you to reuse the image from *Manage assets*. - [float] === Customize your data with metrics Customize your data by connecting it to the Sample eCommerce orders data. -. Click *Add element*, then click *Metric*. +. Click *Add element > Chart > Metric*. + -By default, the *Metric* element is connected to a demo data source, which enables you to experiment with the element before you connect it to your own data source. - -. To connect the element to your own data source, make sure that the element is selected, then click *Data*. +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. -.. Click *Change your data source*, then click *Elasticsearch SQL*. +. To connect the element to your own data source, make sure that the element is selected, click *Data > Demo data > Elasticsearch SQL*. -.. In the *Elasticsearch SQL query* field, enter the following query: +.. In the *Query* field, enter the following: + `SELECT sum(taxless_total_price) AS sum_total_price FROM "kibana_sample_data_ecommerce"` -+ -The query selects the total price field and sets it to the sum_total_price field. These fields are pulled from the kibana_sample_data_ecommerce index that you installed. -.. To verify that the data is correct, click *Preview*. If you like what you see, click *Save*. +.. Click *Save*. + -At this point, the element displays an error. +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. -. Specify how to process and display the data. +. At this point, the element appears as an error, so you need to change the element display options. .. Click *Display* -.. Under *Number*, select *Value* from the function drop-down list, then select *sum_total_price* from the column drop-down list. +.. From the *Value* drop-down lists, make sure that *Unique* is selected, then select *sum_total_price*. .. Change the *Label* to `Total sales`. -+ -You'll notice that the error is gone, but the number 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*. + You're now looking at the raw data syntax that Canvas uses to display the element. -.. Look for `math "sum_total_price"`, then add `| formatNumber "$0a"`. +.. Change `metricFormat="0,0.[000]"` to `metricFormat="$0a"`. -.. To update the number, click *Run*. +.. Click *Run*. [role="screenshot"] image::images/canvas-metric-element.png[] @@ -89,21 +77,17 @@ image::images/canvas-metric-element.png[] To show what your data can do, add charts, graphs, progress monitors, and more to your workpad. -. Click *Add element*, then click *Area chart*. +. Click *Add element > Chart > Area*. -. To connect the element to your own data source, make sure that the element is selected, then click *Data*. +. Make sure that the element is selected, then click *Data > Demo data > Elasticsearch SQL*. -.. Click *Change your data source*, then click *Elasticsearch SQL*. - -.. To obtain the taxless total price by date, enter the following into the *Elasticsearch SQL query* field: +.. To obtain the taxless total price by date, enter the following in the *Query* field: + `SELECT order_date, taxless_total_price FROM "kibana_sample_data_ecommerce" ORDER BY order_date` -+ -Although you used the Elasticsearch SQL data source for the metric and area chart elements, each element can display a different data source. Pages and workpads often contain multiple data sources. -.. To verify that the data is correct, click *Preview*. If you like what you see, click *Save*. +.. Click *Save*. -. Specify how to display the data. +. Change the display options. .. Click *Display* @@ -117,34 +101,20 @@ image::images/canvas-chart-element.png[] [float] === Show how your data changes over time -To focus your data on a specific time range, add a time filter to your workpad. +To focus your data on a specific time range, add the time filter. -. Click *Add element*, then click *Time filter*. +. Click *Add element > Filter > Time filter*. -. Specify how to display the data. +. Click *Display* -.. Click *Display* - -.. To use the date time field from the sample data, enter `order_date` in the *Column* field, then click *Set*. +. To use the date time field from the sample data, enter `order_date` in the *Column* field, then click *Set*. [role="screenshot"] image::images/canvas-timefilter-element.png[] -To see how the data changes, set the time filter to *Last 7 days*. As you change the time filter options, the metrics dynamically update. - -Your workpad is now complete! From the workpad menu, use the icons to: - -* Configure the refresh rate for your data - -* Refresh the data that displays on your workpad - -* Display your workpad in fullscreen mode - -* Control the zoom options - -* Share your workpad +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. -* Hide the editing controls +Your workpad is now complete! [float] === Next steps diff --git a/docs/canvas/canvas-workpad.asciidoc b/docs/canvas/canvas-workpad.asciidoc index 42eedf55c404dc..ac2d3489201145 100644 --- a/docs/canvas/canvas-workpad.asciidoc +++ b/docs/canvas/canvas-workpad.asciidoc @@ -20,9 +20,7 @@ To create a workpad, choose one of the following options: To use the background colors, images, and data of your choice, start with a blank workpad. -. Open *Canvas*. - -. On the *Canvas workpads* view, click *Create workpad*. +. On the *Canvas workpads* page, click *Create workpad*. . Add a *Name* to your workpad. @@ -35,7 +33,7 @@ For example, click *720p* for a traditional presentation layout. . Click the *Background color* picker, then select the background color for your workpad. + [role="screenshot"] -image::images/canvas-background-color-picker.gif[Canvas color picker] +image::images/canvas-background-color-picker.png[Canvas color picker] [float] [[canvas-template-workpad]] @@ -43,9 +41,7 @@ image::images/canvas-background-color-picker.gif[Canvas color picker] If you're unsure about where to start, you can use one of the preconfigured templates that come with Canvas. -. Open *Canvas*. - -. On the *Canvas workpads* view, select *Templates*. +. On the *Canvas workpads* page, select *Templates*. . Click the preconfigured template that you want to use. @@ -57,9 +53,7 @@ If you're unsure about where to start, you can use one of the preconfigured temp When you want to use a workpad that someone else has already started, import the JSON file into Canvas. -. Open *Canvas*. - -. On the *Canvas workpads* view, click and drag the file to the *Import workpad JSON file* field. +To import a workpad, go to the *Canvas workpads* page, then click and drag the file to the *Import workpad JSON file* field. [float] [[sample-data-workpad]] @@ -96,23 +90,27 @@ background-color: #3990e6; [[configure-auto-refresh-interval]] === Change the auto-refresh interval -Increase or decrease how often the data refreshes on your workpad. +Change how often the data refreshes on your workpad. -. In the top left corner, click the *Control settings* icon. +. Click *View > Auto refresh settings*. -. Under *Change auto-refresh interval*, select the interval you want to use. +. Select the interval you want to use, or *Set a custom interval*. + [role="screenshot"] image::images/canvas-refresh-interval.png[Element data refresh interval] - -TIP: To manually refresh the data, click the *Refresh data* icon. ++ +To manually refresh the data, click image:canvas/images/canvas-refresh-data.png[]. [float] [[zoom-in-out]] === Use the zoom options -In the upper left corner, click the *Zoom controls* icon, then select one of the options. +To get a closer look at a portion of your workpad, use the zoom options. + +. Click *View > Zoom*. +. Select the zoom option. ++ [role="screenshot"] image::images/canvas-zoom-controls.png[Zoom controls] diff --git a/docs/canvas/images/canvas-embed_workpad.gif b/docs/canvas/images/canvas-embed_workpad.gif new file mode 100644 index 00000000000000..1cda5b572acefb Binary files /dev/null and b/docs/canvas/images/canvas-embed_workpad.gif differ diff --git a/docs/canvas/images/canvas-refresh-data.png b/docs/canvas/images/canvas-refresh-data.png new file mode 100644 index 00000000000000..7a71686f04491b Binary files /dev/null and b/docs/canvas/images/canvas-refresh-data.png differ diff --git a/docs/images/canvas-add-image.gif b/docs/images/canvas-add-image.gif index a2263e22c4c49f..994ec6e1b4f288 100644 Binary files a/docs/images/canvas-add-image.gif and b/docs/images/canvas-add-image.gif differ diff --git a/docs/images/canvas-add-pages.gif b/docs/images/canvas-add-pages.gif index a1fa2286458364..c6e09d6f386ae5 100644 Binary files a/docs/images/canvas-add-pages.gif and b/docs/images/canvas-add-pages.gif differ diff --git a/docs/images/canvas-autoplay-interval.png b/docs/images/canvas-autoplay-interval.png new file mode 100644 index 00000000000000..68a7ca248d9eeb Binary files /dev/null and b/docs/images/canvas-autoplay-interval.png differ diff --git a/docs/images/canvas-background-color-picker.png b/docs/images/canvas-background-color-picker.png new file mode 100644 index 00000000000000..ec38b5c1c5f7e8 Binary files /dev/null and b/docs/images/canvas-background-color-picker.png differ diff --git a/docs/images/canvas-chart-element.png b/docs/images/canvas-chart-element.png index d0aa7db375a408..bf5e04bf89af54 100644 Binary files a/docs/images/canvas-chart-element.png and b/docs/images/canvas-chart-element.png differ diff --git a/docs/images/canvas-create-URL.gif b/docs/images/canvas-create-URL.gif index 0c9fbf7201d808..11327224fc897b 100644 Binary files a/docs/images/canvas-create-URL.gif and b/docs/images/canvas-create-URL.gif differ diff --git a/docs/images/canvas-element-select.gif b/docs/images/canvas-element-select.gif index bd0e49377262e7..1bfd1132f25c7a 100644 Binary files a/docs/images/canvas-element-select.gif and b/docs/images/canvas-element-select.gif differ diff --git a/docs/images/canvas-export-workpad.png b/docs/images/canvas-export-workpad.png index fa910daf948d76..213bbaa5a26d35 100644 Binary files a/docs/images/canvas-export-workpad.png and b/docs/images/canvas-export-workpad.png differ diff --git a/docs/images/canvas-fullscreen.png b/docs/images/canvas-fullscreen.png index 7e6ec6ad7e7a83..b8a816d2903961 100644 Binary files a/docs/images/canvas-fullscreen.png and b/docs/images/canvas-fullscreen.png differ diff --git a/docs/images/canvas-generate-pdf.gif b/docs/images/canvas-generate-pdf.gif index 9ef16dc1e5017a..513f6b3b960f92 100644 Binary files a/docs/images/canvas-generate-pdf.gif and b/docs/images/canvas-generate-pdf.gif differ diff --git a/docs/images/canvas-image-element.png b/docs/images/canvas-image-element.png index f869ccb344a461..13c9090e77c760 100644 Binary files a/docs/images/canvas-image-element.png and b/docs/images/canvas-image-element.png differ diff --git a/docs/images/canvas-map-embed.gif b/docs/images/canvas-map-embed.gif index 59ef97e0ceae8e..c6ba5c29df42ab 100644 Binary files a/docs/images/canvas-map-embed.gif and b/docs/images/canvas-map-embed.gif differ diff --git a/docs/images/canvas-metric-element.png b/docs/images/canvas-metric-element.png index d9735a2fb3e919..03871dcc81862c 100644 Binary files a/docs/images/canvas-metric-element.png and b/docs/images/canvas-metric-element.png differ diff --git a/docs/images/canvas-refresh-interval.png b/docs/images/canvas-refresh-interval.png index 99006a5b8f12dd..62e88ad4bf7d04 100644 Binary files a/docs/images/canvas-refresh-interval.png and b/docs/images/canvas-refresh-interval.png differ diff --git a/docs/images/canvas-timefilter-element.png b/docs/images/canvas-timefilter-element.png index 8b8356ff5f7eaa..e210b0b3288c6a 100644 Binary files a/docs/images/canvas-timefilter-element.png and b/docs/images/canvas-timefilter-element.png differ diff --git a/docs/images/canvas-zoom-controls.png b/docs/images/canvas-zoom-controls.png index 892721b627027e..5c72d118041e4f 100644 Binary files a/docs/images/canvas-zoom-controls.png and b/docs/images/canvas-zoom-controls.png differ diff --git a/docs/images/canvas_element_options.png b/docs/images/canvas_element_options.png index 191348d919b50c..41457bab4ff368 100644 Binary files a/docs/images/canvas_element_options.png and b/docs/images/canvas_element_options.png differ diff --git a/docs/images/canvas_save_element.png b/docs/images/canvas_save_element.png index a63f5135f2a0ea..8a601efab874a8 100644 Binary files a/docs/images/canvas_save_element.png and b/docs/images/canvas_save_element.png differ diff --git a/docs/user/canvas.asciidoc b/docs/user/canvas.asciidoc index 98033c5a87f6f3..355684f7448a12 100644 --- a/docs/user/canvas.asciidoc +++ b/docs/user/canvas.asciidoc @@ -5,7 +5,7 @@ [partintro] -- -Canvas is a data visualization and presentation tool that sits within Kibana. With Canvas, you can pull live data directly from Elasticsearch, 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 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. With Canvas, you can: @@ -13,9 +13,7 @@ With Canvas, you can: * Customize your workpad with your own visualizations, such as images and text. -* Customize your data by pulling it directly from Elasticsearch. - -* Show off your data with charts, graphs, progress monitors, and more. +* Pull your data directly from Elasticsearch, then show it off with charts, graphs, progress monitors, and more. * Focus the data you want to display with filters.