Skip to content

Commit 74a74d5

Browse files
committed
Formatting fixes
1 parent a99d3d5 commit 74a74d5

File tree

1 file changed

+4
-13
lines changed

1 file changed

+4
-13
lines changed

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

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ In this part of the workshop we are going to create a chart that we will add to
99
{{% notice title="Exercise" style="green" icon="running" %}}
1010

1111
* At the top of the dashboard click on the **+** and select *chart*. This will bring us to the new chart screen.
12-
13-
![new chart screen](../images/new-chart.png)
14-
12+
![new chart screen](../images/new-chart.png)
1513
* First, use the {{% button style="grey" %}}Untitled chart{{% /button %}} input field and name the chart **Overall Test Duration**. Next, you can set the Description to **Show the Synthetic Test for the complete application**.
1614
* For this exercise we want a bar or column chart, so click on the 3d icon ![column chart](../images/barchart-icon.png?classes=inline&height=25px)in the chart option box.
1715
* 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)
@@ -26,18 +24,11 @@ In this part of the workshop we are going to create a chart that we will add to
2624
* 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.
2725
* Close the dialog, either clicking on the settings *⚙️* icon or the {{% button style="gray" %}}close{{% /button %}} button.
2826
* 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.
29-
30-
![detector added](../images/detector-added.png)
31-
27+
![detector added](../images/detector-added.png)
3228
* Click the {{% button style="blue" %}}Save and close{{% /button %}} button.
33-
3429
* In our dashboard, size the *Log view* chart to be the last 50% of the page width and drag the new *Overall Test Duration* chart in front of it.
35-
36-
The result should be like this:
37-
![Service Health Dashboard](../images/service-health-dashboard.png)
38-
39-
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.
40-
(press Esc to go back) For TV monitors, setting the background color to black seems to work best.
30+
![Service Health Dashboard](../images/service-health-dashboard.png)
31+
* 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.
4132

4233
{{% /notice %}}
4334

0 commit comments

Comments
 (0)