Skip to content

Commit b81ec7f

Browse files
ShawnJacksonShawnJackson
authored
Merge pull request #203576 from paulth1/graph-map-honey-comb-composite-bar-templates
edit pass: Graph map honey comb composite bar templates
2 parents 787528f + 3ddc0cd commit b81ec7f

File tree

5 files changed

+395
-369
lines changed

5 files changed

+395
-369
lines changed

‎articles/azure-monitor/visualize/workbooks-composite-bar.md

Lines changed: 120 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
title: Azure Monitor workbook composite bar renderer
3-
description: Learn about all the Azure Monitor workbook Composite Bar Renderer visualization.
2+
title: Azure Workbooks composite bar renderer
3+
description: Learn about all the Azure Workbooks composite bar renderer visualizations.
44
services: azure-monitor
55
ms.workload: tbd
66
ms.tgt_pltfrm: ibiza
@@ -10,179 +10,181 @@ ms.date: 07/05/2022
1010

1111
# Composite bar renderer
1212

13-
Workbook allows rendering data using composite bar, a bar made up of multiple bars.
13+
With Azure Workbooks, data can be rendered by using the composite bar. This bar is made up of multiple bars.
1414

15-
The image below shows the composite bar for database status representing how many servers are online, offline, and in recovering state.
15+
The following image shows the composite bar for database status. It shows how many servers are online, offline, and in a recovering state.
1616

17-
![Screenshot of composite bar for database status.](./media/workbooks-composite-bar/database-status.png)
17+
![Screenshot that shows the composite bar for database status.](./media/workbooks-composite-bar/database-status.png)
1818

19-
Composite bar renderer is supported for grids, tiles, and graphs visualizations.
19+
The composite bar renderer is supported for grid, tile, and graph visualizations.
2020

21-
## Adding composite bar renderer
21+
## Add the composite bar renderer
2222

23-
1. Switch the workbook to edit mode by selecting **Edit** in the toolbar.
24-
2. Select **Add** and then **Add query**.
25-
3. Set *Data source* to "JSON" and *Visualization* to "Grid".
26-
4. Add the following JSON data.
23+
1. Switch the workbook to edit mode by selecting **Edit**.
24+
1. Select **Add** > **Add query**.
25+
1. Set **Data source** to `JSON` and set **Visualization** to `Grid`.
26+
1. Add the following JSON data:
2727

28-
```json
29-
[
30-
{"sub":"X", "server": "A", "online": 20, "recovering": 3, "offline": 4, "total": 27},
31-
{"sub":"X", "server": "B", "online": 15, "recovering": 8, "offline": 5, "total": 28},
32-
{"sub":"Y", "server": "C", "online": 25, "recovering": 4, "offline": 5, "total": 34},
33-
{"sub":"Y", "server": "D", "online": 18, "recovering": 6, "offline": 9, "total": 33}
34-
]
35-
```
28+
```json
29+
[
30+
{"sub":"X", "server": "A", "online": 20, "recovering": 3, "offline": 4, "total": 27},
31+
{"sub":"X", "server": "B", "online": 15, "recovering": 8, "offline": 5, "total": 28},
32+
{"sub":"Y", "server": "C", "online": 25, "recovering": 4, "offline": 5, "total": 34},
33+
{"sub":"Y", "server": "D", "online": 18, "recovering": 6, "offline": 9, "total": 33}
34+
]
35+
```
3636

37-
5. Run query.
38-
6. Select **Column Settings** to open the settings.
39-
7. Select "total" from *Columns* and choose "Composite Bar" for *Column renderer*.
40-
8. Set the following settings under *Composite Bar Settings*.
37+
1. Run the query.
38+
1. Select **Column Settings** to open the settings pane.
39+
1. Under **Columns**, select `total`. For **Column renderer**, select `Composite Bar`.
40+
1. Under **Composite Bar Settings**, set the following settings:
4141

42-
| Column Name | Color |
43-
|-------------|--------------|
44-
| online | Green |
45-
| recovering | Yellow |
46-
| offline | Red (Bright) |
42+
| Column Name | Color |
43+
|-------------|--------------|
44+
| online | Green |
45+
| recovering | Yellow |
46+
| offline | Red (Bright) |
4747

