IMPORTANT: No additional bug fixes or documentation updates will be released for this version. For the latest information, see the current release documentation.
« Create a workpad Present your workpad »
Elastic Docs ›Kibana Guide [7.5] ›Canvas

Showcase your data with elements

edit

Showcase your data with elements

edit

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.

When you add elements to your workpad, you can:

Add elements to your workpad

edit

Choose the elements to display on your workpad, then familiarize yourself with the element using the preconfigured demo data. By default, every element you add to a workpad uses 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.

  1. Click Add element.

  2. In the Elements window, select the element you want to use.

    Canvas elements
  3. Play around with the default settings and see what the element can do.

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.

Connect the element to your data

edit

When you have finished using the demo data, connect the element to a data source.

  1. Make sure that the element is selected, then select Data.
  2. Click Change your data source.

Connect to Elasticsearch SQL

edit

Access your data in Elasticsearch using SQL syntax. For information about SQL syntax, refer to SQL language.

  1. Click Elasticsearch SQL.
  2. In the Elasticsearch SQL query box, enter your query, then Preview it.
  3. If everything looks correct, Save it.

Connect to Elasticsearch raw data

edit

Access your raw data in Elasticsearch without the use of aggregations. Use Elasticsearch raw data when you have low volume datasets, or to plot exact, non-aggregated values.

To use targeted queries, you can enter a query using the Lucene Query Syntax.

  1. Click Elasticsearch raw documents.
  2. In the Index field, enter the index pattern that you want to display.
  3. From the Fields dropdown, select the associated fields you want to display.
  4. To sort the data, select an option from the Sort Field and Sort Order dropdowns.
  5. For more targeted queries, enter a Query using the Lucene query string syntax.
  6. Preview the query.
  7. If your query looks correct, Save it.

Connect to Timelion

edit

Access your time series data using Timelion queries. To use Timelion queries, you can enter a query using the Lucene Query Syntax.

  1. Click Timelion.
  2. Enter a Query using the Lucene query string syntax.
  3. Enter the Interval, then Preview the query.
  4. If your query looks correct, Save it.

Choose the display options

edit

Choose how you want the elements to appear on your workpad.

Specify how to display the data

edit

When you connect your element to a data source, the element often appears as a warning. To remove the error, specify the display options.

  1. Click Display
  2. Change the display options for the element.

Change the appearance of the element container

edit

Further define the appearance of the element container and border.

  1. Next to Element style, click +, then select Container style.
  2. Expand Container style.
  3. Change the Appearance and Border options.

Apply a set of styles

edit

To make your element look exactly the way you want, apply CSS overrides.

  1. Next to Element style, click +, then select CSS.

  2. Enter the CSS.

    For example, to center the Markdown element, enter:

    .canvasRenderEl h1 {
text.align: center;
}
  3. Click Apply stylesheet.

Change the data auto-refresh interval

edit

Increase or decrease how often your data refreshes on your workpad.

  1. In the top left corner, click the Control settings icon.

  2. Under Change auto-refresh interval, select the interval you want to use.

    Element data refresh interval

To manually refresh the data, click the Refresh data icon.

Organize the elements on your workpad

edit

Choose where you want the elements to appear on your workpad.

Move elements

edit

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.

  • Click and drag the element to your preferred location.
  • To move the element by 1 pixel, select the element, press and hold Shift, then use your arrow keys.
  • To move the element by 10 pixels, select the element, then use your arrow keys.

Resize elements

edit

Make your elements bigger or smaller than the default size.

  1. Select the element.
  2. Click and drag the resize handles to the size you want.

Align elements

edit

Align two or more elements on your workpad.

  1. Press and hold Shift, then select the elements you want to align.
  2. Click the Element options icon in the top right corner, then select Align elements.

  3. From the Alignment menu, select how you want to align the elements on the workpad.

    Align elements

Distribute elements

edit

Distribute three or more elements on your workpad.

  1. Press and hold Shift, then select the elements you want to distribute.
  2. Click the Element options icon in the top right corner, then select Distribute elements.

  3. From the Distribution menu, select how you want to distribute the elements on the workpad.

    Distribute elements

Change the element order

edit

Change the order of how the elements are displayed on your workpad.

  1. Select an element.
  2. In the top right corder, click the Element options icon.
  3. Select Order, then select the order that you want the element to appear.

Use the zoom options

edit

In the upper left corner, click the Zoom controls icon, then select one of the options.

Zoom controls

Save elements

edit

After you have made changes to elements, save them so that you can reuse them across all of your workpads.

  1. Select the element that you want to save.

    To save a group of elements, press and hold Shift, then select the elements you want to save.

  2. Click the Save as new element icon.
  3. In the Create new element window, enter a Name.
  4. Enter an optional Description, then click Save.
  5. To access the element, click Add element, then select My elements.

Add pages

edit

When you have run out of room on your workpad page, add more pages.

  1. Click Page 1, then click +.

  2. On the Page editor panel on the right, select the page transition from the Transition dropdown.

    Add pages
« Create a workpad Present your workpad »