IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

docs: update heatmap visualization and add play links (#85926)

Browse Source 
* docs: update heatmap visualization

* docs: add state timeline and status history play shortcodes

* Apply suggestions from code review

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

* docs: add heatmap video

---------

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
This commit is contained in:
Marie Cruz 2024-04-18 13:22:14 +01:00 committed by GitHub
parent 57848bbe23
commit 8373fc3544
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
docs/sources/panels-visualizations/visualizations/heatmap/index.md
View File

@ -19,14 +19,52 @@ weight: 100
# Heatmap
Heatmaps allow you to view histograms over time. For more information about histograms, refer to [Introduction to histograms and heatmaps][].
Heatmaps allow you to view [histograms](https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/histogram/) over time. While histograms display the data distribution that falls in a specific value range, heatmaps allow you to identify patterns in the histogram data distribution over time. For more information about heatmaps, refer to [Introduction to histograms and heatmaps](https://grafana.com/docs/grafana/latest/fundamentals/intro-histograms/).
![A heatmap visualization](/static/img/docs/v43/heatmap_panel_cover.jpg)
For example, if you want to understand the temperature changes for the past few years, you can use a heatmap visualization to identify trends in your data:
## Calculate from data
{{< figure src="/static/img/docs/heatmap-panel/temperature_heatmap.png" max-width="1025px" alt="A heatmap visualization showing the random walk distribution over time" >}}
This setting determines if the data is already a calculated heatmap (from the data source/transformer), or one that should be
calculated in the panel.
You can use a heatmap visualization if you need to:
- Visualize a large density of your data distribution.
- Condense large amounts of data through various color schemes that are easier to interpret.
- Identify any outliers in your data distribution.
- Provide statistical analysis to see how values or trends change over time.
## Configure a heatmap visualization
Once you’ve created a [dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/), the following video shows you how to configure a heatmap visualization:
{{< youtube id="SGWBzQ54koE" >}}
## Supported data formats
Heatmaps support time series data.
### Example
The table below is a simplified output of random walk distribution over time:
| Time | Walking (km) |
| ------------------- | ------------ |
| 2023-06-25 21:13:09 | 10 |
| 2023-08-25 21:13:10 | 8 |
| 2023-08-30 21:13:10 | 10 |
| 2023-10-08 21:13:11 | 12 |
| 2023-12-25 21:13:11 | 14 |
| 2024-01-05 21:13:12 | 13 |
| 2024-02-22 21:13:13 | 10 |
The data is converted as follows:
{{< figure src="/static/img/docs/heatmap-panel/heatmap.png" max-width="1025px" alt="A heatmap visualization showing the random walk distribution over time" >}}
## Heatmap options
### Calculate from data
This setting determines if the data is already a calculated heatmap (from the data source/transformer), or one that should be calculated in the panel.
### X Bucket

4
docs/sources/panels-visualizations/visualizations/histogram/index.md
View File

@ -25,7 +25,7 @@ Histograms calculate the distribution of values and present them as a bar chart.
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" >}}
{{< figure src="/static/img/docs/histogram-panel/histogram-example-v8-0.png" max-width="1025px" alt="A histogram visualization showing the distribution of people's heights" >}}
You can use a histogram visualization if you need to:
@ -61,7 +61,7 @@ The following tables are examples of the type of data you need for a histogram v
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." >}}
{{< figure src="/static/img/docs/histogram-panel/histogram-example-time-series.png" max-width="1025px" alt="A histogram visualization showing the random walk distribution." >}}
#### Basic numerical table

2
docs/sources/panels-visualizations/visualizations/state-timeline/index.md
View File

@ -35,6 +35,8 @@ The state timeline visualization is useful when you need to monitor and analyze
{{< youtube id="a9wZHM0mdxo" >}}
{{< docs/play title="Grafana State Timeline & Status History" url="https://play.grafana.org/d/qD-rVv6Mz/6-state-timeline-and-status-history?orgId=1s" >}}
## Supported data formats
The state timeline visualization works best if you have data capturing the various states of entities over time, formatted as a table. The data must include:

2
docs/sources/panels-visualizations/visualizations/status-history/index.md
View File

@ -41,6 +41,8 @@ Once you've [created a dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERS
{{< youtube id="a9wZHM0mdxo" >}}
{{< docs/play title="Grafana State Timeline & Status History" url="https://play.grafana.org/d/qD-rVv6Mz/6-state-timeline-and-status-history?orgId=1s" >}}
## Supported data formats
The status history visualization works best if you have data capturing the various status of entities over time, formatted as a table. The data must include: