docs: update histogram visualization (#85125)

* docs: update histogram visualization docs

* docs: updates to histogram visualization

* Apply suggestions from code review

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Fixed typo I introduced

* docs: add youtube video

---------

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
This commit is contained in:
Marie Cruz
2024-03-28 14:45:45 +00:00
committed by GitHub
parent 30c9307539
commit 4a3140a0aa
2 changed files with 58 additions and 8 deletions

View File

@ -21,17 +21,67 @@ weight: 100
# Histogram
Histograms calculate the distribution of values and present them as a bar chart. The Y-axis and the height of each bar represent the count of values that fall into each bracket while the X-axis represents the value range.
Histograms calculate the distribution of values and present them as a bar chart. Each bar represents a bucket; the y-axis and the height of each bar represent the count of values that fall into each bucket, and the x-axis represents the value range.
{{< figure src="/static/img/docs/histogram-panel/histogram-example-v8-0.png" max-width="625px" caption="Bar chart example" >}}
For example, if you want to understand the distribution of people's heights, you can use a histogram visualization to identify patterns or insights in the data distribution:
{{< figure src="/static/img/docs/histogram-panel/histogram-example-v8-0.png" max-width="625px" alt="A histogram visualization showing the distribution of people's heights" >}}
You can use a histogram visualization if you need to:
- Visualize and analyze data distributions over a specific time range to see how frequently certain values occur.
- Identify any outliers in your data distribution.
- Provide statistical analysis to help with decision-making
## Configure a histogram visualization
Once youve created a [dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/), the following video shows you how to configure a histogram visualization:
{{< youtube id="QfJ480j9-KM" >}}
## Supported data formats
Histograms support time series and any table results with one or more numerical fields.
## Display options
### Examples
Use the following options to refine your visualization.
The following tables are examples of the type of data you need for a histogram visualization and how it should be formatted.
#### Time-series table
| Time | Walking (km) |
| ------------------- | ------------ |
| 2024-03-25 21:13:09 | 37.2 |
| 2024-03-25 21:13:10 | 37.1 |
| 2024-03-25 21:13:10 | 37.0 |
| 2024-03-25 21:13:11 | 37.2 |
| 2024-03-25 21:13:11 | 36.9 |
| 2024-03-25 21:13:12 | 36.7 |
| 2024-03-25 21:13:13 | 36.3 |
The data is converted as follows:
{{< figure src="/static/img/docs/histogram-panel/histogram-example-time-series.png" max-width="1025px" alt="A histogram visualization showing the walk distribution from random people over time." >}}
#### Basic numerical table
| Gender | Height (kg) | Weight (lbs) |
| ------ | ----------- | ------------ |
| Male | 73.8 | 242 |
| Male | 68.8 | 162 |
| Male | 74.1 | 213 |
| Male | 71.7 | 220 |
| Male | 69.9 | 206 |
| Male | 67.3 | 152 |
| Male | 68.8 | 184 |
The data is converted as follows:
{{< figure src="/static/img/docs/histogram-panel/histogram-example-height-weight.png" max-width="1025px" alt="A histogram visualization showing the male height and weight distribution" >}}
## Histogram options
Use the following options to refine your histogram visualization.
### Bucket size