2018-11-08 20:50:51 +01:00
|
|
|
|
[[canvas-workpad]]
|
2018-12-05 22:02:44 +01:00
|
|
|
|
=== Using the workpad
|
2018-11-08 20:50:51 +01:00
|
|
|
|
|
2019-03-21 15:53:14 +01:00
|
|
|
|
Now that you have a workpad with sample data that you can mess with, let’s mess with it.
|
2018-11-09 20:31:01 +01:00
|
|
|
|
We’ll start out by making a few stylistic changes.
|
2018-11-08 20:50:51 +01:00
|
|
|
|
|
|
|
|
|
. Click the gauge chart in the top left of the workpad (fun fact, these are actually pie charts).
|
2018-11-09 20:31:01 +01:00
|
|
|
|
Try clicking on the small red slice. If you click the number, you'll notice that
|
2018-11-08 20:50:51 +01:00
|
|
|
|
you’ve actually selected a number element, not the gauge itself.
|
|
|
|
|
+
|
|
|
|
|
This element is now selected. Off to the right, you'll see that the side bar has changed.
|
|
|
|
|
This is where you can make changes to the element.
|
|
|
|
|
+
|
|
|
|
|
[role="screenshot"]
|
|
|
|
|
image::images/canvas_workpad_edit_style.png[]
|
|
|
|
|
|
|
|
|
|
. Try changing the color palette. Easy right? Click the Back button in your
|
|
|
|
|
browser to undo your change.
|
|
|
|
|
|
|
|
|
|
. Try dragging the chart around the page. Grab the resize handles to make
|
|
|
|
|
the chart bigger and smaller.
|
|
|
|
|
|
|
|
|
|
. Now click somewhere off of the element, but not on another element,
|
|
|
|
|
to deselect it.
|
|
|
|
|
+
|
|
|
|
|
You will notice the sidebar changing again. You now have
|
|
|
|
|
access to the page and workpad-level settings. Feel free to change the page
|
|
|
|
|
background color or rename your workpad.
|
|
|
|
|
|
|
|
|
|
Speaking of pages, Canvas workpads can have multiple pages.
|
|
|
|
|
|
2018-11-09 20:31:01 +01:00
|
|
|
|
. Click the arrow to the right of the *Page 1 of 2* text in the toolbar at the bottom
|
|
|
|
|
of the page. You'll see a whole new view of the the eCommerce data.
|
2018-11-08 20:50:51 +01:00
|
|
|
|
. Click the *Page 2 of 2* text to see a live preview of all of the pages in your
|
|
|
|
|
workpad.
|
|
|
|
|
. Click the (+) button to create a new, blank page.
|
|
|
|
|
. Click the *Add element* button in the top right hand corner of the page.
|
|
|
|
|
. Add an *Area Chart.*
|
|
|
|
|
+
|
|
|
|
|
[role="screenshot"]
|
|
|
|
|
image::images/canvas_workpad_3_page.png[]
|
|
|
|
|
|
2018-11-09 20:31:01 +01:00
|
|
|
|
You now have a three-page workpad, and a new element connected
|
2018-11-08 20:50:51 +01:00
|
|
|
|
to some demo data. Your next step is to wire your new element
|
2018-11-09 20:31:01 +01:00
|
|
|
|
up to some real data; you can click on the *Data* tab in the right sidebar menu
|
|
|
|
|
and click "Change your data source" to start working with your Elasticsearch data.
|
2018-11-08 20:50:51 +01:00
|
|
|
|
|
|
|
|
|
|