48-
9. Add Label:`["online"] of ["total"] are healthy`
49-
10. In the column settings for online, offline, and recovering you can set column renderer to "Hidden" (Optional).
50-
11. Select *Labels* at the top and update label for the total column as "Database Status" (Optional).
51-
12. Select on **Apply**
48+
1. For **Label**, enter `["online"] of ["total"] are healthy`.
49+
1. In the column settings for **online**, **offline**, and **recovering**, you can set **Column renderer** to `Hidden` (optional).
50+
1. Select the **Labels** tab and update the label for the total column as `Database Status` (optional).
51+
1. Select **Apply**.
5252

53-
The composite bar settings will look like the screenshot below:
53+
The composite bar settings will look like the following screenshot:
5454

55-
![Screenshot of composite bar column settings with settings described above.](./media/workbooks-composite-bar/composite-bar-settings.png)
55+
![Screenshot that shows composite bar column settings with the preceding settings.](./media/workbooks-composite-bar/composite-bar-settings.png)
5656

57-
The composite bar with the settings above:
57+
The composite bar with the preceding settings:
5858

59-
![Screenshot of composite bar.](./media/workbooks-composite-bar/composite-bar.png)
59+
![Screenshot that shows the composite bar.](./media/workbooks-composite-bar/composite-bar.png)
6060

6161
## Composite bar settings
6262

63-
Select column name and corresponding color to render that column in that color as a part of composite bar. You can insert, delete, and move rows up and down.
63+
Select the column name and corresponding color to render the column in that color as part of a composite bar. You can insert, delete, and move rows up and down.
6464

6565
### Label
6666

67-
Composite bar label is displayed at the top of the composite bar. You can use a mix of static text, columns, and parameter. If Label is empty, the value of the current columns is displayed as the label. In the previous example if we left the label field black the value of total columns would be displayed.
67+
The composite bar label is displayed at the top of the composite bar. You can use a mix of static text, columns, and parameters. If **Label** is empty, the value of the current columns is displayed as the label. In the previous example, if we left the **Label** field blank, the value of total columns would be displayed.
6868

6969
Refer to columns with `["columnName"]`.
7070

7171
Refer to parameters with `{paramName}`.
7272

73-
Both column name and parameter name are case sensitive. You can also make labels a link by selecting "Make this item as a link" and then add link settings.
73+
Both the column name and parameter name are case sensitive. You can also make labels a link by selecting **Make this item a link** and then adding link settings.
7474

7575
### Aggregation
7676

77-
Aggregations are useful for Tree/Group By visualizations. The data for a column for the group row is decided by the aggregation set for that column. There are three types of aggregations applicable for composite bars: None, Sum, and Inherit.
77+
Aggregations are useful for Tree/Group By visualizations. The data for a column for the group row is decided by the aggregation set for that column. Three types of aggregations are applicable for composite bars: None, Sum, and Inherit.
7878

7979
To add Group By settings:
8080

8181
1. In column settings, go to the column you want to add settings to.
82-
2. In *Tree/Group By Settings* under *Tree type*, select **Group By**
83-
3. Select the field you would like to group by.
82+
1. In **Tree/Group By Settings**, under **Tree type**, select **Group By**.
83+
1. Select the field you want to group by.
8484

85-
![Screenshot of group by settings.](./media/workbooks-composite-bar/group-by-settings.png)
85+
![Screenshot that shows Group By settings.](./media/workbooks-composite-bar/group-by-settings.png)
8686

8787
#### None
8888

89-
None aggregation means display no results for that column for the group rows.
89+
The setting of **None** for aggregation means that no results are displayed for that column for the group rows.
9090

91-
![Screenshot of composite bar with none aggregation.](./media/workbooks-composite-bar/none.png)
91+
![Screenshot that shows the composite bar with the None setting for aggregation.](./media/workbooks-composite-bar/none.png)
9292

9393
#### Sum
9494

95-
If aggregation is set as Sum, then the column in the group row will show the composite bar by using the sum of the columns used to render it. The label will also use the sum of the columns referred in it.
95+
If aggregation is set as **Sum**, the column in the group row shows the composite bar by using the sum of the columns used to render it. The label will also use the sum of the columns referred to in it.
9696

