[DOCS] Cherry-picks the Canvas GS to 7.x (#39733)

* [DOCS] Canvas Getting Started

* Area chart content

* Time filter content

* Intro, image, and clean up

* Removed extra spaces

* Comments from Rashmi and Bhavya

* Comments from Tim

* Comments from Gail and Ryan

docs/canvas.asciidoc

@@ -6,26 +6,25 @@
 [partintro]
 --
 
-Congratulations on finding the Canvas application in {kib}. You are in for a treat. 
-Canvas is a whole new way of making data look amazing. Canvas combines data with 
-colors, shapes, text, and your own imagination to bring dynamic, multi-page, 
-pixel-perfect, data displays to screens large and small. 
+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. 
 
-We made Canvas for people like us. We figure, you are probably people like us: 
-you make neat stuff and you want to show that neat stuff to others. Canvas is 
-for makers who are a little bit creative, a little bit technical, and whole lot 
-of curious.
+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.
+
+* Customize your data by pulling it directly from Elasticsearch. 
+
+* Show off your data with charts, graphs, progress monitors, and more.
+
+* Focus the data you want to display with filters.
 
 [role="screenshot"]
-image::images/canvas_workpad_weblog.png[]
+image::images/canvas-gs-example.png[]
 
-
-We've put together <<canvas-getting-started, this Getting Started>> to get you
-up and running with Canvas. 
-
-If you want to dig into the expression language and the functions that drive 
-Canvas, see the <<canvas-common-functions>> and 
-<<canvas-tinymath-functions>>.
+For a quick overview of Canvas, watch link:https://www.youtube.com/watch?v=ZqvF_5-1xjQ[Stand out with Canvas].
+//When https://github.com/elastic/Video/issues/358 is resolved, update this link.
 
 --
 

docs/canvas/canvas-getting-started.asciidoc

@@ -2,31 +2,161 @@
 [[canvas-getting-started]]
 == Getting started with Canvas
 
-Your best bet to getting started with Canvas is to check out one 
-(or all) of the sample data sets that ship with {kib}. 
+To get up and running with Canvas, use the following tutorial where you'll create a display for monitoring sales at an eCommerce store.
 
-. Click the {kib} logo in the upper left hand corner of your browser to navigate 
-to the {kib} home page.
-. Click *Load a data set and a Kibana dashboard*. This also loads a 
-Canvas workpad to go with the data set.
-. Pick a data set. Let’s go with the eCommerce one for this example, but while you're 
-here, feel free to click *Add* on all of the available sample data sets.
-. Click the Canvas icon in the left hand navigation menu.
-. Find the *[eCommerce] Revenue Tracking* workpad and click on its name to open it.
+[float]
+=== Before you begin
+
+For this tutorial, you'll need to add the {kibana-ref}/add-sample-data.html[Sample eCommerce orders data].
+
+[float]
+=== Create and personalize your workpad
+
+Your first step to working with Canvas is to create a workpad. 
+
+. Open *Canvas*.
+
+. Click *Create workpad*.
+
+. To add a *Name* for your workpad, use the editor on the right. For example, `My Canvas 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*.
++
+The default Elastic logo image appears on your page.
+
+. To replace the Elastic logo with your own image, select the image, then use the editor on the right.
+
+. To move the image, click and drag it to your preferred location.
 
 [role="screenshot"]
-image::images/canvas-ecommerce.png[]
+image::images/canvas-image-element.png[]
 
-You’re in! The first thing to do is to make a copy of this 
-workpad so you can come back to it later if needed. We’ll be making a mess 
-of it in this tutorial. 
+You'll notice that the image is tagged as an asset, which allows you to reuse the image from *Manage assets*.
 
-. Click the name of the workpad in the lower left hand corner. 
+TIP: Want to delete an element? Select the element, then press the delete button on your keyboard.
+
+[float]
+=== Customize your data with metrics
+
+Customize your data by connecting it to the Sample eCommerce orders data.
+
+. Click *Add element*, then click *Metric*. 
 +
-You’ll notice this is similar to the first screen. You could switch to a new 
-workpad from here, but let's not for now.
+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.
 
-. Click the *Clone* icon in the *[eCommerce] Revenue Tracking* row.
+. To connect the element to your own data source, make sure that the element is selected, then click *Data*.
+
+.. Click *Change your data source*, then click *Elasticsearch SQL*.
+
+.. In the *Elasticsearch SQL query* field, enter the following query:
 +
-You now have a new workpad called *[eCommerce] Revenue Tracking - Copy*.
+`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*.
++
+At this point, the element displays an error.
+
+. Specify how to process and display the data.
+
+.. Click *Display*
+
+.. Under *Number*, select *Value* from the function drop-down list, then select *sum_total_price* from the column drop-down list.
+
+.. 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.
+
+.. In the lower right corner, 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"`.
+
+.. To update the number, click *Run*.
+
+[role="screenshot"]
+image::images/canvas-metric-element.png[]
+
+[float]
+=== Show off your data with charts
+
+To show what your data can do, add charts, graphs, progress monitors, and more to your workpad.
+
+. Click *Add element*, then click *Area chart*. 
+
+. To connect the element to your own data source, make sure that the element is selected, then click *Data*.
+
+.. 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:
++
+`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*.
+
+. Specify how to display the data.
+
+.. 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"]
+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. 
+
+. Click *Add element*, then click *Time filter*.
+
+. Specify how to display the data.
+
+.. Click *Display*
+
+.. 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! Use the icons in the upper left corner to:
+
+* Display your workpad in fullscreen mode
+
+* Download your workpad as a PDF report or JSON object
+
+* Configure the refresh rate for your data
+
+* Share your workpad
+
+[float]
+=== Next steps
+Now that you know the Canvas basics, you're ready to explore on your own. 
+
+Here are some things to try:
+
+* Play with the {kibana-ref}/add-sample-data.html[sample Canvas workpads]. 
+
+//* Learn more about:
+
+//** {kibana-ref}/canvas-workpad[Workpads]
+//** Assets
+//** Data sources
+//** Elements
+
+* Deep dive into the {kibana-ref}/canvas-function-reference.html[expression language and functions] that drive Canvas.