Improved flow

Author: rcastley

content/en/s4r/9-custom-dashboard/2-add-chart.md

@@ -19,7 +19,7 @@ In this section, we are going to use the **Copy and Paste** functionality to ext
 * Repeat the previous 4 steps for the **Request Rate** text chart
 * Click {{% button style="blue" %}}Save{{% /button %}} after you  have update the two charts.
 * As the new pasted charts appeared at the bottom of our dashboard, we need to re-organize our dashboard again.
-* Using the drag and drop and resizing skills you learnt earlier, make your dashboard look like the image below.
+* Using the drag and drop and resizing skills you learned earlier, make your dashboard look like the image below.
   ![New dashboard look](../images/copyandpastedcharts.png)
 {{% /notice %}}
 

content/en/s4r/9-custom-dashboard/3-custom-chart.md

@@ -11,24 +11,25 @@ In this part of the workshop we are going to create a chart that we will add to
 * At the top of the dashboard click on the **+** and select **Chart**.
   ![new chart screen](../images/new-chart.png)
 * First, use the {{% button style="grey" %}}Untitled chart{{% /button %}} input field and name the chart **Overall Test Duration**.
-* For this exercise we want a bar or column chart, so click on the 3d icon {{% icon icon="chart-bar" %}} ![column chart](../images/barchart-icon.png?classes=inline&height=25px)in the chart option box.
-* We need to provide a signal or metric that we are going to display. In this case, we want *synthetics.run.duration.time.ms* (This is runtime in duration for our test)
+* For this exercise we want a bar or column chart, so click on the 3rd icon {{% icon icon="chart-bar" %}} in the chart option box.
+* In the **Plot editor** enter `synthetics.run.duration.time.ms` (this is runtime in duration for our test) in the **Signal** box and hit enter.
 * Click the {{% button style="blue" %}}Add filter{{% /button %}} button.
-* Set the filter to successful ones by selecting *success:true*, the button now should contain that.
-* Right now we see different colored bars, a different color for each region the test runs from. As this in not needed we can change that behavior by adding some analytics.
+* Set the filter to successful ones by selecting `success:true`, the button now should contain that.
+* Right now we see different colored bars, a different color for each region the test runs from. As this is not needed we can change that behavior by adding some analytics.
 * Click the {{% button style="blue" %}}Add analytics{{% /button %}} button.
-* From the drop-down choose the **Mean** option, then pick **mean**:*aggregation* and click outside the dialog. the button should now say **Mean**, and the bars should now have the same color as the *Metrics* are now aggregated.
-* We now looking at the aggregated results of the tests instead of showing each region separately.
-* Lets change the time scale, click on the settings *⚙️* icon at the end of the plot line. It will open the following dialog.
-![signal setup](../images/signal-setup.png)
-* Change the *Display units* in the drop-down box from *None* to *Time (autoscaling)/Milliseconds(ms)*. The dropdown changes to *Millisecond* and the label in front of the chart should now represent **Time**.
-* Close the dialog, either clicking on the settings *⚙️* icon or the {{% button style="gray" %}}close{{% /button %}} button.
-* Add our detector by clicking {{% button style="blue" %}}Link Detector{{% /button %}} and typing the name of the detector. (Start with your initials, assuming you used the recommended naming method.) the detector name should appear. A colored bar appears around your chart, indicating the status of the alert, (Green OK, Red Alert), as well as a bell signal at the top of the page as shown below.
+* From the drop-down choose the **Mean** option, then pick `mean:aggregation` and click outside the dialog box. Notice how the chart changes to a single color as the metrics are now aggregated.
+* Change the time scale, click on the settings {{% icon icon="cog" %}} icon at the end of the plot line. It will open the following dialog:
+  ![signal setup](../images/signal-setup.png)
+* Change the **Display units** (**2**) in the drop-down box from **None** to **Time (autoscaling)/Milliseconds(ms)**. The drop-down changes to **Millisecond** and the x-axis of the chart now represents **Time**.
+* Close the dialog, either by clicking on the settings {{% icon icon="cog" %}} icon or the {{% button style="gray" %}}close{{% /button %}} button.
+* Add our detector by clicking {{% button style="blue" %}}Link Detector{{% /button %}} button and start typing the name of the detector you created earlier.
+* Click on the detector name to select it.
+* Notice that a colored border appears around the chart, indicating the status of the alert, along with a new bell icon at the top of the dashboard as shown below.
   ![detector added](../images/detector-added.png)
 * Click the {{% button style="blue" %}}Save and close{{% /button %}} button.
-* In our dashboard, move the charts so they look like the screenshot below:.
+* In the dashboard, move the charts so they look like the screenshot below:
   ![Service Health Dashboard](../images/service-health-dashboard.png)
-* As the last task, find the three dots **...** at the top of the page (next to *Event Overlay*) and click on *View fullscreen*. This will be the view you would use on the TV monitor on the wall (press Esc to go back). For TV monitors, setting the background color to black seems to work best.
+* For the final task, click three dots **...** at the top of the page (next to **Event Overlay**) and click on **View fullscreen**. This will be the view you would use on the TV monitor on the wall (press Esc to go back).
 
 {{% /notice %}}