Skip to content

Commit 7769a8e

Browse files
estherk15janine-c
estherk15
and
janine-c
authored
Add bar chart widget file (#30739)
* Add bar chart widget file Add bar chart widget Add relative links to bar chart widget * Add bar graph icon image to index * Change the image and use case * Add Treemap * Fix reference links and add further reading * Apply suggestions from code review Co-authored-by: Janine Chan <64388808+janine-c@users.noreply.github.com> --------- Co-authored-by: Janine Chan <64388808+janine-c@users.noreply.github.com>
1 parent e8b93bd commit 7769a8e

File tree

7 files changed

+144
-19
lines changed

7 files changed

+144
-19
lines changed

‎content/en/dashboards/widgets/_index.md

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,13 @@ Widgets are building blocks for your dashboards. They allow you to visualize and
2020

2121
### Graphs
2222
{{< whatsnext desc="Generic widgets to graph data from Datadog products: ">}}
23-
{{< nextlink href="/dashboards/widgets/change"
23+
{{< nextlink href="/dashboards/widgets/bar_chart"
24+
img="/dashboards/widgets/icons/bar-chart_light_large.svg">}} Bar Chart{{< /nextlink >}}
25+
{{< nextlink href="/dashboards/widgets/change"
2426
img="dashboards/widgets/icons/change_light_large.png">}} Change {{< /nextlink >}}
2527
{{< nextlink href="/dashboards/widgets/distribution"
2628
img="dashboards/widgets/icons/distribution_light_large.png">}} Distribution{{< /nextlink >}}
27-
{{< nextlink href="/dashboards/widgets/geomap"
29+
{{< nextlink href="/dashboards/widgets/geomap"
2830
img="dashboards/widgets/icons/geomap_light_large.png">}} Geomap{{< /nextlink >}}
2931
{{< nextlink href="/dashboards/widgets/heat_map"
3032
img="dashboards/widgets/icons/heatmap_light_large.png">}} Heatmap{{< /nextlink >}}
@@ -58,33 +60,33 @@ Widgets are building blocks for your dashboards. They allow you to visualize and
5860

5961
### Product Analytics
6062
{{< whatsnext desc="Visualize Product Analytics data: ">}}
61-
{{< nextlink href="/dashboards/widgets/sankey"
63+
{{< nextlink href="/dashboards/widgets/sankey"
6264
img="dashboards/widgets/icons/sankey_light_large.svg">}} Sankey{{< /nextlink >}}
63-
{{< nextlink href="/dashboards/widgets/funnel"
65+
{{< nextlink href="/dashboards/widgets/funnel"
6466
img="dashboards/widgets/icons/funnel_light_large.png">}} Funnel{{< /nextlink >}}
65-
{{< nextlink href="/dashboards/widgets/retention"
67+
{{< nextlink href="/dashboards/widgets/retention"
6668
img="/dashboards/widgets/icons/cohort_light_small.svg">}} Retention{{< /nextlink >}}
6769
{{< /whatsnext >}}
6870

6971
### Architecture
7072
{{< whatsnext desc="Visualize infrastructure and architecture data: ">}}
71-
{{< nextlink href="/dashboards/widgets/hostmap"
73+
{{< nextlink href="/dashboards/widgets/hostmap"
7274
img="dashboards/widgets/icons/host-map_light_large.png">}} Hostmap{{< /nextlink >}}
73-
{{< nextlink href="/dashboards/widgets/topology_map"
75+
{{< nextlink href="/dashboards/widgets/topology_map"
7476
img="dashboards/widgets/icons/service-map_light_large.png">}} Topology Map{{< /nextlink >}}
75-
{{< nextlink href="/dashboards/widgets/service_summary"
77+
{{< nextlink href="/dashboards/widgets/service_summary"
7678
img="dashboards/widgets/icons/service-summary_light_large.png">}} Service Summary{{< /nextlink >}}
7779
{{< /whatsnext >}}
7880

7981
### Annotations and embeds
8082
{{< whatsnext desc="Decoration widgets to visually structure and annotate dashboards: ">}}
81-
{{< nextlink href="/dashboards/widgets/free_text"
83+
{{< nextlink href="/dashboards/widgets/free_text"
8284
img="dashboards/widgets/icons/free-text_light_large.png">}} Free Text{{< /nextlink >}}
83-
{{< nextlink href="/dashboards/widgets/iframe"
85+
{{< nextlink href="/dashboards/widgets/iframe"
8486
img="dashboards/widgets/icons/iframe_light_large.png">}} Iframe{{< /nextlink >}}
85-
{{< nextlink href="/dashboards/widgets/image"
87+
{{< nextlink href="/dashboards/widgets/image"
8688
img="dashboards/widgets/icons/image_light_large.png">}} Image{{< /nextlink >}}
87-
{{< nextlink href="/dashboards/widgets/note"
89+
{{< nextlink href="/dashboards/widgets/note"
8890
img="dashboards/widgets/icons/notes_light_large.png">}} Notes and Links{{< /nextlink >}}
8991
{{< /whatsnext >}}
9092

@@ -96,25 +98,25 @@ Widgets are building blocks for your dashboards. They allow you to visualize and
9698

9799
### Alerting and response
98100
{{< whatsnext desc="Summary widgets to display Monitoring information: ">}}
99-
{{< nextlink href="/dashboards/widgets/alert_graph"
101+
{{< nextlink href="/dashboards/widgets/alert_graph"
100102
img="dashboards/widgets/icons/alert-graph_light_large.png">}} Alert Graph{{< /nextlink >}}
101-
{{< nextlink href="/dashboards/widgets/alert_value"
103+
{{< nextlink href="/dashboards/widgets/alert_value"
102104
img="dashboards/widgets/icons/alert-value_light_large.png">}}Alert Value{{< /nextlink >}}
103-
{{< nextlink href="/dashboards/widgets/check_status"
105+
{{< nextlink href="/dashboards/widgets/check_status"
104106
img="dashboards/widgets/icons/check-status_light_large.png">}} Check Status{{< /nextlink >}}
105-
{{< nextlink href="/dashboards/widgets/monitor_summary"
107+
{{< nextlink href="/dashboards/widgets/monitor_summary"
106108
img="dashboards/widgets/icons/monitor-summary_light_large.png">}} Monitor Summary{{< /nextlink >}}
107-
{{< nextlink href="/dashboards/widgets/run_workflow"
109+
{{< nextlink href="/dashboards/widgets/run_workflow"
108110
img="dashboards/widgets/icons/run-workflow_light_small.svg">}} Run Workflow{{< /nextlink >}}
109111
{{< /whatsnext >}}
110112

111113
### Performance and reliability
112114
{{< whatsnext desc="Site reliability visualizations: ">}}
113115
{{< nextlink href="/dashboards/widgets/profiling_flame_graph"
114116
img="dashboards/widgets/icons/profiling_flame_graph.svg">}} Profiling Flame Graph{{< /nextlink >}}
115-
{{< nextlink href="/dashboards/widgets/slo"
117+
{{< nextlink href="/dashboards/widgets/slo"
116118
img="dashboards/widgets/icons/slo-summary_light_large.png">}} Service Level Objective (SLO) Summary{{< /nextlink >}}
117-
{{< nextlink href="/dashboards/widgets/slo_list"
119+
{{< nextlink href="/dashboards/widgets/slo_list"
118120
img="dashboards/widgets/icons/slo-list_light_large.png">}} Service Level Objective (SLO){{< /nextlink >}}
119121
{{< /whatsnext >}}
120122

‎content/en/dashboards/widgets/bar_chart.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Bar Chart Widget
3+
widget_type: "bar_chart"
4+
further_reading:
5+
- link: "/dashboards/graphing_json/"
6+
tag: "Documentation"
7+
text: "Building Dashboards using JSON"
8+
- link: "/dashboards/widgets/top_list"
9+
tag: "Documentation"
10+
text: "Top List Widget"
11+
- link: "/dashboards/widgets/treemap"
12+
tag: "Documentation"
13+
text: "Treemap Widget"
14+
- link: "/dashboards/widgets/pie_chart"
15+
tag: "Documentation"
16+
text: "Pie Chart Widget"
17+
- link: "/dashboards/guide/context-links/#overview/"
18+
tag: "Documentation"
19+
text: "Context Links"
20+
---
21+
22+
## Overview
23+
24+
{{< img src="/dashboards/widgets/bar_chart/bar_chart.png" alt="Bar chart widget example visualization" style="width:100%;" >}}
25+
26+
The bar chart widget is part of the same data family as the top list, treemap, and pie chart widgets, using categorical axes rather than temporal axes like timeseries bar graphs. It displays categorical data using vertical bars, allowing you to compare values across different categories or groups. Unlike the horizontal top list widget, the bar chart uses a vertical orientation which is particularly useful for dashboards with wide and short aspect ratios, or when you want to focus on value comparison rather than ranking.
27+
28+
Use the bar chart when visual comparison across categories matters more than reading exact tag values. Use the top list to prioritize label readability (such as long tag names) or need a ranked list format.
29+
30+
## Setup
31+
32+
### Configuration
33+
34+
1. Select from the available data sources.
35+
2. Configure the query. See the following resources for more information:
36+
* Metrics: See the [querying ][1] documentation to configure a metric query.
37+
* Events: See the [log search][2] documentation to configure a log event query.
38+
3. (Optional) Modify the query with a [formula][3].
39+
4. Customize your graph.
40+
41+
### Options
42+
#### Display mode
43+
44+
The bar chart widget supports multiple levels of grouping with stacked visualization, enabling you to break down data by multiple dimensions.
45+
46+
- **Stacked mode**: Shows grouped data as layered bars within each category.
47+
- **Flat mode**: Displays individual bars for each group.
48+
- **Relative mode**: Shows values as percentages of the total (only for scalar data).
49+
- **Absolute mode**: Shows raw count values.
50+
51+
## Further reading
52+
53+
{{< partial name="whats-next/whats-next.html" >}}
54+
55+
[1]: /dashboards/querying
56+
[2]: /logs/explorer/search_syntax/
57+
[3]: /dashboards/functions/

‎content/en/dashboards/widgets/pie_chart.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ further_reading:
99
- link: "/dashboards/widgets/treemap/"
1010
tag: "Documentation"
1111
text: "Treemap Widget"
12+
- link: "/dashboards/widgets/top_list/"
13+
tag: "Documentation"
14+
text: "Top List Widget"
15+
- link: "/dashboards/widgets/bar_chart/"
16+
tag: "Documentation"
17+
text: "Bar Chart Widget"
1218
---
1319

1420
The pie chart widget can display a single dataset with corresponding proportions, or multiple datasets with nested proportions.

‎content/en/dashboards/widgets/top_list.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,15 @@ further_reading:
1313
- link: "/dashboards/guide/context-links/#overview/"
1414
tag: "Documentation"
1515
text: "Context Links"
16+
- link: "/dashboards/widgets/pie_chart/"
17+
tag: "Documentation"
18+
text: "Pie Chart Widget"
19+
- link: "/dashboards/widgets/bar_chart/"
20+
tag: "Documentation"
21+
text: "Bar Chart Widget"
22+
- link: "/dashboards/widgets/treemap/"
23+
tag: "Documentation"
24+
text: "Treemap Widget"
1625
---
1726

1827
The top list visualization enables you to display a list of tag values with the most or least of any metric or event value, such as highest consumers of CPU, hosts with the least disk space, or cloud products with the highest costs.

‎content/en/dashboards/widgets/treemap.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ further_reading:
1111
- link: "/dashboards/widgets/pie_chart/"
1212
tag: "Documentation"
1313
text: "Pie Chart Widget"
14+
- link: "/dashboards/widgets/top_list/"
15+
tag: "Documentation"
16+
text: "Top List Widget"
17+
- link: "/dashboards/widgets/bar_chart/"
18+
tag: "Documentation"
19+
text: "Bar Chart Widget"
1420
---
1521

1622
The treemap widget allows you to display proportions of one or more datasets. This widget can display a single dataset with corresponding proportions, or multiple datasets with nested proportions.

‎static/images/dashboards/widgets/bar_chart/bar_chart.png

111 KB
Loading

‎static/images/dashboards/widgets/icons/bar-chart_light_large.svg

Lines changed: 45 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)