97-
In the example below the online, offline, and recovering all have max aggregation set to them and the aggregation for the total column is sum.
97+
In the following example, **online**, **offline**, and **recovering** all have max aggregation set to them and the aggregation for the total column is **Sum**.
9898

99-
![Screenshot of composite bar with sum aggregation.](./media/workbooks-composite-bar/sum.png)
99+
![Screenshot that shows the composite bar with the Sum setting for aggregation.](./media/workbooks-composite-bar/sum.png)
100100

101101
#### Inherit
102102

103-
If aggregation is set as inherit, then the column in the group row will show the composite bar by using the aggregation set by users for the columns used to render it. The columns used in label also use the aggregation set by the user. If the current column renderer is composite bar and is refereed in the label (like "total" in the example above), then sum is used as the aggregation for that column.
103+
If aggregation is set as **Inherit**, the column in the group row shows the composite bar by using the aggregation set by users for the columns used to render it. The columns used in **Label** also use the aggregation set by the user. If the current column renderer is **Composite Bar** and is referred to in the label (like **total** in the preceding example), then **Sum** is used as the aggregation for that column.
104104

105-
In the example below, the online, offline, and recovering all have max aggregation set to them and the aggregation for total column is inherit.
105+
In the following example, **online**, **offline**, and **recovering** all have max aggregation set to them and the aggregation for total column is **Inherit**.
106106

107-
![Screenshot of composite bar with inherit aggregation.](./media/workbooks-composite-bar/inherit.png)
107+
![Screenshot that shows the composite bar with the inherit setting for aggregation.](./media/workbooks-composite-bar/inherit.png)
108108

109109
## Sorting
110110

