mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
docs: Barchart doc updates add video, why, how and data needs (#92262)
Co-authored-by: Isabel Matwawana <isabel.matwawana@grafana.com> Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
This commit is contained in:
parent
d2ee4d1005
commit
1d34fc2d1a
@ -41,31 +41,57 @@ refs:
|
||||
|
||||
# Bar chart
|
||||
|
||||
Bar charts allow you to graph categorical data.
|
||||
A bar chart is a visual representation that uses rectangular bars, where the length of each bar represents each value.
|
||||
You can use the bar chart visualization when you want to compare values over different categories or time periods. The visualization can display the bars horizontally or vertically, and can be customized to group or stack bars for more complex data analysis.
|
||||
|
||||
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="1000px" caption="Bar chart" >}}
|
||||
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="1000px" alt="Bar chart" >}}
|
||||
|
||||
You can use the bar chart visualization if you need to show:
|
||||
|
||||
- Population distribution by age or location
|
||||
- CPU usage per application
|
||||
- Sales per division
|
||||
- Server cost distribution
|
||||
|
||||
## Configure a bar chart
|
||||
|
||||
The following video shows you how to create and configure a bar chart visualization:
|
||||
|
||||
{{< youtube id="qyKE9-71KkE" >}}
|
||||
|
||||
{{< docs/play title="Grafana Bar Charts and Pie Charts" url="https://play.grafana.org/d/ktMs4D6Mk/" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
Only one data frame is supported and it must have at least one string field that will be used as the category for an X or Y axis and one or more numerical fields.
|
||||
To create a bar chart visualization, you need a dataset containing one string or time field (or column) and at least one numeric field, though preferably more than one to make best use of the visualization.
|
||||
|
||||
Example:
|
||||
The text or time field is used to label the bars or values in each row of data and the numeric fields are represented by proportionally sized bars.
|
||||
|
||||
| Browser | Market share |
|
||||
| ------- | ------------ |
|
||||
| Chrome | 50 |
|
||||
| IE | 17.5 |
|
||||
### Example 1
|
||||
|
||||
If you have more than one numerical field the visualization will show grouped bars.
|
||||
| Group | Value1 | Value2 | Value3 |
|
||||
| ----- | ------ | ------ | ------ |
|
||||
| uno | 5 | 3 | 2 |
|
||||
|
||||
### Visualizing time series or multiple result sets
|
||||

|
||||
|
||||
If you have multiple time series or tables you first need to join them using a join or reduce transform. For example if you
|
||||
have multiple time series and you want to compare their last and max value add the **Reduce** transform and specify **Max** and **Last** as options under **Calculations**.
|
||||
If you have more than one text or time field, by default, the visualization uses the first one, but you can change this in the x-axis option as described in the [Bar chart options](#bar-chart-options) section.
|
||||
|
||||
{{< figure src="/static/img/docs/bar-chart-panel/bar-chart-time-series-v8-0.png" max-width="1025px" caption="Bar chart time series example" >}}
|
||||
### Example 2
|
||||
|
||||
If your dataset contains multiple rows, the visualization displays multiple bar chart groups where each group contains multiple bars representing all the numeric values for a row.
|
||||
|
||||
| Group | Value1 | Value2 | Value3 |
|
||||
| ----- | ------ | ------ | ------ |
|
||||
| uno | 5 | 3 | 2 |
|
||||
| dos | 10 | 6 | 4 |
|
||||
| tres | 20 | 8 | 2 |
|
||||
|
||||

|
||||
|
||||
While the first field can be time-based and you can use a bar chart to plot time-series data, for large amounts of time-series data, we recommend that you use the [time series visualization](https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/time-series/) and configure it to be displayed as bars.
|
||||
|
||||
We recommend that you only use one dataset in a bar chart because using multiple datasets can result in unexpected behavior.
|
||||
|
||||
## Panel options
|
||||
|
||||
@ -75,6 +101,10 @@ have multiple time series and you want to compare their last and max value add t
|
||||
|
||||
Use these options to refine your visualization.
|
||||
|
||||
### X Axis
|
||||
|
||||
Specify which field is used for the x-axis.
|
||||
|
||||
### Orientation
|
||||
|
||||
- **Auto** - Grafana decides the bar orientation based on what the panel dimensions.
|
||||
|
Loading…
Reference in New Issue
Block a user