Add bar chart widget file #30739
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. | ||
|
There was a problem hiding this comment. I'm not sure what this means or how you would do it...does this mean the graph title? Or the time span maybe? And then I imagine you probably have to click Save or something? |
||
|
|
||
| ### 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/ | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe this makes more sense in the context of creating dashboards (I can see that this isn't the only page it's on), but this had me confused about what the user is supposed to select or where. Usually we orient the user on where they're supposed to be in the app and something along the lines of adding the widget to the dashboard before getting into the configuration settings. Is there a reason we skip over that here? Even if there is, can we add some more context?