111-
For grid visualizations, the sorting of the rows for the column with the composite bar renderer works based on the value that is the sum of the columns used to render the composite bar computer dynamically. In the previous examples, the value used for sorting is the sum of the online, recovering, and the offline columns for that particular row.
112-
113-
## Tiles visualization
114-
115-
1. Select **Add** and *add query*.
116-
2. Change the data source to JSON enter the data from the [previous example](#adding-composite-bar-renderer).
117-
3. Change visualization to *Tiles*.
118-
4. Run query.
119-
5. Select **Tile Settings**.
120-
6. Select *Left* in Tile fields.
121-
7. Enter the settings below under *Field Settings*.
122-
1. Use column: "server".
123-
2. Column renderer: "Text".
124-
8. Select *Bottom* in Tile fields.
125-
9. Enter the settings below under *Field Settings*.
126-
1. Use column: "total".
127-
2. Column renderer: "Composite Bar".
128-
3. Enter Set the following settings under "Composite Bar Settings".
129-
130-
| Column Name | Color |
131-
|-------------|--------------|
132-
| online | Green |
133-
| recovering | Yellow |
134-
| offline | Red (Bright) |
135-
136-
4. Add Label:`["online"] of ["total"] are healthy`.
137-
10. Select **Apply**.
111+
For grid visualizations, the sorting of the rows for the column with the composite bar renderer works based on the value that's the sum of the columns used to render the composite bar computer dynamically. In the previous examples, the value used for sorting is the sum of the **online**, **recovering**, and **offline** columns for that particular row.
112+
113+
## Tile visualizations
114+
115+
To make a composite bar renderer for a tile visualization:
116+
117+
1. Select **Add** > **Add query**.
118+
1. Change the data source to `JSON`. Enter the data from the [previous example](#add-the-composite-bar-renderer).
119+
1. Change **Visualization** to `Tiles`.
120+
1. Run the query.
121+
1. Select **Tile Settings**.
122+
1. Under **Tile fields**, select **Left**.
123+
1. Under **Field settings**, set the following settings:
124+
1. **Use column**: `server`
125+
1. **Column renderer**: `Text`
126+
1. Under **Tile fields**, select **Bottom**.
127+
1. Under **Field settings**, set the following settings:
128+
1. **Use column**: `total`
129+
1. **Column renderer**: `Composite Bar`
130+
1. Under **Composite Bar Settings**, set the following settings:
131+
132+
| Column Name | Color |
133+
|-------------|--------------|
134+
| online | Green |
135+
| recovering | Yellow |
136+
| offline | Red (Bright) |
137+
138+
1. For **Label**, enter `["online"] of ["total"] are healthy`.
139+
1. Select **Apply**.
138140

139141
Composite bar settings for tiles:
140142

141-
![Screenshot of composite bar tile settings with settings described above.](./media/workbooks-composite-bar/tiles-settings.png)
142-
143-
The Composite bar view for Tiles with the above settings will look like this:
144-
145-
![Screenshot of composite bar tiles.](./media/workbooks-composite-bar/composite-bar-tiles.png)
146-
147-
## Graphs visualization
148-
149-
To make a composite bar renderer for Graphs visualization (type Hive Clusters), follow the instructions below.
150-
151-
1. Select **Add** and *add query*.
152-
2. Change the data source to JSON enter the data from the [previous example](#adding-composite-bar-renderer).
153-
3. Change visualization to *Graphs*.
154-
4. Run query.
155-
5. Select **Graph Settings**.
156-
6. Select *Center Content* in Node Format Settings.
157-
7. Enter the settings below under *Field Settings*.
158-
1. Use column: "total".
159-
2. Column renderer: "Composite Bar".
160-
3. Enter the following settings under *Composite Bar Settings*.
161-
162-
|Column Name | Color |
163-
|-------------|--------------|
164-
| online | Green |
165-
| recovering | Yellow |
166-
| offline | Red (Bright) |
167-
168-
4. Add Label:`["online"] of ["total"] are healthy`.
169-
9. Enter the settings below under *Layout Settings*.
170-
1. Graph Type: **Hive Clusters**.
171-
2. Node ID select: "server".
172-
3. Group By Field: "None".
173-
4. Node Size: 100.
174-
5. Margin between hexagons: 5.
175-
6. Coloring Type type: **None**.
143+
![Screenshot that shows composite bar tile settings with the preceding settings.](./media/workbooks-composite-bar/tiles-settings.png)
144+
145+
The composite bar view for tiles with the preceding settings will look like this example:
146+
147+
![Screenshot that shows composite bar tiles.](./media/workbooks-composite-bar/composite-bar-tiles.png)
148+
149+
## Graph visualizations
150+
151+
To make a composite bar renderer for a graph visualization (type Hive Clusters):
152+
153+
1. Select **Add** > **Add query**.
154+
2. Change **Data source** to `JSON`. Enter the data from the [previous example](#add-the-composite-bar-renderer).
155+
1. Change **Visualization** to `Graphs`.
156+
1. Run the query.
157+
1. Select **Graph Settings**.
158+
1. Under **Node Format Settings**, select **Center Content**.
159+
1. Under **Field settings**, set the following settings:
160+
1. **Use column**: `total`
161+
1. **Column renderer**: `Composite Bar`
162+
1. Under **Composite Bar Settings**, set the following settings:
163+
164+
|Column Name | Color |
165+
|-------------|--------------|
166+
| online | Green |
167+
| recovering | Yellow |
168+
| offline | Red (Bright) |
169+
170+
1. For **Label**, enter `["online"] of ["total"] are healthy`.
171+
1. Under **Layout Settings**, set the following settings:
172+
1. **Graph Type**: `Hive Clusters`
173+
1. **Node ID**: `server`
174+
1. **Group By Field**: `None`
175+
1. **Node Size**: `100`
176+
1. **Margin between hexagons**: `5`
177+
1. **Coloring Type**: `None`
176178
1. Select **Apply**.
177-
179+
178180
Composite bar settings for graphs:
179181

180-
![Screenshot of composite bar graph settings with settings described above.](./media/workbooks-composite-bar/graphs-settings.png)
182+
![Screenshot that shows composite bar graph settings with the preceding settings.](./media/workbooks-composite-bar/graphs-settings.png)
181183

182-
The Composite bar view for Graph with the above settings will look like this:
184+
The composite bar view for a graph with the preceding settings will look like this example:
183185

184-
![Screenshot of composite bar graphs with hive clusters.](./media/workbooks-composite-bar/composite-bar-graphs.png)
186+
![Screenshot that shows composite bar graphs with hive clusters.](./media/workbooks-composite-bar/composite-bar-graphs.png)
185187

186188
## Next steps
187189

188-
- [Getting started with Azure Workbooks](workbooks-getting-started.md).
190+
[Get started with Azure Workbooks](workbooks-getting-started.md)

0 commit comments

Comments
 (0)