(DOCSP-31714) [Charts] Order Data Tutorial. (#613)

* (DOCSP-31714) Updated steps 3 and 4.

* (DOCSP-31714) Updated steps 3 and 4.

* (DOCSP-31714) Updated steps 3 and 4.

* (DOCSP-31714) Updated screenshot

* (DOCSP-31714) Replaced {+charts+} with MongoDB Charts.

* (DOCSP-31714) Moved screenshot.

* (DOCSP-31714) Moved screenshot.

* (DOCSP-31714) Moved screenshot.

* (DOCSP-31714) Edit dashboard name

* (DOCSP-31714) Edits.

Author: eforeman-mdb

source/images/charts/order-tutorial-dashboard-stage1.png

@@ -14,16 +14,14 @@ ref: click-stacked-column
 level: 4
 content: |
 
-   a. In the :guilabel:`Chart Type` dropdown, select
-      :guilabel:`Column`.
+   In the :guilabel:`Chart Type` dropdown, select
+   :guilabel:`Stacked Column`.
 
-   b. Click :guilabel:`Stacked` below the dropdown.
+   To render a :ref:`stacked column <stacked-ref-example>` chart, 
+   MongoDB Charts creates a bar or column for each distinct value in the
+   :guilabel:`category` :ref:`encoding channel <encoding-channels>`
+   field.
 
-   .. example:: Column Chart
-
-      This chart renders a column for each store location's revenue.
-      Because there are six different store locations, the chart
-      will contain six columns.
 ---
 title: Add the desired fields to the proper encoding channels.
 ref: bar-chart-add-fields
@@ -32,67 +30,45 @@ content: |
 
    a. Drag the ``storeLocation`` property from the :guilabel:`Fields`
       section of the Chart Builder view to the :guilabel:`X Axis`
-      encoding channel. This tells MongoDB Charts to create a column
-      for each ``storeLocation`` value in the dataset.
-
-   #. In the :guilabel:`Fields` section click the ``items`` field to
-      expand the ``items`` object and view its properties.
+      encoding channel. 
+      
+      This tells MongoDB Charts to create a column for each ``storeLocation`` value in the dataset.
 
       .. note::
 
          MongoDB Charts infers the data type of each field and
          provides symbols to easily determine these data types when
-         building your chart. For example, the calendar icon next to
-         the ``saleDate`` field signifies that this field is a
-         timestamp. These symbols can help ensure your chart renders as
+         building your chart. These symbols can help ensure your chart renders as
          expected by using proper data types for each
          :ref:`encoding channel <encoding-channels>`.
+         For example, the calendar icon next to
+         the ``saleDate`` field signifies that this field is a
+         timestamp. 
 
-   #. Drag the ``items.price`` field to the :guilabel:`Y Axis`
-      encoding channel. The :guilabel:`Y Axis` encoding channel
-      determines which field to use for the chart's
-      :manual:`aggregation </aggregation>`.
+   #. In the :guilabel:`Fields` section click the ``items`` field to
+      expand the ``items`` object and view its properties.
 
-      .. example:: Aggregation
 
-         :manual:`Aggregation <aggregation>` processes data records
-         using a wide variety of methods and returns computed results
-         which may not be available in the original dataset. Because we
-         are interested in the total revenue from each store, we use
-         the ``items.price`` field here and will use an aggregation
-         operator which will allow us to add the ``items.price`` fields
-         together.
+   #. Drag the ``items.price`` field to the :guilabel:`Y Axis`
+      encoding channel. 
+      
+      This tells MongoDB Charts to use the ``items.price`` field 
+      for the chart's :manual:`aggregation </aggregation>`.
 
-   #. In the :guilabel:`Array Reductions` dropdown, select
+   #. In the :guilabel:`items` dropdown below :guilabel:`Array Reductions`, select
       :guilabel:`Unwind array`.
 
-      .. example:: Unwind array
-
-         Array reductions dictate how to process an array so
-         its elements  can be visualized. The :guilabel:`unwind array`
-         option creates a new document for each element in the array,
-         so each item's price is added to the total for that store.
-
-         For more information on unwinding arrays, refer to the
-         :manual:`unwind aggregation documentation </reference/operator/aggregation/unwind/>`.
+      Array reductions dictate how to process an array so
+      its elements can be visualized. 
+      The :manual:`unwind array </reference/operator/aggregation/unwind/>`
+      option creates a new document for each element in the array,
+      so each item's price is added to the total for that store.
 
    #. In the :guilabel:`Aggregate` dropdown, select :guilabel:`sum`.
 
-      .. example:: Sum
-
-         This option adds the prices of all items per store together to
-         display the chart. For more information on the ``$sum``
-         aggregation command, refer to the
-         :manual:`sum aggregation documentation </reference/operator/aggregation/sum/>`.
-
-   Your chart should now look something like this:
-
-   .. figure:: /images/charts/tutorial-stacked-bar-in-progress-2.png
-      :figwidth: 750px
-      :alt: Stacked Bar Chart Builder
-
-   Notice that the stores generating the most revenue are the
-   ``Denver`` and ``Seattle`` locations.
+      The :manual:`$sum aggregation operator </reference/operator/aggregation/sum/>` 
+      adds the prices of all items per store together to
+      display the chart.
 ---
 title: Title your chart.
 ref: bar-chart-add-title
@@ -109,15 +85,24 @@ content: |
          Total Sales ($) by Store Location
 
    #. Click the check mark to save your title.
+
+      Your chart should now look something like this:
+
+      .. figure:: /images/charts/tutorial-stacked-bar-in-progress-2.png
+         :figwidth: 750px
+         :alt: Stacked Bar Chart Builder
+
+      Notice that the stores generating the most revenue are the
+      ``Denver`` and ``Seattle`` locations.
 ---
 title: Click :guilabel:`Save and Close` at the top right of the chart
        builder view.
 ref: bar-chart-save-and-close
 level: 4
 content: |
 
-   You will be navigated back to your :guilabel:`Super Store Supply
-   Sales` dashboard and it should look something like this:
+   You will be navigated back to your :guilabel:`Super Supply Store
+   Orders` dashboard and it should look something like this:
 
    .. figure:: /images/charts/order-tutorial-dashboard-stage1.png
       :figwidth: 750px