diff --git a/content/en/dashboards/widgets/_index.md b/content/en/dashboards/widgets/_index.md index 5c90b3262a603..aeff66b4b8788 100644 --- a/content/en/dashboards/widgets/_index.md +++ b/content/en/dashboards/widgets/_index.md @@ -20,11 +20,13 @@ Widgets are building blocks for your dashboards. They allow you to visualize and ### Graphs {{< whatsnext desc="Generic widgets to graph data from Datadog products: ">}} - {{< nextlink href="/dashboards/widgets/change" + {{< nextlink href="/dashboards/widgets/bar_chart" + img="/dashboards/widgets/icons/bar-chart_light_large.svg">}} Bar Chart{{< /nextlink >}} + {{< nextlink href="/dashboards/widgets/change" img="dashboards/widgets/icons/change_light_large.png">}} Change {{< /nextlink >}} {{< nextlink href="/dashboards/widgets/distribution" img="dashboards/widgets/icons/distribution_light_large.png">}} Distribution{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/geomap" + {{< nextlink href="/dashboards/widgets/geomap" img="dashboards/widgets/icons/geomap_light_large.png">}} Geomap{{< /nextlink >}} {{< nextlink href="/dashboards/widgets/heat_map" 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 ### Product Analytics {{< whatsnext desc="Visualize Product Analytics data: ">}} - {{< nextlink href="/dashboards/widgets/sankey" + {{< nextlink href="/dashboards/widgets/sankey" img="dashboards/widgets/icons/sankey_light_large.svg">}} Sankey{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/funnel" + {{< nextlink href="/dashboards/widgets/funnel" img="dashboards/widgets/icons/funnel_light_large.png">}} Funnel{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/retention" + {{< nextlink href="/dashboards/widgets/retention" img="/dashboards/widgets/icons/cohort_light_small.svg">}} Retention{{< /nextlink >}} {{< /whatsnext >}} ### Architecture {{< whatsnext desc="Visualize infrastructure and architecture data: ">}} - {{< nextlink href="/dashboards/widgets/hostmap" + {{< nextlink href="/dashboards/widgets/hostmap" img="dashboards/widgets/icons/host-map_light_large.png">}} Hostmap{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/topology_map" + {{< nextlink href="/dashboards/widgets/topology_map" img="dashboards/widgets/icons/service-map_light_large.png">}} Topology Map{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/service_summary" + {{< nextlink href="/dashboards/widgets/service_summary" img="dashboards/widgets/icons/service-summary_light_large.png">}} Service Summary{{< /nextlink >}} {{< /whatsnext >}} ### Annotations and embeds {{< whatsnext desc="Decoration widgets to visually structure and annotate dashboards: ">}} - {{< nextlink href="/dashboards/widgets/free_text" + {{< nextlink href="/dashboards/widgets/free_text" img="dashboards/widgets/icons/free-text_light_large.png">}} Free Text{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/iframe" + {{< nextlink href="/dashboards/widgets/iframe" img="dashboards/widgets/icons/iframe_light_large.png">}} Iframe{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/image" + {{< nextlink href="/dashboards/widgets/image" img="dashboards/widgets/icons/image_light_large.png">}} Image{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/note" + {{< nextlink href="/dashboards/widgets/note" img="dashboards/widgets/icons/notes_light_large.png">}} Notes and Links{{< /nextlink >}} {{< /whatsnext >}} @@ -96,15 +98,15 @@ Widgets are building blocks for your dashboards. They allow you to visualize and ### Alerting and response {{< whatsnext desc="Summary widgets to display Monitoring information: ">}} - {{< nextlink href="/dashboards/widgets/alert_graph" + {{< nextlink href="/dashboards/widgets/alert_graph" img="dashboards/widgets/icons/alert-graph_light_large.png">}} Alert Graph{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/alert_value" + {{< nextlink href="/dashboards/widgets/alert_value" img="dashboards/widgets/icons/alert-value_light_large.png">}}Alert Value{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/check_status" + {{< nextlink href="/dashboards/widgets/check_status" img="dashboards/widgets/icons/check-status_light_large.png">}} Check Status{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/monitor_summary" + {{< nextlink href="/dashboards/widgets/monitor_summary" img="dashboards/widgets/icons/monitor-summary_light_large.png">}} Monitor Summary{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/run_workflow" + {{< nextlink href="/dashboards/widgets/run_workflow" img="dashboards/widgets/icons/run-workflow_light_small.svg">}} Run Workflow{{< /nextlink >}} {{< /whatsnext >}} @@ -112,9 +114,9 @@ Widgets are building blocks for your dashboards. They allow you to visualize and {{< whatsnext desc="Site reliability visualizations: ">}} {{< nextlink href="/dashboards/widgets/profiling_flame_graph" img="dashboards/widgets/icons/profiling_flame_graph.svg">}} Profiling Flame Graph{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/slo" + {{< nextlink href="/dashboards/widgets/slo" img="dashboards/widgets/icons/slo-summary_light_large.png">}} Service Level Objective (SLO) Summary{{< /nextlink >}} - {{< nextlink href="/dashboards/widgets/slo_list" + {{< nextlink href="/dashboards/widgets/slo_list" img="dashboards/widgets/icons/slo-list_light_large.png">}} Service Level Objective (SLO){{< /nextlink >}} {{< /whatsnext >}} diff --git a/content/en/dashboards/widgets/bar_chart.md b/content/en/dashboards/widgets/bar_chart.md new file mode 100644 index 0000000000000..1642b09992cae --- /dev/null +++ b/content/en/dashboards/widgets/bar_chart.md @@ -0,0 +1,57 @@ +--- +title: Bar Chart Widget +widget_type: "bar_chart" +further_reading: +- link: "/dashboards/graphing_json/" + tag: "Documentation" + text: "Building Dashboards using JSON" +- link: "/dashboards/widgets/top_list" + tag: "Documentation" + text: "Top List Widget" +- link: "/dashboards/widgets/treemap" + tag: "Documentation" + text: "Treemap Widget" +- link: "/dashboards/widgets/pie_chart" + tag: "Documentation" + text: "Pie Chart Widget" +- link: "/dashboards/guide/context-links/#overview/" + tag: "Documentation" + text: "Context Links" +--- + +## Overview + +{{< img src="/dashboards/widgets/bar_chart/bar_chart.png" alt="Bar chart widget example visualization" style="width:100%;" >}} + +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. + +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. + +## Setup + +### Configuration + +1. Select from the available data sources. +2. Configure the query. See the following resources for more information: + * Metrics: See the [querying ][1] documentation to configure a metric query. + * Events: See the [log search][2] documentation to configure a log event query. +3. (Optional) Modify the query with a [formula][3]. +4. Customize your graph. + +### Options +#### Display mode + +The bar chart widget supports multiple levels of grouping with stacked visualization, enabling you to break down data by multiple dimensions. + +- **Stacked mode**: Shows grouped data as layered bars within each category. +- **Flat mode**: Displays individual bars for each group. +- **Relative mode**: Shows values as percentages of the total (only for scalar data). +- **Absolute mode**: Shows raw count values. + +## Further reading + +{{< partial name="whats-next/whats-next.html" >}} + +[1]: /dashboards/querying +[2]: /logs/explorer/search_syntax/ +[3]: /dashboards/functions/ \ No newline at end of file diff --git a/content/en/dashboards/widgets/pie_chart.md b/content/en/dashboards/widgets/pie_chart.md index ac021c0db8f16..95c0664703878 100644 --- a/content/en/dashboards/widgets/pie_chart.md +++ b/content/en/dashboards/widgets/pie_chart.md @@ -9,6 +9,12 @@ further_reading: - link: "/dashboards/widgets/treemap/" tag: "Documentation" text: "Treemap Widget" +- link: "/dashboards/widgets/top_list/" + tag: "Documentation" + text: "Top List Widget" +- link: "/dashboards/widgets/bar_chart/" + tag: "Documentation" + text: "Bar Chart Widget" --- The pie chart widget can display a single dataset with corresponding proportions, or multiple datasets with nested proportions. diff --git a/content/en/dashboards/widgets/top_list.md b/content/en/dashboards/widgets/top_list.md index b490e835adedc..0e8f6fe1343b4 100644 --- a/content/en/dashboards/widgets/top_list.md +++ b/content/en/dashboards/widgets/top_list.md @@ -13,6 +13,15 @@ further_reading: - link: "/dashboards/guide/context-links/#overview/" tag: "Documentation" text: "Context Links" +- link: "/dashboards/widgets/pie_chart/" + tag: "Documentation" + text: "Pie Chart Widget" +- link: "/dashboards/widgets/bar_chart/" + tag: "Documentation" + text: "Bar Chart Widget" +- link: "/dashboards/widgets/treemap/" + tag: "Documentation" + text: "Treemap Widget" --- 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. diff --git a/content/en/dashboards/widgets/treemap.md b/content/en/dashboards/widgets/treemap.md index f7113426f5e5d..e8f0b99e7fbd9 100644 --- a/content/en/dashboards/widgets/treemap.md +++ b/content/en/dashboards/widgets/treemap.md @@ -11,6 +11,12 @@ further_reading: - link: "/dashboards/widgets/pie_chart/" tag: "Documentation" text: "Pie Chart Widget" +- link: "/dashboards/widgets/top_list/" + tag: "Documentation" + text: "Top List Widget" +- link: "/dashboards/widgets/bar_chart/" + tag: "Documentation" + text: "Bar Chart Widget" --- 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. diff --git a/static/images/dashboards/widgets/bar_chart/bar_chart.png b/static/images/dashboards/widgets/bar_chart/bar_chart.png new file mode 100644 index 0000000000000..9e3a1f24426bd Binary files /dev/null and b/static/images/dashboards/widgets/bar_chart/bar_chart.png differ diff --git a/static/images/dashboards/widgets/icons/bar-chart_light_large.svg b/static/images/dashboards/widgets/icons/bar-chart_light_large.svg new file mode 100644 index 0000000000000..c046b55ee64ba --- /dev/null +++ b/static/images/dashboards/widgets/icons/bar-chart_light_large.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file