Consolidate Grafana visualization documentation (#112393)
Co-authored-by: Jacob Valdez <jacob.valdez@grafana.com>
This commit is contained in:
Jack Baldry
GitHub
@@ -0,0 +1,256 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../features/panels/graph/ # /docs/grafana/next/features/panels/graph/
|
||||
- ../../panels-visualizations/visualizations/ # /docs/grafana/next/panels-visualizations/visualizations/
|
||||
- ../../panels/visualizations/ # /docs/grafana/next/panels/visualizations/
|
||||
- ../../panels/visualizations/graph-panel/ # /docs/grafana/next/panels/visualizations/graph-panel/
|
||||
- ../../reference/graph/ # /docs/grafana/next/reference/graph/
|
||||
- ../../visualizations/ # /docs/grafana/next/visualizations/
|
||||
- ../../visualizations/graph-panel/ # /docs/grafana/next/visualizations/graph-panel/
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Visualizations
|
||||
description: Apply visualizations to your data
|
||||
weight: 10
|
||||
refs:
|
||||
news:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/news/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/news/
|
||||
stat:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/stat/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/stat/
|
||||
node-graph:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/node-graph/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/node-graph/
|
||||
trend:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/trend/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/trend/
|
||||
time-series:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/time-series/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series/
|
||||
pie-chart:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/pie-chart/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/pie-chart/
|
||||
annotations-list:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/annotations/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/annotations/
|
||||
canvas:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/canvas/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/canvas/
|
||||
candlestick:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/candlestick/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/candlestick/
|
||||
bar-gauge:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/bar-gauge/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/bar-gauge/
|
||||
xy-chart:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/xy-chart/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/xy-chart/
|
||||
geomap:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/geomap/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/geomap/
|
||||
flame-graph:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/flame-graph/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/flame-graph/
|
||||
bar-chart:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/bar-chart/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/bar-chart/
|
||||
table:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/table/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/table/
|
||||
histogram:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/histogram/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/histogram/
|
||||
heatmap:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/heatmap/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/heatmap/
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/heatmap/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/heatmap/
|
||||
datagrid:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/datagrid/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/datagrid/
|
||||
status-history:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/status-history/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/status-history/
|
||||
gauge:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/gauge/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/gauge/
|
||||
logs:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/logs/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/logs/
|
||||
dashboard-list:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/dashboard-list/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/dashboard-list/
|
||||
alert-list:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/alert-list/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/alert-list/
|
||||
traces:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/traces/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/traces/
|
||||
text:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/text/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/text/
|
||||
state-timeline:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/state-timeline/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/state-timeline/
|
||||
---
|
||||
|
||||
# Visualizations
|
||||
|
||||
Grafana offers a variety of visualizations to support different use cases. This section of the documentation highlights the built-in visualizations, their options and typical usage.
|
||||
|
||||
{{< youtube id="JwF6FgeotaU" >}}
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
If you are unsure which visualization to pick, Grafana can provide visualization suggestions based on the panel query. When you select a visualization, Grafana will show a preview with that visualization applied.
|
||||
{{< /admonition >}}
|
||||
|
||||
- Graphs & charts
|
||||
- [Time series](ref:time-series) is the default and main graph visualization. Alerts are supported in this panel.
|
||||
- [State timeline](ref:state-timeline) for state changes over time.
|
||||
- [Status history](ref:status-history) for periodic state over time.
|
||||
- [Bar chart](ref:bar-chart) shows any categorical data.
|
||||
- [Histogram](ref:histogram) calculates and shows value distribution in a bar chart.
|
||||
- [Heatmap](ref:heatmap) visualizes data in two dimensions, used typically for the magnitude of a phenomenon.
|
||||
- [Pie chart](ref:pie-chart) is typically used where proportionality is important.
|
||||
- [Candlestick](ref:candlestick) is typically for financial data where the focus is price/data movement.
|
||||
- [Gauge](ref:gauge) is the traditional rounded visual showing how far a single metric is from a threshold.
|
||||
- [Trend](ref:trend) for datasets that have a sequential, numeric x that is not time.
|
||||
- [XY chart](ref:xy-chart) provides a way to visualize arbitrary x and y values in a graph.
|
||||
- Stats & numbers
|
||||
- [Stat](ref:stat) for big stats and optional sparkline.
|
||||
- [Bar gauge](ref:bar-gauge) is a horizontal or vertical bar gauge.
|
||||
- Misc
|
||||
- [Table](ref:table) is the main and only table visualization.
|
||||
- [Logs](ref:logs) is the main visualization for logs.
|
||||
- [Node graph](ref:node-graph) for directed graphs or networks.
|
||||
- [Traces](ref:traces) is the main visualization for traces.
|
||||
- [Flame graph](ref:flame-graph) is the main visualization for profiling.
|
||||
- [Canvas](ref:canvas) allows you to explicitly place elements within static and dynamic layouts.
|
||||
- [Geomap](ref:geomap) helps you visualize geospatial data.
|
||||
- [Datagrid](ref:datagrid) allows you to create and manipulate data, and act as data source for other panels.
|
||||
- Widgets
|
||||
- [Dashboard list](ref:dashboard-list) can list dashboards.
|
||||
- [Alert list](ref:alert-list) can list alerts.
|
||||
- [Annotations list](ref:annotations-list) can list available annotations.
|
||||
- [Text](ref:text) can show markdown and html.
|
||||
- [News](ref:news) can show RSS feeds.
|
||||
|
||||
The following video shows you how to create gauge, time series line graph, stats, logs, and node graph visualizations:
|
||||
|
||||
{{< youtube id="yNRnLyVntUw" >}}
|
||||
|
||||
## Get more
|
||||
|
||||
You can add more visualization types by installing [panel plugins](https://grafana.com/grafana/plugins/?type=panel).
|
||||
|
||||
## Examples
|
||||
|
||||
Below you can find some good examples for how all the visualizations in Grafana can be configured. You can also explore [play.grafana.org](https://play.grafana.org) which has a large set of demo dashboards that showcase all the different visualizations.
|
||||
|
||||
### Graphs
|
||||
|
||||
For time based line, area and bar charts we recommend the default [time series](ref:time-series) visualization. [This public demo dashboard](https://play.grafana.org/d/000000016/1-time-series-graphs?orgId=1) contains many different examples for how this visualization can be configured and styled.
|
||||
|
||||
{{< figure src="/static/img/docs/time-series-panel/time_series_small_example.png" max-width="700px" caption="Time series" >}}
|
||||
|
||||
For categorical data use a [bar chart](ref:bar-chart).
|
||||
|
||||
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="700px" caption="Bar chart" >}}
|
||||
|
||||
### Big numbers & stats
|
||||
|
||||
A [stat](ref:stat) shows one large stat value with an optional graph sparkline. You can control the background or value color using thresholds or color scales.
|
||||
|
||||
{{< figure src="/static/img/docs/v66/stat_panel_dark3.png" max-width="1025px" caption="Stat" >}}
|
||||
|
||||
### Gauge
|
||||
|
||||
If you want to present a value as it relates to a min and max value you have two options. First a standard radial [gauge](ref:gauge) shown below.
|
||||
|
||||
{{< figure src="/static/img/docs/v66/gauge_panel_cover.png" max-width="700px" alt="A gauge visualization" >}}
|
||||
|
||||
Secondly Grafana also has a horizontal or vertical [bar gauge](ref:bar-gauge) with three different distinct display modes.
|
||||
|
||||
{{< figure src="/static/img/docs/v66/bar_gauge_lcd.png" max-width="700px" alt="A bar gauge visualization" >}}
|
||||
|
||||
### Table
|
||||
|
||||
To show data in a table layout, use a [table](ref:table).
|
||||
|
||||
{{< figure src="/static/img/docs/tables/table_visualization.png" max-width="700px" lightbox="true" caption="Table visualization" >}}
|
||||
|
||||
### Pie chart
|
||||
|
||||
To display reduced series, or values in a series, from one or more queries, as they relate to each other, use a [pie chart](ref:pie-chart).
|
||||
|
||||
{{< figure src="/static/img/docs/pie-chart-panel/pie-chart-example.png" max-width="700px" lightbox="true" caption="Pie chart" >}}
|
||||
|
||||
### Heatmaps
|
||||
|
||||
To show value distribution over, time use a [heatmap](ref:heatmap).
|
||||
|
||||
{{< figure src="/static/img/docs/v43/heatmap_panel_cover.jpg" max-width="1000px" lightbox="true" caption="Heatmap" >}}
|
||||
|
||||
### State timeline
|
||||
|
||||
A state timeline shows discrete state changes over time. When used with time series, the thresholds are used to turn the numerical values into discrete state regions.
|
||||
|
||||
{{< figure src="/static/img/docs/v8/state_timeline_strings.png" max-width="700px" caption="State timeline with string states" >}}
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/alertlist/ # /docs/grafana/next/features/panels/alertlist/
|
||||
- ../../../panels-visualizations/visualizations/alert-list/ # /docs/grafana/next/panels-visualizations/visualizations/alert-list/
|
||||
- ../../../panels/visualizations/alert-list-panel/ # /docs/grafana/next/panels/visualizations/alert-list-panel/
|
||||
- ../../../reference/alertlist/ # /docs/grafana/next/reference/alertlist/
|
||||
- ../../../visualizations/alert-list-panel/ # /docs/grafana/next/visualizations/alert-list-panel/
|
||||
keywords:
|
||||
- grafana
|
||||
- alert list
|
||||
- documentation
|
||||
- panel
|
||||
- alertlist
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Alert list
|
||||
description: Configure options for Grafana's alert list visualization
|
||||
weight: 100
|
||||
refs:
|
||||
grafana-alerting-overview:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/alerting/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/alerting-and-irm/alerting/
|
||||
create-dashboard:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard/
|
||||
alert-label:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/alerting/fundamentals/alert-rules/annotation-label/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/alerting-and-irm/alerting/fundamentals/alert-rules/annotation-label/
|
||||
---
|
||||
|
||||
# Alert list
|
||||
|
||||
Alert lists allow you to display a list of important alerts that you want to track. You can configure the alert list to show the current state of your alert, such as firing, pending, or normal. Learn more about alerts in [Grafana Alerting overview](ref:grafana-alerting-overview).
|
||||
|
||||
|
||||
|
||||
On each dashboard load, this visualization queries the alert list, always providing the most up-to-date results.
|
||||
|
||||
{{< docs/play title="Alert List" url="https://play.grafana.org/d/bdodlcyou483ke/" >}}
|
||||
|
||||
## Configure an alert list
|
||||
|
||||
Once you’ve [created a dashboard](ref:create-dashboard), the following video shows you how to configure an alert list visualization:
|
||||
|
||||
{{< youtube id="o4rK7_AXZ9Y" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Options
|
||||
|
||||
Use the following options to refine your alert list visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ---------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| View mode | Choose between **List** to display alerts in a detailed list format with comprehensive information, or **Stat** to show alerts as a summarized single-value statistic. |
|
||||
| Group mode | Choose between **Default grouping** to show alert instances grouped by their alert rule, or **Custom grouping** to show alert instances grouped by a custom set of labels. |
|
||||
| Max items | Sets the maximum number of alerts to list. By default, Grafana sets this value to 10. |
|
||||
| [Sort order](#sort-order) | Select how to order the alerts displayed. |
|
||||
| Alerts linked to this dashboard | Toggle the switch on to only show alerts from the dashboard the alert list is in. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Sort order
|
||||
|
||||
Select how to order the alerts displayed. Choose from:
|
||||
|
||||
- **Alphabetical (asc)** - Alphabetical order.
|
||||
- **Alphabetical (desc)** - Reverse alphabetical order.
|
||||
- **Importance** - By importance according to the following values, with 1 being the highest:
|
||||
- alerting: 1
|
||||
- firing: 1
|
||||
- no_data: 2
|
||||
- pending: 3
|
||||
- ok: 4
|
||||
- paused: 5
|
||||
- inactive: 5
|
||||
- **Time (asc)** - Newest active alert instances first.
|
||||
- **Time (desc)** - Oldest active alert instances first.
|
||||
|
||||
### Filter options
|
||||
|
||||
These options allow you to limit alerts shown to only those that match the query, folder, or tags you choose.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ---------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| Alert name | Filter alerts by name. |
|
||||
| Alert instance label | Filter alert instances using [label](ref:alert-label) querying. For example,`{severity="critical", instance=~"cluster-us-.+"}`. |
|
||||
| Datasource | Filter alerts from the selected data source. |
|
||||
| Folder | Filter alerts by the selected folder. Only alerts from dashboards in this folder are displayed. |
|
||||
| Show alerts with 0 instances | Filter for alert rules with no instances. Alert rules with 0 (zero) instances are hidden by default. You can choose to show them by toggling this switch. Because these rules have no instances, they remain hidden if the **Alert instance label** filter is configured. |
|
||||
|
||||
### Alert state filter options
|
||||
|
||||
Choose which alert states to display in this visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ---------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| Alerting / Firing | Shows alerts that are currently active and triggering an alert condition. |
|
||||
| Pending | Shows alerts that are in a transitional state, waiting for conditions to be met before triggering. |
|
||||
| No Data | Shows alerts where the data source is not returning any data, which could indicate an issue with data collection. |
|
||||
| Normal | Shows alerts that are in a normal or resolved state, where no alert condition is currently met. |
|
||||
| Error | Shows alerts where an error has occurred, typically related to an issue in the alerting process. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/annotations/ # /docs/grafana/next/features/panels/annotations/
|
||||
- ../../../panels/visualizations/annotations/ # /docs/grafana/next/panels/visualizations/annotations/
|
||||
- ../../annotations/ # /docs/grafana/next/visualizations/annotations/
|
||||
- ../../../panels-visualizations/visualizations/annotations/ # /docs/grafana/next/panels-visualizations/visualizations/annotations/
|
||||
description: Configure options for Grafana's annotations list visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- Annotations
|
||||
- panel
|
||||
- documentation
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Annotations list
|
||||
weight: 100
|
||||
---
|
||||
|
||||
# Annotations list
|
||||
|
||||
The annotations list shows a list of available annotations you can use to view annotated data. Various options are available to filter the list based on tags and on the current dashboard.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-annotations-list-viz-v12.0.png" max-width="750px" alt="The annotations list visualization" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Annotation query options
|
||||
|
||||
The following options control the source query for the list of annotations:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ---------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| [Query filter](#query-filter) | Specify which annotations are included in the list. |
|
||||
| [Time Range](#time-range) | Specify whether the list should be limited to the current time range. |
|
||||
| Tags | Filter the annotations by tags. You can add multiple tags to refine the list. Optionally, leave the tag list empty and filter in view mode by selecting tags that are listed as part of the results on the panel itself. |
|
||||
| Limit | Limit the number of results returned. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Query filter
|
||||
|
||||
Use the **Query filter** option to create a list of annotations from all dashboards in your organization or the current dashboard in which this panel is located.
|
||||
Choose from:
|
||||
|
||||
- **All dashboards** - List annotations from all dashboards in the current organization.
|
||||
- **This dashboard** - Limit the list to the annotations on the current dashboard.
|
||||
|
||||
#### Time Range
|
||||
|
||||
Specify whether the list should be limited to the current time range.
|
||||
Choose from:
|
||||
|
||||
- **None** - No time range limit for the annotations query.
|
||||
- **This dashboard** - Limit the list to the time range of the dashboard where the annotations list is available.
|
||||
|
||||
### Display options
|
||||
|
||||
These options control additional metadata included in the annotations list display:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ---------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| Show user | Show or hide which user created the annotation. |
|
||||
| Show time | Show or hide the time the annotation creation time. |
|
||||
| Show tags | Show or hide the tags associated with an annotation. Note that you can use the tags to filter the annotations list. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Link behavior options
|
||||
|
||||
Use the following options to control the behavior of annotation links in the list:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ---------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| Link target | Set how to view the annotated data. Choose from:<ul><li>**Panel** - The link takes you directly to a full-screen view of the panel with the corresponding annotation.</li><li>**Dashboard** - Focuses the annotation in the context of a complete dashboard.</li></ul> |
|
||||
| Time before | Set the time range before the annotation. Use duration string values like `1h` for one hour and `10m` for 10 minutes. |
|
||||
| Time after | Set the time range after the annotation. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
@@ -0,0 +1,222 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../panels/visualizations/bar-chart/ # /docs/grafana/next/panels/visualizations/bar-chart/
|
||||
- ../../bar-chart/ # /docs/grafana/next/visualizations/bar-chart/
|
||||
- ../../../panels-visualizations/visualizations/bar-chart/ # /docs/grafana/next/panels-visualizations/visualizations/bar-chart/
|
||||
description: Configure options for Grafana's bar chart visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- docs
|
||||
- bar chart
|
||||
- panel
|
||||
- barchart
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Bar chart
|
||||
weight: 100
|
||||
refs:
|
||||
standard-options-definitions:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/#max
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/#max
|
||||
add-a-field-override:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/#add-a-field-override
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/#add-a-field-override
|
||||
time-series:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/time-series/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series/
|
||||
---
|
||||
|
||||
# Bar chart
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Example 1
|
||||
|
||||
| Group | Value1 | Value2 | Value3 |
|
||||
| ----- | ------ | ------ | ------ |
|
||||
| uno | 5 | 3 | 2 |
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
### 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](ref: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.
|
||||
|
||||
<!-- vale Grafana.WordList = NO -->
|
||||
<!-- vale Grafana.Spelling = NO -->
|
||||
|
||||
## Apply ad hoc filters from the bar chart
|
||||
|
||||
In bar charts, you can apply ad hoc filters directly from the visualization.
|
||||
|
||||
To display the filter button, hover your cursor over the bar that has the value for which you want to filter and click the bar:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-adhoc-filter-icon-bar-v12.2.png" max-width="300px" alt="The ad hoc filter button in a bar chart tooltip">}}
|
||||
|
||||
For more information about applying ad hoc filters this way, refer to [Dashboard drilldown with ad hoc filters](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/variables/add-template-variables/#dashboard-drilldown-with-ad-hoc-filters).
|
||||
|
||||
<!-- vale Grafana.Spelling = YES -->
|
||||
<!-- vale Grafana.WordList = YES -->
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Bar chart options
|
||||
|
||||
Use these options to refine your visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| -------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| X Axis | Specify which field is used for the x-axis. |
|
||||
| Orientation | Choose from: <ul><li>**Auto** - Grafana decides the bar orientation based on the panel dimensions.</li><li>**Horizontal** - Will make the X axis the category axis.</li><li>**Vertical** - Will make the Y axis the category axis.</li></ul> |
|
||||
| Rotate x-axis tick labels | When the graph is vertically oriented, this setting rotates the labels under the bars. This setting is useful when bar chart labels are long and overlap. |
|
||||
| X-axis tick label max length | Sets the maximum length of bar chart labels. Labels longer than the maximum length are truncated, and appended with `...`. |
|
||||
| X-axis labels minimum spacing | Sets the minimum spacing between x-axis labels. Depending on your choice, you can select the **RTL** checkbox to require space from the right side. Choose from: <ul><li>**None** - All tick marks are shown.</li><li>**Small** - 100 px of space is required between labels.</li><li>**Medium** - 200 px of space is required between labels.</li><li>**Large** - 300 px of space is required between labels.</li></ul> |
|
||||
| Show values | This controls whether values are shown. Values are shown on top or to the left of bars. Choose from: <ul><li>**Auto** Values will be shown if there is space.</li><li>**Always** Always show values.</li><li>**Never** Never show values.</li></ul> |
|
||||
| Stacking | Controls bar chart stacking. Choose from: <ul><li>**Off**: Bars will not be stacked.</li><li>**Normal**: Bars will be stacked on each other.</li><li>**Percent**: Bars will be stacked on each other, and the height of each bar is the percentage of the total height of the stack.</li></ul> |
|
||||
| Group width | Controls the width of groups. 1 = Max with, 0 = Min width. |
|
||||
| Bar width | Controls the width of bars. 1 = Max width, 0 = Min width. |
|
||||
| Bar radius | Controls the radius of the bars. Choose from: <ul><li>0 = Minimum radius</li><li>0.5 = Maximum radius</li></ul> |
|
||||
| Highlight full area on cover | Controls if the entire surrounding area of the bar is highlighted when you hover over the bar. |
|
||||
| Color by field | Use the color value for a sibling field to color each bar value. |
|
||||
| Line width | Controls line width of the bars. |
|
||||
| Fill opacity | Controls the fill opacity bars. |
|
||||
| [Gradient mode](#gradient-mode) | Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. Gradient appearance is influenced by the **Fill opacity** setting. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Gradient mode
|
||||
|
||||
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. Gradient appearance is influenced by the **Fill opacity** setting. Choose from:
|
||||
|
||||
- **None** - No gradient fill. This is the default setting.
|
||||
- **Opacity** - Transparency of the gradient is calculated based on the values on the y-axis. Opacity of the fill is increasing with the values on the Y-axis.
|
||||
- **Hue** - Gradient color is generated based on the hue of the line color.
|
||||
- **Scheme** - The bar receives a gradient color defined by the **Standard options > Color scheme** selection.
|
||||
- **From thresholds** - If the **Color scheme** selection is **From thresholds (by value)**, then each bar is the color of the defined threshold.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-colors-by-thresholds-v11.3.png" alt="Color scheme From thresholds" caption="Color scheme: From thresholds" >}}
|
||||
|
||||
- **Gradient color schemes** - The following image shows a bar chart with the **Green-Yellow-Red (by value)** color scheme option selected.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-colors-by-value-v11.3.png" alt="Color scheme Green-Yellow-Red" caption="Color scheme: Green-Yellow-Red" >}}
|
||||
|
||||
### Tooltip options
|
||||
|
||||
{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Legend options
|
||||
|
||||
{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Text size
|
||||
|
||||
Enter a **Value** to change the size of the text on your bar chart.
|
||||
|
||||
### Axis
|
||||
|
||||
Use the following field settings to refine how your axes display.
|
||||
|
||||
For guidance on configuring more than one y-axis, refer to [Multiple y-axes](#multiple-y-axes).
|
||||
|
||||
Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Placement | Select the placement of the Y-axis. Choose from: <ul><li>**Auto** - Grafana automatically assigns Y-axis to the series. When there are two or more series with different units, then Grafana assigns the left axis to the first unit and right to the following units.</li><li>**Left** - Display all Y-axes on the left side.</li><li>**Right** - Display all Y-axes on the right side.</li><li>**Hidden** - Hide all axes. To selectively hide axes, [add a field override](ref:add-a-field-override) that targets specific fields.</li></ul> |
|
||||
| Label | Set a Y-axis text label. If you have more than one Y-axis, then you can assign different labels with an override. |
|
||||
| Width | Set a fixed width of the axis. By default, Grafana dynamically calculates the width of an axis.<br></br>By setting the width of the axis, data whose axes types are different can share the same display proportions. This makes it easier to compare more than one graph’s worth of data because the axes are not shifted or stretched within visual proximity of each other. |
|
||||
| Show grid lines | Set whether grid lines are displayed in the chart. Choose from: <ul><li>**Auto** - Grafana automatically determines whether grid lines are displayed.</li><li>**On** - Grid lines are always displayed.</li><li>**Off** - Grid lines are never displayed</li></ul> |
|
||||
| Color | Choose whether the axis color is the **Text** or **Series** color. |
|
||||
| Show border | Toggle the switch to hide or display the border. |
|
||||
| Scale | Set how the y-axis is split. Choose from: <ul><li>**Linear**</li><li>**Logarithmic** - Choose between log base 2 or log base 10.</li><li>**Symlog** - Uses a symmetrical logarithmic scale. Choose between log base 2 or log base 10, allowing for negative values.</li></ul> |
|
||||
| Centered zero | Set the y-axis so it's centered on zero. |
|
||||
| [Soft min and soft max](#soft-min-and-soft-max) | Set a **Soft min** or **soft max** option for better control of Y-axis limits. By default, Grafana sets the range for the Y-axis automatically based on the dataset. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Soft min and soft max
|
||||
|
||||
Set a **Soft min** or **soft max** option for better control of Y-axis limits. By default, Grafana sets the range for the Y-axis automatically based on the dataset.
|
||||
|
||||
**Soft min** and **soft max** settings can prevent blips from turning into mountains when the data is mostly flat, and hard min or max derived from standard min and max field options can prevent intermittent spikes from flattening useful detail by clipping the spikes past a defined point.
|
||||
|
||||
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard options definitions](ref:standard-options-definitions).
|
||||
|
||||
{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+3" >}}
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,173 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/bar_gauge/ # /docs/grafana/next/features/panels/bar_gauge/
|
||||
- ../../../panels/visualizations/bar-gauge-panel/ # /docs/grafana/next/panels/visualizations/bar-gauge-panel/
|
||||
- ../../bar-gauge-panel/ # /docs/grafana/next/visualizations/bar-gauge-panel/
|
||||
- ../../../panels-visualizations/visualizations/bar-gauge/ # /docs/grafana/next/panels-visualizations/visualizations/bar-gauge/
|
||||
description: Configure options for Grafana's bar gauge visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- bar
|
||||
- bar gauge
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Bar gauge
|
||||
weight: 100
|
||||
refs:
|
||||
calculation-types:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/calculation-types/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types/
|
||||
---
|
||||
|
||||
# Bar gauge
|
||||
|
||||
Bar gauges simplify your data by reducing every field to a single value. You choose how Grafana calculates the reduction. This visualization can show one or more bar gauges depending on how many series, rows, or columns your query returns.
|
||||
|
||||
{{< figure src="/static/img/docs/v66/bar_gauge_cover.png" max-width="1025px" alt="Bar gauge panel" >}}
|
||||
|
||||
The bar gauge visualization displays values as bars with various lengths or fills proportional to the values they represent. They differ from traditional bar charts in that they act as gauges displaying metrics between ranges. One example is a thermometer displaying body temperature in a bar filling up.
|
||||
|
||||
You can use a bar gauge visualization when you need to show:
|
||||
|
||||
- Key performance indicators (KPIs)
|
||||
- System health
|
||||
- Savings goals
|
||||
- Attendance
|
||||
- Process completion rates
|
||||
|
||||
## Configure a bar gauge visualization
|
||||
|
||||
The following video shows you how to create and configure a bar gauge visualization:
|
||||
|
||||
{{< youtube id="7PhDysObEXA" >}}
|
||||
|
||||
{{< docs/play title="Bar Gauge" url="https://play.grafana.org/d/vmie2cmWz/" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
To create a bar gauge visualization, you need a dataset querying at least one numeric field. Every numeric field in the dataset is displayed as a bar gauge. Text or time fields aren't required but if they're present, they're used for labeling.
|
||||
|
||||
### Example 1
|
||||
|
||||
| Label | Value1 | Value2 | Value3 |
|
||||
| ----- | ------ | ------ | ------ |
|
||||
| Row1 | 5 | 3 | 2 |
|
||||
|
||||
|
||||
|
||||
The minimum and maximum range for the bar gauges is automatically pulled from the largest and smallest numeric values in the dataset. You can also manually define the minimum and maximum values as indicated in the [Standard options](#standard-options) section.
|
||||
|
||||
You can also define the minimum and maximum from the dataset provided.
|
||||
|
||||
### Example 2
|
||||
|
||||
| Label | Value | Max | Min |
|
||||
| ----- | ----- | --- | --- |
|
||||
| Row1 | 3 | 6 | 1 |
|
||||
|
||||
|
||||
|
||||
If you don’t want to show gauges for the min and max values, you can configure only one field to be displayed as described in the [Value options](#value-options) section.
|
||||
|
||||
|
||||
|
||||
Even if the min and max aren’t displayed, the visualization still pulls the range from the data set.
|
||||
|
||||
### Example 3
|
||||
|
||||
The bar gauge visualization also supports multiple records (rows) in the dataset.
|
||||
|
||||
| Label | Value1 | Value2 | Value3 |
|
||||
| ----- | ------ | ------ | ------ |
|
||||
| Row1 | 5 | 3 | 2 |
|
||||
| Row2 | 10 | 6 | 4 |
|
||||
| Row3 | 20 | 8 | 2 |
|
||||
|
||||
|
||||
|
||||
By default, the visualization is configured to [calculate](#value-options) a single value per column or series and to display only the last set of data. However, it derives the minimum and maximum from the full dataset even if those values aren’t visible. In this example, that means only the last row of data is displayed in the gauges and the minimum and maximum values are defined as 2 and 20, pulled from the whole dataset.
|
||||
|
||||
If you want to show one gauge per cell you can change the **Show** setting from **Calculate** to **All values** and each bar is labeled by concatenating the text column with each value's column name.
|
||||
|
||||
|
||||
|
||||
For more information on these settings, refer to [Value options](#value-options).
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value options
|
||||
|
||||
Use the following options to refine how your visualization displays the value:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Show | Set how Grafana displays your data. Choose from:<ul><li>**Calculate** - Show a calculated value based on all rows.</li><li>**All values** - Show a separate value for every row. If you select this option, then you can also limit the number of rows to display.</li></ul> |
|
||||
| Calculation | If you chose **Calculate** as your **Show** option, select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types](ref:calculation-types). |
|
||||
| Limit | If you chose **All values** as your **Show** option, enter the maximum number of rows to display. The default is 5,000. |
|
||||
| Fields | Select the fields display in the panel. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Bar gauge options
|
||||
|
||||
Adjust how the gauge is displayed.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Orientation | Choose a stacking direction:<ul><li>**Auto** - Grafana determines the best orientation.</li><li>**Horizontal** - Bars stretch horizontally, left to right.</li><li>**Vertical** - Bars stretch vertically, bottom to top.</li></ul> |
|
||||
| Display mode | Choose a display mode:<ul><li>**Gradient** - Threshold levels define a gradient.</li><li>**Retro LCD** - The bar is split into sections that are lit or unlit.</li><li>**Basic** - Single color based on the matching threshold.</li></ul> |
|
||||
| Value display | Choose a value display mode:<ul><li>**Value color** - Value color is determined by value.</li><li>**Text color** - Value color is default text color.</li><li>**Hidden** - Values are hidden.</li></ul> |
|
||||
| Name placement | Set the name placement mode when the bar gauge orientation is **Auto** or **Horizontal**. Choose from:<ul><li>**Auto** - Grafana determines the best placement.</li><li>**Top** - Names are placed on top of each bar gauge.</li><li>**Left** - Names are placed to the left of each bar gauge.</li><li>**Hidden** - Names are hidden.</li></ul> <p>When the bar gauge is in the vertical orientation, choose from **Auto** (names are always placed at the bottom of each bar) or **Hidden**.</p>|
|
||||
| Show unfilled area | Select if you want to render the unfilled region of the bars as dark gray. Not applicable to **Retro LCD** display mode. |
|
||||
| Bar size | Choose a bar size mode:<ul><li>**Auto** - Grafana determines the best bar size.</li><li>**Manual** - Manually configure the bar size.</li></ul> |
|
||||
| Min width | Limit the minimum width of the bar column when the gauge is oriented vertically or is in **Auto** mode. Automatically shows the x-axis scroll bar when there's a large amount of data.<p>This option only applies when the **Bar size** mode is set to **Manual**.</p> |
|
||||
| Min height | Limit the minimum height of the bar row when the bar gauge is oriented horizontally or is in **Auto** mode. Automatically shows the y-axis scroll bar when there's a large amount of data. <p>This option only applies when the **Bar size** mode is set to **Manual**.</p> |
|
||||
| Max height | Limit the maximum height of the bar row when the bar gauge is oriented horizontally or is in **Auto** mode. Automatically shows the y-axis scroll bar when there's a large amount of data. <p>This option only applies when the **Bar size** mode is set to **Manual**.</p> |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Legend options
|
||||
|
||||
{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Text size options
|
||||
|
||||
Set the sizes of the following text elements in pixels:
|
||||
|
||||
- **Title** - Bar name
|
||||
- **Value** - Bar value
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
+332
@@ -0,0 +1,332 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/candlestick/ # /docs/grafana/next/features/panels/candlestick/
|
||||
- ../../../panels/visualizations/candlestick/ # /docs/grafana/next/panels/visualizations/candlestick/
|
||||
- ../../candlestick/ # /docs/grafana/next/visualizations/candlestick/
|
||||
- ../../../panels-visualizations/visualizations/candlestick/ # /docs/grafana/next/panels-visualizations/visualizations/candlestick/
|
||||
description: Configure options for Grafana's candlestick visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- Candlestick
|
||||
- OHLC
|
||||
- panel
|
||||
- documentation
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Candlestick
|
||||
weight: 100
|
||||
refs:
|
||||
time-series-visualization:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/time-series/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series/
|
||||
color-scheme:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/#color-scheme
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/#color-scheme
|
||||
configure-field-overrides:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/
|
||||
add-a-field-override:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/#add-a-field-override
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/#add-a-field-override
|
||||
---
|
||||
|
||||
# Candlestick
|
||||
|
||||
The candlestick visualization allows you to visualize data that includes a number of consistent dimensions focused on price movements, such as stock prices. The candlestick visualization includes an [Open-High-Low-Close (OHLC) mode](#open-high-low-close), as well as support for additional dimensions based on time series data.
|
||||
|
||||
Candlestick visualizations build upon the foundation of the [time series visualization](ref:time-series-visualization) and include many common configuration settings.
|
||||
|
||||
You can use a candlestick if you want to visualize, at a glance, how a price moved over time, whether it went up, down, or stayed the same, and how much it fluctuated:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-candlestick-v11.6.png" max-width="750px" alt="A candlestick visualization" >}}
|
||||
|
||||
Each candlestick is represented as a rectangle, referred to as the _candlestick body_. The candlestick body displays the opening and closing prices during a time period. Green candlesticks represent when the price appreciated while the red candlesticks represent when the price depreciated. The lines sticking out the candlestick body are referred to as _wicks_ or _shadows_, which represent the highest and lowest prices during the time period.
|
||||
|
||||
Use a candlestick when you need to:
|
||||
|
||||
- Monitor and identify trends in price movements of specific assets such as stocks, currencies, or commodities.
|
||||
- Analyze any volatility in the stock market.
|
||||
- Provide data analysis to help with trading decisions.
|
||||
|
||||
## Configure a candlestick
|
||||
|
||||
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 candlestick visualization:
|
||||
|
||||
{{< youtube id="IOFKBgbf3aM" >}}
|
||||
|
||||
{{< docs/play title="Candlestick" url="https://play.grafana.org/d/candlestick/candlestick" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
The candlestick visualization works best with price movement data for an asset. The data must include:
|
||||
|
||||
- **Timestamps** - The time at which each price movement occurred.
|
||||
- **Opening price** - The price of the asset at the beginning of the time period.
|
||||
- **Closing price** - The price of the asset at the end of the time period.
|
||||
- **Highest price** - The highest price the asset reached during the time period.
|
||||
- **Lowest price** - The lowest price the asset reached during the time period.
|
||||
|
||||
### Example
|
||||
|
||||
| Timestamps | Open | High | Low | Close |
|
||||
| ------------------- | ----- | ----- | ----- | ----- |
|
||||
| 2024-03-13 10:05:00 | 0.200 | 0.205 | 0.201 | 0.203 |
|
||||
| 2024-03-14 10:10:10 | 0.204 | 0.205 | 0.201 | 0.200 |
|
||||
| 2024-03-15 10:15:10 | 0.204 | 0.205 | 0.201 | 0.200 |
|
||||
| 2024-03-16 10:20:11 | 0.203 | 0.203 | 0.202 | 0.203 |
|
||||
| 2024-03-17 10:25:11 | 0.203 | 0.203 | 0.202 | 0.203 |
|
||||
| 2024-03-18 10:30:12 | 0.202 | 0.202 | 0.201 | 0.201 |
|
||||
|
||||
The data is converted as follows:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-candles-volume-v11.6.png" max-width="750px" alt="A candlestick visualization showing the price movements of specific asset." >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Candlestick options
|
||||
|
||||
The following options let you control which data is displayed in the visualization and how it appears:
|
||||
|
||||
| Option | Description |
|
||||
| ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Mode | Controls which dimensions are used for the visualization. Choose from:<ul><li>**Candles** - Uses the open, high, low, and close dimensions.</li><li>**Volume** - Uses only the volume dimension.</li><li>**Both** - The default behavior, which displays both candles and volume values.</li></ul> |
|
||||
| Candle style | Controls the appearance of the candles. Choose from:<ul><li>**Candles** - The default display style, which creates candle-style markers between the open and close dimensions.</li><li>**OHLC Bars** - Displays values for the four core dimensions, open, high, low, and close.</li></ul> |
|
||||
| [Color strategy](#color-strategy) | Controls how colors are applied to dimensions. Choose from:<ul><li>**Since Open** - This mode uses the **Up color** if the intra-period price movement is positive.</li><li>**Since Prior Close** - The color of the candle is based on the inter-period price movement or change in value.</li></ul> |
|
||||
| Up color/Down color | These options control which colors are used when the price movement is up or down. Note that the **Color strategy** selection determines if intra-period or inter-period price movement is used to select the candle or OHLC bar color. |
|
||||
| [Open, High, Low, Close, Volume](#open-high-low-close) | The candlestick visualization attempts to map fields from your data to these dimensions, as appropriate dimension. |
|
||||
| [Additional fields](#additional-fields) | The **Include** and **Ignore** options allow the candlestick visualization to display other included data such as simple moving averages, Bollinger bands and more, using the same styles and configurations available in the [time series](ref:time-series-visualization) visualization. |
|
||||
|
||||
#### Color strategy
|
||||
|
||||
The **Color strategy** option controls how colors are applied to dimensions. Choose from:
|
||||
|
||||
- **Since Open** - The default behavior. This mode uses the **Up color** if the intra-period price movement is positive. In other words, if the value on close is greater or equal to the value on open, the **Up color** is used.
|
||||
- **Since Prior Close** - An alternative display method where the color of the candle is based on the inter-period price movement or change in value. In other words, if the value on open is greater than the previous value on close, the **Up color** is used. If the value on open is lower than the previous value on close, the **Down color** is used.
|
||||
|
||||
This option also triggers the _hollow candlestick_ visualization mode. Hollow candlesticks indicate that the intra-period movement is positive (value is higher on close than on open), while filled candlesticks indicate the intra-period change is negative (value is lower on close than on open). To learn more, refer to the [explanation of the differences](https://thetradingbible.com/how-to-read-hollow-candlesticks).
|
||||
|
||||
#### Open, High, Low, Close, Volume {#open-high-low-close}
|
||||
|
||||
The candlestick visualization attempts to map fields from your data to the appropriate dimension:
|
||||
|
||||
- **Open** - Starting value of the given period.
|
||||
- **High** - Highest value of the given period.
|
||||
- **Low** - Lowest value of the given period.
|
||||
- **Close** - Final (end) value of the given period.
|
||||
- **Volume** - Sample count in the given period (for example, number of trades).
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
The candlestick visualization legend doesn't display these values.
|
||||
{{< /admonition >}}
|
||||
|
||||
If your data can't be mapped to these dimensions for some reason (for example, because the column names aren't the same), you can map them manually using the **Open**, **High**, **Low**, and **Close** fields under the **Candlestick** options in the panel editor:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-olhc-options-v11.6.png" max-width="400px" alt="Open, High, Low, and Close fields in the panel editor" >}}
|
||||
|
||||
#### Additional fields
|
||||
|
||||
The candlestick visualization is based on the time series visualization, and it can visualize additional data dimensions beyond open, high, low, close, and volume.
|
||||
The **Include** and **Ignore** options allow it to visualize other included data such as simple moving averages, Bollinger bands and more, using the same styles and configurations available in the [time series](ref:time-series-visualization) visualization.
|
||||
|
||||
### Tooltip options
|
||||
|
||||
Tooltip options control the information overlay that appears when you hover over data points in the visualization.
|
||||
|
||||
| Option | Description |
|
||||
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| [Tooltip mode](#tooltip-mode) | When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. |
|
||||
| [Values sort order](#values-sort-order) | This option controls the order in which values are listed in a tooltip. |
|
||||
| [Hover proximity](#hover-proximity) | Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display. |
|
||||
| Max width | Set the maximum width of the tooltip box. |
|
||||
| Max height | Set the maximum height of the tooltip box. The default is 600 pixels. |
|
||||
|
||||
#### Tooltip mode
|
||||
|
||||
When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave.
|
||||
|
||||
- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization.
|
||||
- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip.
|
||||
- **Hidden -** Do not display the tooltip when you interact with the visualization.
|
||||
|
||||
Use an override to hide individual series from the tooltip.
|
||||
|
||||
#### Values sort order
|
||||
|
||||
When you set the **Tooltip mode** to **All**, the **Values sort order** option is displayed. This option controls the order in which values are listed in a tooltip. Choose from the following:
|
||||
|
||||
- **None** - Grafana automatically sorts the values displayed in a tooltip.
|
||||
- **Ascending** - Values in the tooltip are listed from smallest to largest.
|
||||
- **Descending** - Values in the tooltip are listed from largest to smallest.
|
||||
|
||||
#### Hover proximity
|
||||
|
||||
Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display.
|
||||
The following screen recording shows this option in a time series visualization:
|
||||
|
||||
|
||||
|
||||
### Legend options
|
||||
|
||||
{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Graph styles options
|
||||
|
||||
The options under the **Graph styles** section let you control the general appearance of [additional fields](#additional-fields) in the visualization, excluding [color](#standard-options).
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| [Style](#style) | Choose whether to display your time-series data as **Lines**, **Bars**, or **Points**. |
|
||||
| [Line interpolation](#line-interpolation) | Choose how the graph interpolates the series line. |
|
||||
| Line width | Set the thickness of the series lines or the outline for bars using the **Line width** slider. |
|
||||
| Fill opacity | Set the series area fill color using the **Fill opacity** slider. |
|
||||
| [Gradient mode](#gradient-mode) | Choose a gradient mode to control the gradient fill, which is based on the series color. |
|
||||
| [Line style](#line-style) | Choose a solid, dashed, or dotted line style. |
|
||||
| [Connect null values](#connect-null-values) | Choose how null values, which are gaps in the data, appear on the graph. |
|
||||
| [Disconnect values](#disconnect-values) | Choose whether to set a threshold above which values in the data should be disconnected. |
|
||||
| [Show points](#show-points) | Set whether to show data points to lines or bars. |
|
||||
| Point size | Set the size of the points, from 1 to 40 pixels in diameter. |
|
||||
| [Stack series](#stack-series) | Set whether Grafana displays series on top of each other. |
|
||||
| [Bar alignment](#bar-alignment) | Set the position of the bar relative to a data point. |
|
||||
| Bar width factor | Set the width of the bar relative to minimum space between data points. A factor of 0.5 means that the bars take up half of the available space between data points. A factor of 1.0 means that the bars take up all available space. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Style
|
||||
|
||||
Choose whether to display your time-series data as **Lines**, **Bars**, or **Points**.
|
||||
You can use overrides to combine multiple styles in the same graph. Choose from the following:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-candle-style-v12.0.png" max-width="750px" alt="Graph styles" >}}
|
||||
|
||||
#### Line interpolation
|
||||
|
||||
Choose how the graph interpolates the series line:
|
||||
|
||||
- **Linear** - Points are joined by straight lines.
|
||||
- **Smooth** - Points are joined by curved lines that smooths transitions between points.
|
||||
- **Step before** - The line is displayed as steps between points. Points are rendered at the end of the step.
|
||||
- **Step after** - The line is displayed as steps between points. Points are rendered at the beginning of the step.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-candle-interpolation-v12.0.png" max-width="750px" alt="Line interpolation styles" >}}
|
||||
|
||||
#### Gradient mode
|
||||
|
||||
Choose a gradient mode to control the gradient fill, which is based on the series color. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme](ref:color-scheme).
|
||||
|
||||
- **None** - No gradient fill. This is the default setting.
|
||||
- **Opacity** - An opacity gradient where the opacity of the fill increases as y-axis values increase.
|
||||
- **Hue** - A subtle gradient that's based on the hue of the series color.
|
||||
- **Scheme** - A color gradient defined by your [Color scheme](ref:color-scheme). This setting is used for the fill area and line. For more information about scheme, refer to [Scheme gradient mode](#scheme-gradient-mode).
|
||||
|
||||
Gradient appearance is influenced by the **Fill opacity** setting. The following image shows the **Fill opacity** set to 50.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-candle-gradient-v12.0.png" max-width="750px" alt="Gradient modes" >}}
|
||||
|
||||
##### Scheme gradient mode
|
||||
|
||||
In **Scheme** gradient mode, the line or bar receives a gradient color defined from the selected **Color scheme** option in the visualization's **Standard** options.
|
||||
|
||||
The following image shows a line chart with the **Green-Yellow-Red (by value)** color scheme option selected:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-candle-scheme-grad-1-v12.0.png" max-width="600px" alt="Gradient color scheme" >}}
|
||||
|
||||
If the **Color scheme** is set to **From thresholds (by value)** and **Gradient mode** is set to **Scheme**, then the line or bar color changes as it crosses the defined thresholds:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-candle-scheme-grad-2-v12.0.png" max-width="600px" alt="Gradient color scheme with thresholds" >}}
|
||||
|
||||
#### Line style
|
||||
|
||||
Choose a solid, dashed, or dotted line style:
|
||||
|
||||
- **Solid** - Display a solid line. This is the default setting.
|
||||
- **Dash** - Display a dashed line. When you choose this option, a list appears for you to select the length and gap (length, gap) for the line dashes. Dash spacing is 10, 10 by default.
|
||||
- **Dots** - Display dotted lines. When you choose this option, a list appears for you to select the gap (length = 0, gap) for the dot spacing. Dot spacing is 0, 10 by default.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-candle-line-style-v12.0.png" max-width="750px" alt="Line styles" >}}
|
||||
|
||||
{{< docs/shared lookup="visualizations/connect-null-values.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
{{< docs/shared lookup="visualizations/disconnect-values.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
To change the color, use the standard [color scheme](ref:color-scheme) field option.
|
||||
|
||||
#### Show points
|
||||
|
||||
Set whether to show data points as lines or bars. Choose from the following:
|
||||
|
||||
- **Auto** - Grafana determines a point's visibility based on the density of the data. If the density is low, then points appear.
|
||||
- **Always** - Show the points regardless of how dense the dataset is.
|
||||
- **Never** - Don't show points.
|
||||
|
||||
#### Stack series
|
||||
|
||||
Set whether Grafana stacks or displays series on top of each other. Be cautious when using stacking because it can create misleading graphs. To read more about why stacking might not be the best approach, refer to [The issue with stacking](https://www.data-to-viz.com/caveat/stacking.html). Choose from the following:
|
||||
|
||||
- **Off** - Turns off series stacking. When **Off**, all series share the same space in the visualization.
|
||||
- **Normal** - Stacks series on top of each other.
|
||||
- **100%** - Stack by percentage where all series add up to 100%.
|
||||
|
||||
##### Stack series in groups
|
||||
|
||||
The stacking group option is only available as an override. For more information about creating an override, refer to [Configure field overrides](ref:configure-field-overrides).
|
||||
|
||||
1. Edit the panel and click **Overrides**.
|
||||
1. Create a field override for the **Stack series** option.
|
||||
1. In stacking mode, click **Normal**.
|
||||
1. Name the stacking group in which you want the series to appear.
|
||||
|
||||
The stacking group name option is only available when you create an override.
|
||||
|
||||
#### Bar alignment
|
||||
|
||||
Set the position of the bar relative to a data point. In the examples below, **Show points** is set to **Always** which makes it easier to see the difference this setting makes. The points don't change, but the bars change in relationship to the points. Choose from the following:
|
||||
|
||||
- **Before** 
|
||||
The bar is drawn before the point. The point is placed on the trailing corner of the bar.
|
||||
- **Center** 
|
||||
The bar is drawn around the point. The point is placed in the center of the bar. This is the default.
|
||||
- **After** 
|
||||
The bar is drawn after the point. The point is placed on the leading corner of the bar.
|
||||
|
||||
### Axis options
|
||||
|
||||
{{< docs/shared lookup="visualizations/axis-options-2.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,516 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/canvas/ # /docs/grafana/next/features/panels/canvas/
|
||||
- ../../canvas/ # /docs/grafana/next/visualizations/canvas/
|
||||
- ../../../panels-visualizations/visualizations/canvas/ # /docs/grafana/next/panels-visualizations/visualizations/canvas/
|
||||
description: Configure options for Grafana's canvas visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- canvas
|
||||
- panel
|
||||
- documentation
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Canvas
|
||||
weight: 100
|
||||
refs:
|
||||
data-links:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-data-links/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-data-links/
|
||||
---
|
||||
|
||||
# Canvas
|
||||
|
||||
Canvases combine the power of Grafana with the flexibility of custom elements.
|
||||
They are extensible visualizations that allow you to add and arrange elements wherever you want within unstructured static and dynamic layouts.
|
||||
This lets you design custom visualizations and overlay data in ways that aren't possible with standard Grafana visualizations, all within the Grafana UI.
|
||||
|
||||
{{< video-embed src="/static/img/docs/canvas-panel/canvas-beta-overview-9-2-0.mp4" max-width="750px" alt="Canvas beta overview" >}}
|
||||
|
||||
If you've used popular UI and web design tools, then designing canvases will feel very familiar.
|
||||
With all of these dynamic elements, there's almost no limit to what a canvas can display.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
We'd love your feedback on the canvas visualization. Please check out the [open Github issues](https://github.com/grafana/grafana/issues?page=1&q=is%3Aopen+is%3Aissue+label%3Aarea%2Fpanel%2Fcanvas) and [submit a new feature request](https://github.com/grafana/grafana/issues/new?assignees=&labels=type%2Ffeature-request,area%2Fpanel%2Fcanvas&title=Canvas:&projects=grafana-dataviz&template=1-feature_requests.md) as needed.
|
||||
{{< /admonition >}}
|
||||
|
||||
## Configure a canvas visualization
|
||||
|
||||
The following video shows you how to create and configure a canvas visualization:
|
||||
|
||||
{{< youtube id="b7AYKoFcPpY" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
The canvas visualization is unique in that it doesn't have any specific data requirements. You can even start adding and configuring visual elements without providing any data. However, any data you plan to consume should be accessible through supported Grafana data sources and structured in a way that ensures smooth integration with your custom elements.
|
||||
|
||||
If your canvas is going to update in real time, your data should support refreshes at your desired intervals without degrading the user experience.
|
||||
|
||||
You can tie [Elements](#elements) and [Connections](#connections) to data through options like text, colors, and background pattern images, etc. available in the canvas visualization.
|
||||
|
||||
## Elements
|
||||
|
||||
Elements are the basic building blocks of a canvas and they help you visualize data with different shapes and options. You can rotate and move elements around the canvas. When you move elements, snapping and alignment guides help you create more precise layouts.
|
||||
|
||||
Add elements in the [Layer](#layer-options) section of canvas options.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
Element snapping and alignment only works when the canvas is not zoomed in.
|
||||
{{< /admonition >}}
|
||||
|
||||
### Element types
|
||||
|
||||
When you select an element that you've added to a canvas, you can access [configuration options](#selected-element-options) for it that are dependent on the element type.
|
||||
|
||||
The following sections describe the different elements available.
|
||||
|
||||
{{< column-list >}}
|
||||
|
||||
- [Metric value](#metric-value)
|
||||
- [Text](#text)
|
||||
- [Ellipse](#basic-shapes)
|
||||
- [Rectangle](#basic-shapes)
|
||||
- [Icon](#icon)
|
||||
- [Server](#server)
|
||||
- [Triangle](#basic-shapes)
|
||||
- [Cloud](#basic-shapes)
|
||||
- [Parallelogram](#basic-shapes)
|
||||
- [Button](#button)
|
||||
|
||||
{{< /column-list >}}
|
||||
|
||||
#### Basic shapes
|
||||
|
||||
A basic shape element can display text (both fixed and field data) and its background color can be changed based on data thresholds. You can add the following basic shapes to a canvas:
|
||||
|
||||
- Cloud
|
||||
- Ellipse
|
||||
- Parallelogram
|
||||
- Rectangle
|
||||
- Triangle
|
||||
|
||||
#### Metric value
|
||||
|
||||
The metric value element lets you select the data you want to display on a canvas. This element has a unique “edit” mode that can be triggered either through the context menu “Edit” option or by double clicking. When in edit mode you can select which field data that you want to display.
|
||||
|
||||
#### Text
|
||||
|
||||
The text element lets you add text to the canvas. The element also supports an editing mode, triggered via either double clicking or the edit menu option in the context menu.
|
||||
|
||||
#### Icon
|
||||
|
||||
The icon element lets you add a supported icon to the canvas. Icons can have their color set based on thresholds or value mappings.
|
||||
|
||||
##### Add a custom icon
|
||||
|
||||
You can add a custom icon by referencing an SVG file. To add a custom icon, follow these steps:
|
||||
|
||||
1. Under **Icon > SVG Path**, if it's not already selected, select **Fixed** as your file source.
|
||||
1. Click **Select a value** in the field below.
|
||||
1. In the dialog box that opens, click the **URL** tab.
|
||||
1. Enter the URL in the field below the **URL** tab.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-canvas-custom-image-v11.3.png" max-width="250px" alt="Add a custom image URL" >}}
|
||||
|
||||
1. Click **Select**.
|
||||
1. (Optional) Add a background image to your icon with the **Background (icon)** option by following the steps to [add a custom image](#add-custom-images-to-elements).
|
||||
|
||||
If you don't have an SVG file, you can use a rectangle element instead of an icon and set its background image to an image file type. To add a custom image for another element type, follow the steps to [add a custom image](#add-custom-images-to-elements).
|
||||
|
||||
#### Server
|
||||
|
||||
The server element lets you easily represent a single server, a stack of servers, a database, or a terminal. Server elements support status color, bulb color, and a bulb blink rate all configurable by fixed or field values.
|
||||
|
||||
{{< figure src="/media/docs/grafana/canvas-server-element-9-4-0.png" max-width="650px" alt="Canvas server element" >}}
|
||||
|
||||
#### Button
|
||||
|
||||
The button element lets you add a basic button to the canvas. Button elements support triggering basic, unauthenticated API calls. [API settings](#button-api-options) are found in the button element editor. You can also pass template variables in the API editor.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
A button click will only trigger an API call when [inline editing](#inline-editing) is disabled.
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< video-embed src="/media/docs/grafana/2023-20-10-Canvas-Button-Element-Enablement-Video.mp4" max-width="650px" alt="Canvas button element demo" >}}
|
||||
|
||||
{{< docs/play title="Canvas Visualization: Buttons" url="https://play.grafana.org/d/c9ea65f5-ed5a-45cf-8fb7-f82af7c3afdf/" >}}
|
||||
|
||||
##### Button API options
|
||||
|
||||
The following options let you configure basic, unauthenticated API calls:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------- | ------------ |
|
||||
| Endpoint | Enter the endpoint URL. |
|
||||
| Method | Choose from **GET**, **POST**, and **PUT**. |
|
||||
| Content-Type | Select an option in the drop-down list. Choose from: JSON, Text, JavaScript, HTML, XML, and x-www-form-urlencoded. |
|
||||
| Query parameters | Enter as many **Key**, **Value** pairs as you need. |
|
||||
| Header parameters | Enter as many **Key**, **Value** pairs as you need. |
|
||||
| Payload | Enter the body of the API call. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Add custom images to elements
|
||||
|
||||
You can add custom background images to all elements except **Button** by referencing an image URL.
|
||||
The image must be hosted at a URL that allows requests from your Grafana instance.
|
||||
|
||||
To upload a custom image, follow these steps:
|
||||
|
||||
1. Under **Background (\<ELEMENT TYPE\>)**, if it's not already selected, select **Fixed** as your image source.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-canvas-custom-image-src-v11.3.png" max-width="300px" alt="Custom image source selection" >}}
|
||||
|
||||
1. Click **Select a value** in the field below.
|
||||
1. In the dialog box that opens, click the **URL** tab.
|
||||
1. Enter the URL in the field below the **URL** tab.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-canvas-custom-image-v11.3.png" max-width="250px" alt="Add a custom image URL" >}}
|
||||
|
||||
1. Click **Select**.
|
||||
|
||||
## Connections
|
||||
|
||||
When building a canvas, you can connect elements together to create more complex visualizations. You can also create connections to the background of the canvas.
|
||||
|
||||
To create a connection, follow these steps:
|
||||
|
||||
1. In the panel edit pane, expand the **Canvas** options section.
|
||||
1. Toggle on the **Inline editing** switch.
|
||||
1. Hover the cursor over an element you want to connect to display the connection anchors:
|
||||
|
||||
|
||||
|
||||
1. Drag the cursor from a connection anchor on that element to one on another element.
|
||||
|
||||
To remove a connection, click the connection and then press the `Delete` or `Backspace` key.
|
||||
|
||||
### Connection adjustments
|
||||
|
||||
You can adjust connections, adding angles to them, to fit the canvas you're working in. When you move connected elements, the connection resizes to fit the space.
|
||||
|
||||
- To adjust a connection, click it to display the midpoint controls and move those as needed.
|
||||
- To make a connection a straight line again, move the midpoint back until the midpoint controls disappear.
|
||||
|
||||
If you move a connection so that it's almost a right angle or a straight line, the connection snaps into that angle or into a straight line.
|
||||
|
||||
### Connection styles
|
||||
|
||||
You can set the size, color, direction, and style of connections based on fixed or field values. To do so, enter into panel edit mode, select the connection, and modify the connection's properties in the panel editor. For more information on connection styles, refer to [Selected connection options](#selected-connection-options).
|
||||
|
||||
{{< youtube id="0iO2gqv0XNA" >}}
|
||||
|
||||
## Canvas editing
|
||||
|
||||
You can make changes to a canvas visualization while in the context of the dashboard, or in dashboard mode. The following sections describe the editing options available in dashboard mode.
|
||||
|
||||
### Inline editor
|
||||
|
||||
You can edit your canvas inline while in dashboard mode. The inline editor menu displays the options relevant to the part of the canvas that you've selected. You can also move the editor window around.
|
||||
|
||||
{{< video-embed src="/static/img/docs/canvas-panel/canvas-inline-editor-9-2-0.mp4" max-width="750px" alt="Inline editor demo" >}}
|
||||
|
||||
### Context menu
|
||||
|
||||
The context menu lets you perform common tasks quickly and efficiently. Supported functionality includes opening and closing the inline editor, duplicating an element, deleting an element, and more.
|
||||
|
||||
The context menu is triggered by a right click action over the panel or over a given canvas element. When right clicking the panel, you are able to set a background image and easily add elements to the canvas.
|
||||
|
||||
{{< figure src="/static/img/docs/canvas-panel/canvas-panel-context-menu-9-3-0.png" max-width="350px" alt="Canvas panel context menu" >}}
|
||||
|
||||
When right clicking an element, you are able to edit, delete, duplicate, and modify the element's layer positioning.
|
||||
|
||||
{{< figure src="/static/img/docs/canvas-panel/canvas-context-menu-9-2-0.png" max-width="250px" alt="Canvas element context menu" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Canvas options
|
||||
|
||||
#### Inline editing
|
||||
|
||||
The inline editing toggle lets you lock or unlock the canvas. When turned off the canvas becomes “locked”, freezing elements in place and preventing unintended modifications.
|
||||
|
||||
{{< video-embed src="/static/img/docs/canvas-panel/canvas-inline-editing-toggle-9-2-0.mp4" max-width="750px" alt="Inline editing toggle demo" >}}
|
||||
|
||||
#### Experimental Element types
|
||||
|
||||
Toggle the switch to include experimental element types in the available selections.
|
||||
|
||||
#### Pan and zoom
|
||||
|
||||
You can enable panning and zooming in a canvas. This allows you to both create and navigate more complex designs.
|
||||
|
||||
{{< docs/public-preview product="Canvas pan and zoom" featureFlag="`canvasPanelPanZoom`" >}}
|
||||
|
||||
Use the following pointer and keyboard strokes:
|
||||
|
||||
- **Zoom in** - Scroll up
|
||||
- **Zoom out** - Scroll down
|
||||
- **Pan** - Middle mouse/wheel + drag OR Control + right-click + drag
|
||||
- **Reset** - Double-click
|
||||
|
||||
{{< video-embed src="/media/docs/grafana/2024-01-05-Canvas-Pan-&-Zoom-Enablement-Video.mp4" max-width="750px" alt="Canvas pan and zoom enablement video" >}}
|
||||
|
||||
##### Zoom to content
|
||||
|
||||
When you toggle on the **Zoom to content** switch, Grafana automatically adjusts the view to fit all visible elements in your canvas visualization into the viewport, adding a small margin around the edges. This makes it easy to reset your view, present content, or switch between devices without losing your framing. The content will re‑fit even if you resize the panel.
|
||||
|
||||
##### Infinite panning
|
||||
|
||||
You can enable infinite panning in a canvas when pan and zoom is enabled. This allows you to pan and zoom the canvas and uncover larger designs.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
Infinite panning is an experimental feature that may not work as expected in all scenarios. For example, elements that are not top-left constrained may experience unexpected movement when panning.
|
||||
{{< /admonition >}}
|
||||
|
||||
### Tooltip options
|
||||
|
||||
The **Tooltip mode** setting controls the display of tooltips when hovering over canvas elements that are connected to data, data links, or actions.
|
||||
The options are:
|
||||
|
||||
- **Enabled** - Show a tooltip when the cursor hovers over an element.
|
||||
- **Disabled** - Tooltips are not shown on hover.
|
||||
|
||||
The **Disable for one-click elements** setting allows hiding tooltips on elements that have one-click functionality enabled. This prevents tooltips from interfering with one-click interactions while still allowing tooltips on other elements.
|
||||
|
||||
### Layer options
|
||||
|
||||
The **Layer** options let you add elements to the canvas and control its appearance:
|
||||
|
||||
- [Elements](#elements-layer)
|
||||
- [Background](#background-canvas)
|
||||
- [Border](#border-canvas)
|
||||
|
||||
#### Elements (layer)
|
||||
|
||||
Use the **Add item** button to open the [element type](#element-types) drop-down list. Elements are listed in the reverse order that you add them to the canvas:
|
||||
|
||||
|
||||
|
||||
By default, elements have numbered names, like "Element 1", and those numbers correspond to the order in which the elements were added, but you can [change the default names](#rename-an-element).
|
||||
|
||||
You can also take the following actions on elements:
|
||||
|
||||
- Change the order of elements by clicking and holding the row of the element while moving it up and down in the element list.
|
||||
- Duplicate or remove elements by clicking the icons on the element row.
|
||||
- Access the element editing options by clicking the element row. This displays the [Selected element](#selected-element-options) section of options. Click **Clear selection** to remove the element from focus and stop displaying that section of options.
|
||||
|
||||
##### Rename an element
|
||||
|
||||
To update the name of an element, follow these steps:
|
||||
|
||||
1. Hover the cursor over the element name so the **Edit layer name** (pencil) icon is displayed.
|
||||
1. Click the **Edit layer name** icon.
|
||||
1. Enter a new name.
|
||||
1. Click outside of the name field.
|
||||
|
||||
#### Background (canvas)
|
||||
|
||||
Use the following options to control the background of the canvas:
|
||||
|
||||
| Option | Description |
|
||||
| ---------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| Color | Set the background color. |
|
||||
| Image | Use one of the provided background images or [add your own custom image](#add-custom-images-to-elements). |
|
||||
| Image size | Control the size of the image or set it as a tile. |
|
||||
|
||||
#### Border (canvas)
|
||||
|
||||
Use the following options to control the border of the canvas:
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------------------------------------------------------------------------------------------- |
|
||||
| Width | Set the border width in pixels. |
|
||||
| Color | Set the border color. This option is only displayed when the border width is greater than zero. |
|
||||
| Radius | Add rounded corners to the border and control the degree of curve. |
|
||||
|
||||
### Selected element options
|
||||
|
||||
The following options allow you to control the appearance of the element you've selected. To access an element so that you can edit it, expand the **Layer** section and select the desired element.
|
||||
|
||||
| Option | Description |
|
||||
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
|
||||
| [Element type](#element-type) | Change the selected element type. |
|
||||
| [Element](#element) | Control the appearance of text on the element. This section is named based on the element type. |
|
||||
| [Layout](#layout) | Control the placement of elements on the canvas. |
|
||||
| [Background (element)](#background-element) | Set the background of the element. |
|
||||
| [Border (element)](#border-element) | Set the border of the element. |
|
||||
| [Data links and actions](#data-links-and-actions) | Configure data links and actions for elements. |
|
||||
|
||||
#### Element type
|
||||
|
||||
You can change element type by making a new selection in the drop-down list:
|
||||
|
||||
|
||||
|
||||
#### Element
|
||||
|
||||
This section is named based on the element type. Control the appearance of text on the element with the following options:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| -------------- | --------------------------------------------------------- |
|
||||
| Style | Buttons only. Select an option in the **Variant** drop-down list to indicate what kind of action the button initiates. Choose from **primary**, **secondary**, **success**, and **destructive**. |
|
||||
| Text | Select a **Source**. Choose from **Fixed** or **Field**. If you selected **Fixed**, enter text in the **Value** field. If you selected **Field**, choose the field. |
|
||||
| Text color | Choose a text color. |
|
||||
| Align text | Set the horizontal alignment of text within the element. Choose from **Left**, **Center**, and **Right**. |
|
||||
| Vertical align | Set the vertical alignment of the text within the element. Choose from **Top**, **Middle**, and **Bottom**. |
|
||||
| Text size | Set the text size. Leave the field empty to allow Grafana to automatically set the text size. |
|
||||
| API | Buttons only. Configure API options. For more information, refer to [Button API options](#button-api-options). |
|
||||
|
||||
<!--prettier-ignore-end -->
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
Icons don't have text, so they have different options:
|
||||
|
||||
| Option | Description |
|
||||
| -------------- | --------------------------------------------------------- |
|
||||
| SVG Path | Choose whether the icon SVG file source is **Fixed** or **Field**. If you selected **Fixed**, choose a provided option or [add a custom icon](#add-a-custom-icon). If you selected **Field**, choose a field. |
|
||||
| Fill color | Choose a fill color for the icon. |
|
||||
|
||||
<!--prettier-ignore-end -->
|
||||
|
||||
#### Layout
|
||||
|
||||
Control the placement of elements on the canvas with the following options:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| --------------- | --------------- |
|
||||
| Quick placement | Select an alignment option to automatically place the element. Choose from:<ul><li>Align left</li><li>Align horizontal centers</li><li>Align right</li><li>Align top</li><li>Align vertical centers</li><li>Align bottom</li></ul> |
|
||||
| Constraints | Set element constraints. Choose from: **Left**, **Right**, **Left & Right**, **Center**, and **Scale**.<br></br>Use the **Scale** option to ensure that elements are automatically resized when the panel size changes. |
|
||||
| Position | Use these settings to manually set the position of an element. Set any or all of the following options: **top**, **left**, **width**, **height**, and **rotation**. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Background (element)
|
||||
|
||||
Use the following options to set the background of the element:
|
||||
|
||||
- **Color** - Set the background color.
|
||||
- **Image** - Use one of the provided background images or [add your own custom image](#add-custom-images-to-elements).
|
||||
|
||||
This option doesn't apply to the button element.
|
||||
|
||||
#### Border (element)
|
||||
|
||||
Use the following options to set the border of the element:
|
||||
|
||||
- **Width** - Set the border width in pixels.
|
||||
- **Color** - Set the border color. This option is only displayed when the border width is greater than zero.
|
||||
- **Radius** - Add rounded corners to the element border and control the degree of curve.
|
||||
|
||||
#### Data links and actions
|
||||
|
||||
Canvases support [data links](ref:data-links) and actions for all elements.
|
||||
|
||||
If you add multiple data links or actions to an element, you can control the order in which they appear in the element tooltip.
|
||||
To do this, click and drag the link or action to the desired position.
|
||||
|
||||
The following tasks describe how to configure data links and actions.
|
||||
|
||||
{{< tabs >}}
|
||||
{{< tab-content name="Add data links" >}}
|
||||
To add a data link, follow these steps:
|
||||
|
||||
1. Enable inline editing.
|
||||
1. Click the element to which you want to add the data link.
|
||||
1. In either the inline editor or panel editor, expand the **Selected element** editor.
|
||||
1. Scroll down to the **Data links and actions** section and expand it.
|
||||
1. Click **+ Add link**.
|
||||
1. In the dialog box that opens, enter a **Title**.
|
||||
|
||||
This is a human-readable label for the link displayed in the UI. This is a required field.
|
||||
|
||||
1. Enter the **URL** or variable to which you want to link.
|
||||
|
||||
To add a data link variable, click in the **URL** field and enter `$` or press Ctrl+Space or Cmd+Space to see a list of available variables. This is a required field.
|
||||
|
||||
1. If you want the link to open in a new tab, toggle the **Open in a new tab** switch.
|
||||
1. If you want the data link to open with a single click on the element, toggle the **One click** switch.
|
||||
|
||||
Only one data link or action can have **One click** enabled at a time.
|
||||
|
||||
1. Click **Save** to save changes and close the dialog box.
|
||||
1. Disable inline editing.
|
||||
{{< /tab-content >}}
|
||||
{{< tab-content name="Add actions" >}}
|
||||
To add an action, by follow these steps:
|
||||
|
||||
1. Enable inline editing.
|
||||
1. Click the element to which you want to add the data link.
|
||||
1. In either the inline editor or panel editor, expand the **Selected element** editor.
|
||||
1. Scroll down to the **Data links and actions** section and expand it.
|
||||
1. Click **+ Add action**.
|
||||
In the dialog box that opens, set the action options:
|
||||
|
||||
| Option | Description |
|
||||
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Title | A human-readable label for the action that's displayed in the UI. |
|
||||
| Confirmation message | A descriptive prompt to confirm or cancel the action. |
|
||||
| One click | If you want the action to be triggered by a single click on the element, toggle the switch.</p><p>Only one data link or action can have **One click** enabled at a time. |
|
||||
| Method | Select from **POST**, **PUT**, or **GET**. |
|
||||
| URL | The request URL or variable to which you want to link.</p><p>To add a variable, click in the **URL** field and enter `$` or press Ctrl+Space or Cmd+Space to see a list of available variables. |
|
||||
| Variables | **Key** and **Name** pairs with a type selection. Click the **+** icon to add as many variables as you need. To add a variable to the request, prefix the key with `$`. You can set the values for the variables when performing an action. |
|
||||
| Query parameters | **Key** and **Value** pairs. Click the **+** icon to add as many key/value pairs as you need. |
|
||||
| Headers | Comprised of **Key** and **Value** pairs and a **Content-Type**.</p><p>Click the **+** icon to add as many key/value pairs as you need. |
|
||||
| Content-Type | Select from the following: **application/json**, **text/plain**, **application/XML**, and **application/x-www-form-urlencoded**. |
|
||||
| Body | The body of the request. |
|
||||
|
||||
1. Click **Save** to save changes and close the dialog box.
|
||||
1. Disable inline editing.
|
||||
{{< /tab-content >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Selected connection options
|
||||
|
||||
You can style the selected connection using the following options:
|
||||
|
||||
- **Color** - Set the connection color.
|
||||
- **Size** - Control the size of the connection by entering a number in the **Value** field.
|
||||
- **Radius** - Add curve to the connection by entering a value to represent the degree.
|
||||
- **Direction** - Control the appearance of the arrow head. Choose your source from **Fixed** or **Field**. The default value is **Forward** regardless of the source type.
|
||||
|
||||
If the direction source is **Fixed**, choose from:
|
||||
- **Forward** - The arrow head points in the direction in which the connection was drawn.
|
||||
- **Reverse** - The arrow head points in the opposite direction of which the connection was drawn.
|
||||
- **Both** - Adds arrow heads to both ends of the connection.
|
||||
- **None** - Removes the arrow head.
|
||||
|
||||
If the direction source is **Field**, select a field that contains numeric values:
|
||||
- **Positive values** - Display forward arrows.
|
||||
- **Negative values** - Display reverse arrows.
|
||||
- **Zero** - Display no arrow heads.
|
||||
|
||||
- **Line style** - Choose from the following line styles: **Solid**, **Dashed**, and **Dotted**.
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/dashlist/ # /docs/grafana/next/features/panels/dashlist/
|
||||
- ../../../panels/visualizations/dashboard-list-panel/ # /docs/grafana/next/panels/visualizations/dashboard-list-panel/
|
||||
- ../../../reference/dashlist/ # /docs/grafana/next/reference/dashlist/
|
||||
- ../../dashboard-list-panel/ # /docs/grafana/next/visualizations/dashboard-list-panel/
|
||||
- ../../../panels-visualizations/visualizations/dashboard-list/ # /docs/grafana/next/panels-visualizations/visualizations/dashboard-list/
|
||||
keywords:
|
||||
- grafana
|
||||
- dashboard list
|
||||
- documentation
|
||||
- panel
|
||||
- dashlist
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's dashboard list visualization
|
||||
title: Dashboard list
|
||||
weight: 100
|
||||
refs:
|
||||
dashboard-url-variables:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard-url-variables/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard-url-variables/
|
||||
dashboard:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard/
|
||||
---
|
||||
|
||||
# Dashboard list
|
||||
|
||||
Dashboard lists allow you to display dynamic links to other dashboards. You can configure the list to use starred dashboards, recently viewed dashboards, a search query, and dashboard tags.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-dashboard-list-v11.6.png" max-width="750px" alt="A dashboard list visualization" >}}
|
||||
|
||||
On each dashboard load, this panel queries the dashboard list, always providing the most up-to-date results.
|
||||
|
||||
You can use a dashboard list visualization to display a list of important dashboards that you want to track.
|
||||
|
||||
## Configure a dashboard list visualization
|
||||
|
||||
Once you’ve created a [dashboard](ref:dashboard), the following video shows you how to configure a dashboard list visualization:
|
||||
|
||||
{{< youtube id="MserjWGWsh8" >}}
|
||||
|
||||
{{< docs/play title="Dashboard List Visualization" url="https://play.grafana.org/d/fdlojrg7daebka/" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Dashboard list options
|
||||
|
||||
Use the following options to refine your dashboard list visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Include current time range | Propagate the time range of the current dashboard to the dashboard list links. When you click a link, the linked dashboard opens with the indicated time range already set. |
|
||||
| Include current template variable values | Include template variables that are being used as query parameters in the dashboard list link. When you click the link, any matching templates in the linked dashboard are set to the values from the link. Learn more in [Dashboard URL variables](ref:dashboard-url-variables). |
|
||||
| Starred | Display starred dashboards in alphabetical order. |
|
||||
| Recently viewed | Display recently viewed dashboards in alphabetical order. |
|
||||
| Search | Display dashboards returned by search. You must enter at least one value in the search fields, **Query** or **Tags**. Variable interpolation is supported for both fields. For example, `$my_var` or `${my_var}`. |
|
||||
| Show headings | Headings for enabled sections are displayed. Sections are:<ul><li>**Starred**</li><li>**Recently viewed**</li><li>**Search**</li> |
|
||||
| Show folder names | Display the name of the folder where the dashboard is located. |
|
||||
| Max items | Set the maximum number of items to list per section. If you enter "10" and enable **Starred** and **Recently viewed** dashboards, the panel displays up to 20 total dashboards, 10 in each section. |
|
||||
| [Query](#query) | Search by dashboard name. This option is only applied when the **Search** switch is toggled on. |
|
||||
| [Folder](#folder) | Only dashboards from the selected folder are displayed in the dashboard list. This option is only applied when the **Search** switch is toggled on. |
|
||||
| [Tags](#tags) | Search by tags. This option is only applied when the **Search** switch is toggled on. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Query
|
||||
|
||||
Use this field to search by dashboard name. Query terms are case-insensitive and partial values are accepted.
|
||||
For example, if you have dashboards called "Indoor Temps" and "Outdoor temp", entering the word "temp" returns both results.
|
||||
This option is only applied when the **Search** switch is toggled on.
|
||||
|
||||
#### Folder
|
||||
|
||||
Only dashboards from the selected folder are included in search results and displayed in the dashboard list.
|
||||
To include all dashboards in search results, select the top-level **Dashboards** folder.
|
||||
This option is only applied when the **Search** switch is toggled on.
|
||||
|
||||
#### Tags
|
||||
|
||||
Enter tags by which you want to search. Note that tags don't appear as you type, and they're case sensitive.
|
||||
Tag search uses an `OR` condition, so if a dashboard has one of the defined tags, it's included in the list.
|
||||
|
||||
When multiple tags and strings appear, the dashboard list displays those matching _all_ conditions.
|
||||
|
||||
This option is only applied when the **Search** switch is toggled on.
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/datagrid_panel/ # /docs/grafana/next/features/panels/datagrid_panel/
|
||||
- ../../../reference/datagrid/ # /docs/grafana/next/reference/datagrid/
|
||||
- ../../datagrid/ # /docs/grafana/next/visualizations/datagrid/
|
||||
- ../../../panels-visualizations/visualizations/datagrid/ # /docs/grafana/next/panels-visualizations/visualizations/datagrid/
|
||||
description: Configure options for Grafana's datagrid visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- dashboard
|
||||
- panels
|
||||
- datagrid
|
||||
- datagrid panel
|
||||
- datagrid options
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
menuTitle: Datagrid
|
||||
title: Datagrid
|
||||
weight: 100
|
||||
refs:
|
||||
special-data-sources:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/#special-data-sources
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/connect-externally-hosted/data-sources/#special-data-sources
|
||||
---
|
||||
|
||||
# Datagrid
|
||||
|
||||
{{< docs/experimental product="The datagrid visualization" featureFlag="`enableDatagridEditing`" >}}
|
||||
|
||||
Datagrids offer you the ability to create, edit, and fine-tune data within Grafana. As such, this panel can act as a data source for other panels
|
||||
inside a dashboard.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-datagrid-visualization-v12.0.png" max-width="750px" alt="The datagrid visualization" >}}
|
||||
|
||||
Through it, you can manipulate data queried from any data source, you can start from a blank slate, or you can pull data from a dragged and dropped file.
|
||||
You can then use the panel as a simple tabular visualization, or you can modify the data—and even remove it altogether—to create a blank slate.
|
||||
|
||||
Editing the dataset changes the data source to use the inbuilt `-- Grafana --` data source, thus replacing the old data source settings and related queries, while also copying the current dataset into the dashboard model.
|
||||
|
||||
You can then use the panel as a data source for other panels, by using the inbuilt `-- Dashboard --` data source to pull the datagrid data.
|
||||
This allows for an interactive dashboard experience, where you can modify the data and see the changes reflected in other panels.
|
||||
|
||||
Learn more about the inbuilt `-- Grafana --` and `-- Dashboard --` data sources in the [special data sources](ref:special-data-sources) documentation.
|
||||
|
||||
## Context menu
|
||||
|
||||
To provide a more streamlined experience, the datagrid has a context menu that can be accessed by right-clicking on a cell, column header, or row selector. Depending on the state of your datagrid, the context menu offers different options including:
|
||||
|
||||
- Delete or clear rows and columns.
|
||||
- Remove all existing data (rendering your datagrid blank).
|
||||
- Trigger search functionality, which allows you to find keywords within the dataset.
|
||||
|
||||
Deleting a row or column will remove the data from the datagrid, while clearing a row or column will only remove the data from the cells, leaving the row or column intact.
|
||||
|
||||
{{< figure src="/media/docs/datagrid/screenshot-grafana-datagrid-context-menu-2.png" alt="Datagrid context menu" max-width="400px" >}}
|
||||
|
||||
### Header menu
|
||||
|
||||
You can also access a header menu by clicking the dropdown icon next to the header title. From here, you can not only delete or clear a column, but also rename it, freeze it, or convert the field type of the column.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-datagrid-header-menu-v12.0.png" alt="Datagrid header menu" max-width="400px" >}}
|
||||
|
||||
## Use datagrids
|
||||
|
||||
Datagrids offer various ways of interacting with your data. You can add, edit, move, clear, and remove rows and columns; use the inbuilt search functionality to find specific data; and convert field types or freeze horizontal scroll on a specific column.
|
||||
|
||||
### Add data
|
||||
|
||||
You can add data to a datagrid by creating a new column or row.
|
||||
|
||||
To create a new column, follow these steps:
|
||||
|
||||
1. In an existing panel, click the **+** button in the table header after the last column.
|
||||
1. When prompted, add a name for the new column.
|
||||
1. Click anywhere outside the field or press the Enter key to save the column.
|
||||
|
||||
Now you can add data in each cell.
|
||||
|
||||
To add a new row, click a **+** button after the last row. The button is present in each cell after the last row, and clicking it triggers the creation of a new row while also activating the cell that you clicked.
|
||||
|
||||
### Edit data
|
||||
|
||||
To edit data, follow these steps:
|
||||
|
||||
1. Double-click on the cell that needs to be modified. This will activate the cell and allow you to edit the data.
|
||||
1. After editing the data, click anywhere outside the cell or press the Enter key to finalize the edit.
|
||||
|
||||
To easily clear a cell of data, you can click on a cell to focus it and then press the Delete key.
|
||||
|
||||
### Move data
|
||||
|
||||
You can move columns and rows as needed.
|
||||
|
||||
To move a column, follow these steps:
|
||||
|
||||
1. Click and hold the header of the column that needs to be moved.
|
||||
1. Drag the column to the desired location.
|
||||
1. Release the mouse button to finalize the move.
|
||||
|
||||
To move a row, click and hold on the row selector from the number column situated on the far left side of the grid, and drag it to the desired location. Releasing the mouse button finalizes the move.
|
||||
|
||||
### Select multiple cells
|
||||
|
||||
You can select multiple cells by clicking on a single cell and dragging the mouse across others. This selection can be used to copy the data from the selected cells or to delete them using the Delete key.
|
||||
|
||||
### Delete/clear multiple rows or columns
|
||||
|
||||
To delete or clear multiple rows, follow these steps:
|
||||
|
||||
1. Hover over the number column (to the left of the first column in the grid) to display row checkbox.
|
||||
1. Select the checkboxes for the rows you want to work with.
|
||||
To select multiple consecutive rows, press and hold the Shift key while clicking on the first and last row. To select non-consecutive rows, press and hold the Ctrl (or Cmd) key while clicking the desired rows.
|
||||
1. Right-click to access the context menu.
|
||||
1. Select **Delete rows** or **Clear rows**.
|
||||
|
||||
The same rules apply to columns by clicking the column headers.
|
||||
|
||||
To delete all rows, use the select all checkbox at the top left corner of the datagrid. This selects all rows and allows you to delete them using the context menu.
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Datagrid options
|
||||
|
||||
If there are multiple series, you can choose the dataset the datagrid displays using the **Select series** option.
|
||||
+202
@@ -0,0 +1,202 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../flame-graph/ # /docs/grafana/next/visualizations/flame-graph/
|
||||
- ../../../panels-visualizations/visualizations/flame-graph/ # /docs/grafana/next/panels-visualizations/visualizations/flame-graph/
|
||||
keywords:
|
||||
- grafana
|
||||
- dashboard
|
||||
- documentation
|
||||
- panels
|
||||
- flame graph
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's flame graph visualization
|
||||
title: Flame graph
|
||||
weight: 100
|
||||
refs:
|
||||
units:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/#unit
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/#unit
|
||||
configure-field-overrides:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/
|
||||
---
|
||||
|
||||
# Flame graph
|
||||
|
||||
Flame graphs let you visualize [profiling](https://grafana.com/docs/pyroscope/latest/introduction/what-is-profiling/) data. Using this visualization, a [profile](https://grafana.com/docs/pyroscope/latest/view-and-analyze-profile-data/profiling-types/) can be represented as a [flame graph](#flame-graph-mode), [top table](#top-table-mode), or both.
|
||||
|
||||
For example, if you want to understand which parts of a program consume the most resources, such as CPU time, memory, or I/O operations, you can use a flame graph to visualize and analyze where potential performance issues are:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-flamegraph-dark-v12.0.png" max-width="750px" alt="A flame graph visualization for a system profile with both flame graph and top table mode." >}}
|
||||
|
||||
You can use a flame graph visualization if you need to:
|
||||
|
||||
- Identify any performance hotspots to find where code optimizations may be needed.
|
||||
- Diagnose the root cause of any performance degradation.
|
||||
- Analyze the behavior of complex systems, including distributed systems or microservices architectures.
|
||||
|
||||
To learn more about how Grafana Pyroscope visualizes flame graphs, refer to [Flame graphs: Visualizing performance data](https://grafana.com/docs/pyroscope/latest/view-and-analyze-profile-data/flamegraphs/).
|
||||
|
||||
## Configure a flame graph 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 flame graph visualization:
|
||||
|
||||
{{< youtube id="VEvK0JkPlOY" >}}
|
||||
|
||||
{{< docs/play title="Flame Graphs" url="https://play.grafana.org/d/cdl34qv4zzg8wa/" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
To render a flame graph, you must format the data frame data using a _nested set model_.
|
||||
|
||||
A nested set model ensures each item of a flame graph is encoded by its nesting level as an integer value, its metadata, and by its order in the data frame. This means that the order of items is significant and needs to be correct. The ordering is a depth-first traversal of the items in the flame graph which recreates the graph without needing variable-length values in the data frame like in a children's array.
|
||||
|
||||
Required fields:
|
||||
|
||||
| Field name | Type | Description |
|
||||
| ---------- | ------ | --------------------------------------------------------------------------------------------------------------------------- |
|
||||
| level | number | The nesting level of the item. In other words how many items are between this item and the top item of the flame graph. |
|
||||
| value | number | The absolute or cumulative value of the item. This translates to the width of the item in the graph. |
|
||||
| label | string | Label to be shown for the particular item. |
|
||||
| self | number | Self value, which is usually the cumulative value of the item minus the sum of cumulative values of its immediate children. |
|
||||
|
||||
### Example
|
||||
|
||||
The following table is an example of the type of data you need for a flame graph visualization and how it should be formatted:
|
||||
|
||||
| level | value | self | label |
|
||||
| ----- | -------- | ------ | ----------------------------------------- |
|
||||
| 0 | 16.5 Bil | 16.5 K | total |
|
||||
| 1 | 4.10 Bil | 4.10 k | test/pkg/agent.(\*Target).start.func1 |
|
||||
| 2 | 4.10 Bil | 4.10 K | test/pkg/agent.(\*Target).start.func1 |
|
||||
| 3 | 3.67 Bil | 3.67 K | test/pkg/distributor.(\*Distributor).Push |
|
||||
| 4 | 1.13 Bil | 1.13 K | compress/gzip.(\*Writer).Write |
|
||||
| 5 | 1.06 Bil | 1.06 K | compress/flat.(\*compressor).write |
|
||||
|
||||
## Flame graph mode
|
||||
|
||||
A flame graph takes advantage of the hierarchical nature of profiling data. It condenses data into a format that allows you to easily see which code paths are consuming the most system resources, such as CPU time, allocated objects, or space when measuring memory. Each block in the flame graph represents a function call in a stack and its width represents its value.
|
||||
|
||||
Grayed-out sections are a set of functions that represent a relatively small value and they are collapsed together into one section for performance reasons.
|
||||
|
||||
{{< figure src="/static/img/docs/flame-graph-panel/flame-graph-mode-dark.png" max-width="700px" alt="A flame graph visualization for a system profile with flame graph mode." >}}
|
||||
|
||||
You can hover over a specific function to view a tooltip that shows you additional data about that function, like the function's value, percentage of total value, and the number of samples with that function.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-flamegraph-tooltip-v11.6.png" max-width="700px" alt="A flame graph visualization with a hover tooltip." >}}
|
||||
|
||||
### Menu actions
|
||||
|
||||
You can click a function to show a drop-down menu with additional actions:
|
||||
|
||||
- [Focus block](#focus-block)
|
||||
- [Copy function name](#copy-function-name)
|
||||
- [Sandwich view](#sandwich-view)
|
||||
- [Grouping](#grouping)
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-flamegraph-menu-v12.0.png" max-width="700px" alt="A flame graph visualization with drop-down actions." >}}
|
||||
|
||||
#### Focus block
|
||||
|
||||
When you click **Focus block**, the block, or function, is set to 100% of the flame graph's width and all its child functions are shown with their widths updated relative to the width of the parent function. This makes it easier to drill down into smaller parts of the flame graph.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-flamegraph-focus-v11.6.png" max-width="700px" alt="A flame graph visualization with focus block action selected." >}}
|
||||
|
||||
#### Copy function name
|
||||
|
||||
When you click **Copy function name**, the full name of the function that the block represents is copied.
|
||||
|
||||
#### Sandwich view
|
||||
|
||||
The sandwich view allows you to show the context of the clicked function. It shows all the function's callers on the top and all the callees at the bottom. This shows the aggregated context of the function so if the function exists in multiple places in the flame graph, all the contexts are shown and aggregated in the sandwich view.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-flamegraph-sandwich-v11.6.png" max-width="700px" alt="A flame graph visualization with sandwich view selected.">}}
|
||||
|
||||
#### Grouping
|
||||
|
||||
Under the **Grouping** section of the menu, the following options let you expand and collapse groups of functions:
|
||||
|
||||
- **Expand group** - Expands the grouped function you've clicked. Displayed if you click a function that's been automatically grouped in the flame graph.
|
||||
- **Expand all groups** - Expands all grouped functions in the flame graph. Always displayed when you click the graph.
|
||||
- **Collapse group** - Collapses the expanded function you've clicked. Displayed if you click a function in the flame graph that's been manually expanded.
|
||||
- **Collapse all groups** - Collapses all expanded functions in the flame graph. Displayed if there are any expanded functions when you click the graph.
|
||||
|
||||
### Status bar
|
||||
|
||||
The status bar shows metadata about the flame graph and currently applied modifications, like what part of the graph is in focus or what function is shown in sandwich view. Click the **X** in the status bar pill to remove that modification.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-flamegraph-status-v11.6.png" max-width="730px" alt="A flame graph visualization's status bar.">}}
|
||||
|
||||
## Top table mode
|
||||
|
||||
The top table shows the functions from the profile in table format. The table has three columns: symbols, self, and total. The table is sorted by self time by default, but can be reordered by total time or symbol name by clicking the column headers. Each row represents aggregated values for the given function if the function appears in multiple places in the profile.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-flamegraph-toptable-v12.0.png" max-width="700px" alt="Table view">}}
|
||||
|
||||
There are also action buttons on the left-most side of each row. The first button searches for the function name while second button shows the sandwich view of the function.
|
||||
|
||||
## Toolbar
|
||||
|
||||
The following table lists the features of the toolbar:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| [Search](#search) | Use the search field to find functions with a particular name. All the functions in the flame graph that match the search will remain colored while the rest of the functions appear in gray. |
|
||||
| Reset | Reset the flame graph back to its original state from a focus block or sandwich view. The reset icon is only displayed when the flame graph is in one of those two states. |
|
||||
| [Color schema picker](#color-schema-picker) | Switch between coloring functions by their value or by their package name to visually tie functions from the same package together. |
|
||||
| Grouping | Expand or collapse all groups to show all instances of a function or show the function grouped. |
|
||||
| Text align | Align text either to the left or to the right to show more important parts of the function name when it does not fit into the block. |
|
||||
| Visualization picker | Choose to show only the flame graph, only table, or both at the same time. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Search
|
||||
|
||||
You can use the search field to find functions with a particular name. All the functions in the flame graph that match the search will remain colored while the rest of the functions are grayed-out.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-flamegraph-search-v12.0.png" max-width="700px" alt="Searching for a function name in a flame graph visualization.">}}
|
||||
|
||||
### Color schema picker
|
||||
|
||||
You can switch between coloring functions by their value or by their package name to visually tie functions from the same package together.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-flamegraph-color-v11.6.png" max-width="700px" alt="Different color scheme" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Standard options
|
||||
|
||||
**Standard options** in the panel editor pane let you change how field data is displayed in your visualizations.
|
||||
When you set a standard option, the change is applied to all fields or series.
|
||||
For more granular control over the display of fields, refer to [Configure field overrides](ref:configure-field-overrides).
|
||||
|
||||
You can customize the following standard options:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Unit | This option lets you choose which unit a field should use. For more information on unit options as well as creating custom units, refer to the [unit configuration documentation](ref:units). |
|
||||
| Decimals | Specify the number of decimals Grafana includes in the rendered value. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,189 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/gauge/ # /docs/grafana/next/features/panels/gauge/
|
||||
- ../../../panels/visualizations/gauge-panel/ # /docs/grafana/next/panels/visualizations/gauge-panel/
|
||||
- ../../gauge-panel/ # /docs/grafana/next/visualizations/gauge-panel/
|
||||
- ../../../panels-visualizations/visualizations/gauge/ # /docs/grafana/next/panels-visualizations/visualizations/gauge/
|
||||
description: Configure options for Grafana's gauge visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- gauge
|
||||
- gauge panel
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Gauge
|
||||
weight: 100
|
||||
refs:
|
||||
calculation-types:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/calculation-types/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types/
|
||||
---
|
||||
|
||||
# Gauge
|
||||
|
||||
Gauges are single-value visualizations that allow you to quickly visualize where a value falls within a defined or calculated min and max range. With repeat options, you can display multiple gauges, each corresponding to a different series, column, or row.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-gauge-visualization-v11.4.png" alt="A gauge visualization">}}
|
||||
|
||||
You can use gauges if you need to track:
|
||||
|
||||
- Service level objectives (SLOs)
|
||||
- How full a piece of equipment is
|
||||
- How fast a vehicle is moving within a set of limits
|
||||
- Network latency
|
||||
- Equipment state with set point and alarm thresholds
|
||||
- CPU consumption (0-100%)
|
||||
- RAM availability
|
||||
|
||||
## Configure a gauge visualization
|
||||
|
||||
The following video provides beginner steps for creating gauge panels. You'll learn the data requirements and caveats, special customizations, and much more:
|
||||
|
||||
{{< youtube id="QwXj3y_YpnE" >}}
|
||||
|
||||
{{< docs/play title="Grafana Gauge Visualization" url="https://play.grafana.org/d/KIhkVD6Gk/" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
To create a gauge visualization you need a dataset containing at least one numeric field. These values are identified by the field name. Additional text fields aren’t required but can be used for identification and labeling.
|
||||
|
||||
### Example - One value
|
||||
|
||||
| GaugeName | GaugeValue |
|
||||
| --------- | ---------- |
|
||||
| MyGauge | 5 |
|
||||
|
||||
|
||||
|
||||
This dataset generates a visualization with one empty gauge showing the numeric value. This is because the gauge visualization automatically defines the upper and lower range from the minimum and maximum values in the dataset. This dataset has only one value, so it’s set as both minimum and maximum.
|
||||
|
||||
If you only have one value, but you want to define a different minimum and maximum, you can set them manually in the [Standard options](#standard-options) settings to generate a more typical looking gauge.
|
||||
|
||||
|
||||
|
||||
### Example - One row, multiple values
|
||||
|
||||
The gauge visualization can support multiple fields in a dataset. <!-- In this case, multiple gauges are displayed. -->
|
||||
|
||||
| Identifier | value1 | value2 | value3 |
|
||||
| ---------- | ------ | ------ | ------ |
|
||||
| Gauges | 5 | 3 | 10 |
|
||||
|
||||
|
||||
|
||||
When there are multiple values in the dataset, the visualization displays multiple gauges and automatically defines the minimum and maximum. In this case, those are 3 and 10. Because the minimum and maximum values are defined, each gauge is shaded in to show that value in relation to the minimum and maximum.
|
||||
|
||||
### Example - Multiple rows and values
|
||||
|
||||
The gauge visualization can display datasets with multiple rows of data or even multiple datasets.
|
||||
|
||||
| Identifier | value1 | value2 | value3 |
|
||||
| ---------- | ------ | ------ | ------ |
|
||||
| Gauges | 5 | 3 | 10 |
|
||||
| Indicators | 6 | 9 | 15 |
|
||||
| Defaults | 1 | 4 | 8 |
|
||||
|
||||
|
||||
|
||||
By default, the visualization is configured to [calculate](#value-options) a single value per column or series and to display only the last row of data. However, it derives the minimum and maximum from the full dataset, even if those values aren’t visible.
|
||||
|
||||
In this example, that means only the last row of data is displayed in the gauges and the minimum and maximum values are 1 and 10. The value 1 is displayed because it’s in the last row, while 10 is not.
|
||||
|
||||
If you want to show one gauge per table cell, you can change the **Show** setting from **Calculate** to **All values**, and each gauge is labeled by concatenating the text column with each value's column name.
|
||||
|
||||
|
||||
|
||||
### Example - Defined min and max
|
||||
|
||||
You can also define minimum and maximum values as part of the dataset.
|
||||
|
||||
| Identifier | value | max | min |
|
||||
| ---------- | ----- | --- | --- |
|
||||
| Gauges | 5 | 10 | 2 |
|
||||
|
||||
|
||||
|
||||
If you don’t want to display gauges for the `min` and `max` values, you can configure only one field to be displayed as described in the [value options](#value-options) section.
|
||||
|
||||
|
||||
|
||||
Even when minimum and maximum values aren’t displayed, the visualization still pulls the range from them.
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value options
|
||||
|
||||
Use the following options to refine how your visualization displays the value:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Show | Set how Grafana displays your data. Choose from:<ul><li>**Calculate** - Show a calculated value based on all rows.</li><li>**All values** - Show a separate value for every row. If you select this option, then you can also limit the number of rows to display.</li></ul> |
|
||||
| Calculation | If you chose **Calculate** as your **Show** option, select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types](ref:calculation-types). |
|
||||
| Limit | If you chose **All values** as your **Show** option, enter the maximum number of rows to display. The default is 5,000. |
|
||||
| Fields | Select the fields display in the panel. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Gauge options
|
||||
|
||||
Adjust how the gauge is displayed.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Orientation | Choose a stacking direction:<ul><li>**Auto** - Gauges display in rows and columns.</li><li>**Horizontal** - Gauges display top to bottom.</li><li>**Vertical** - Gauges display left to right.</li></ul> |
|
||||
| Show threshold labels | Controls if threshold values are shown. |
|
||||
| [Show threshold markers](#show-threshold-markers) | Controls if a threshold band is shown outside the inner gauge value band. |
|
||||
| Gauge size | Choose a gauge size mode:<ul><li>**Auto** - Grafana determines the best gauge size.</li><li>**Manual** - Manually configure the gauge size.</li></ul>This option only applies when **Orientation** is set to **Horizontal** or **Vertical**. |
|
||||
| Min width | Set the minimum width of vertically-oriented gauges. If you set a minimum width, the x-axis scrollbar is automatically displayed when there's a large amount of data. This option only applies when **Gauge size** is set to **Manual**. |
|
||||
| Min height | Set the minimum height of horizontally-oriented gauges. If you set a minimum height, the y-axis scrollbar is automatically displayed when there's a large amount of data. This option only applies when **Gauge size** is set to **Manual**. |
|
||||
| Neutral | Set the starting value from which every gauge will be filled. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Show threshold markers
|
||||
|
||||
Controls if a threshold band is shown around the inner gauge value band.
|
||||
|
||||
|
||||
|
||||
### Text size
|
||||
|
||||
Adjust the sizes of the gauge text.
|
||||
|
||||
- **Title** - Enter a numeric value for the gauge title size.
|
||||
- **Value** - Enter a numeric value for the gauge value size.
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,751 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/geomap/ # /docs/grafana/next/features/panels/geomap/
|
||||
- ../../../features/panels/geomap/arcgis/ # /docs/grafana/next/features/panels/geomap/arcgis/
|
||||
- ../../../features/panels/geomap/carto/ # /docs/grafana/next/features/panels/geomap/carto/
|
||||
- ../../../features/panels/geomap/controls/ # /docs/grafana/next/features/panels/geomap/controls/
|
||||
- ../../../features/panels/geomap/daynight/ # /docs/grafana/next/features/panels/geomap/daynight/
|
||||
- ../../../features/panels/geomap/geojson/ # /docs/grafana/next/features/panels/geomap/geojson/
|
||||
- ../../../features/panels/geomap/heatmap/ # /docs/grafana/next/features/panels/geomap/heatmap/
|
||||
- ../../../features/panels/geomap/markers/ # /docs/grafana/next/features/panels/geomap/markers/
|
||||
- ../../../features/panels/geomap/osm/ # /docs/grafana/next/features/panels/geomap/osm/
|
||||
- ../../../features/panels/geomap/zyx/ # /docs/grafana/next/features/panels/geomap/zyx/
|
||||
- ../../../panels/visualizations/geomap/ # /docs/grafana/next/panels/visualizations/geomap/
|
||||
- ../../../panels/visualizations/geomap/arcgis/ # /docs/grafana/next/panels/visualizations/geomap/arcgis/
|
||||
- ../../../panels/visualizations/geomap/carto/ # /docs/grafana/next/panels/visualizations/geomap/carto/
|
||||
- ../../../panels/visualizations/geomap/controls/ # /docs/grafana/next/panels/visualizations/geomap/controls/
|
||||
- ../../../panels/visualizations/geomap/daynight/ # /docs/grafana/next/panels/visualizations/geomap/daynight/
|
||||
- ../../../panels/visualizations/geomap/geojson/ # /docs/grafana/next/panels/visualizations/geomap/geojson/
|
||||
- ../../../panels/visualizations/geomap/heatmap/ # /docs/grafana/next/panels/visualizations/geomap/heatmap/
|
||||
- ../../../panels/visualizations/geomap/markers/ # /docs/grafana/next/panels/visualizations/geomap/markers/
|
||||
- ../../../panels/visualizations/geomap/osm/ # /docs/grafana/next/panels/visualizations/geomap/osm/
|
||||
- ../../../panels/visualizations/geomap/zyx/ # /docs/grafana/next/panels/visualizations/geomap/zyx/
|
||||
- ../../../visualizations/geomap/ # /docs/grafana/visualizations/geomap/
|
||||
- ../../../panels-visualizations/visualizations/geomap/ # /docs/grafana/next/panels-visualizations/visualizations/geomap/
|
||||
description: Configure options for Grafana's geomap visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- Geomap
|
||||
- panel
|
||||
- documentation
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Geomap
|
||||
weight: 100
|
||||
refs:
|
||||
data-format:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/node-graph/#data-api
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/node-graph/#data-api
|
||||
provisioning-docs-page:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/administration/provisioning/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/administration/provisioning/
|
||||
---
|
||||
|
||||
# Geomap
|
||||
|
||||
Geomaps allow you to view and customize the world map using geospatial data. It's the ideal visualization if you have data that includes location information and you want to see it displayed in a map.
|
||||
|
||||
You can configure and overlay [map layers](#layer-type), like heatmaps and networks, and blend included basemaps or your own custom maps. This helps you to easily focus on the important location-based characteristics of the data.
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-example-8-1-0.png" max-width="750px" alt="Geomap visualization" >}}
|
||||
|
||||
When a geomap is in focus, in addition to typical mouse controls, you can pan around using the arrow keys or zoom in and out using the plus (`+`) and minus (`-`) keys or icons.
|
||||
|
||||
Geomaps are also useful when you have location data that’s changing in real time and you want to visualize where an element is moving, using auto-refresh.
|
||||
|
||||
You can use a geomap visualization if you need to:
|
||||
|
||||
- Track your fleet of vehicles and associated metrics
|
||||
- Show the locations and statuses of data centers or other connected assets in a network
|
||||
- Display geographic trends in a heatmap
|
||||
- Visualize the relationship of your locations' HVAC consumption or solar production with the sun's location
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
We'd love your feedback on the geomap visualization. Please check out the [open Github issues](https://github.com/grafana/grafana/issues?page=1&q=is%3Aopen+is%3Aissue+label%3Aarea%2Fpanel%2Fgeomap) and [submit a new feature request](https://github.com/grafana/grafana/issues/new?assignees=&labels=type%2Ffeature-request,area%2Fpanel%2Fgeomap&title=Geomap:&projects=grafana-dataviz&template=1-feature_requests.md) as needed.
|
||||
{{< /admonition >}}
|
||||
|
||||
## Configure a geomap visualization
|
||||
|
||||
The following video provides beginner steps for creating geomap visualizations. You'll learn the data requirements and caveats, special customizations, preconfigured displays and much more:
|
||||
|
||||
{{< youtube id="HwM8AFQ7EUs" >}}
|
||||
|
||||
{{< docs/play title="Geomap Examples" url="https://play.grafana.org/d/panel-geomap/" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
To create a geomap visualization, you need datasets containing fields with location information.
|
||||
|
||||
The supported location formats are:
|
||||
|
||||
- Latitude and longitude
|
||||
- Geohash
|
||||
- Lookup codes: country, US states, or airports
|
||||
|
||||
To learn more, refer to [Location mode](#location-mode).
|
||||
|
||||
Geomaps also support additional fields with various data types to define things like labels, numbers, heat sizes, and colors.
|
||||
|
||||
### Example - Latitude and longitude
|
||||
|
||||
If you plan to use latitude and longitude coordinates, the dataset must include at least two fields (or columns): one called `latitude` (you can also use`lat`), and one called `longitude` (also `lon` or `lng`). When you use this naming convention, the visualization automatically detects the fields and displays the elements. The order of the fields doesn't matter as long as there is one latitude and one longitude.
|
||||
|
||||
| Name | latitude | longitude | value |
|
||||
| --------------- | --------- | --------- | ----- |
|
||||
| Disneyland | 33.8121 | -117.9190 | 4 |
|
||||
| DisneyWorld | 28.3772 | -81.5707 | 10 |
|
||||
| EuroDisney | 48.867374 | 2.784018 | 3 |
|
||||
| Tokyo Disney | 35.6329 | 139.8804 | 70 |
|
||||
| Shanghai Disney | 31.1414 | 121.6682 | 1 |
|
||||
|
||||
If your latitude and longitude fields are named differently, you can specify them, as indicated in the [Location mode](#location-mode) section.
|
||||
|
||||
### Example - Geohash
|
||||
|
||||
If your location data is in geohash format, the visualization requires at least one field (or column) containing location data.
|
||||
|
||||
If the field is named `geohash`, the visualization automatically detects the location and displays the elements. The order of the fields doesn't matter and the data set can have multiple other numeric, text, and time fields.
|
||||
|
||||
| Name | geohash | trips |
|
||||
| --------- | ------------ | ----- |
|
||||
| Cancun | d5f21 | 8 |
|
||||
| Honolulu | 87z9ps | 0 |
|
||||
| Palm Cove | rhzxudynb014 | 1 |
|
||||
| Mykonos | swdj02ey9gyx | 3 |
|
||||
|
||||
If your field containing geohash location data is not named as above, you can configure the visualization to use geohash and specify which field to use, as explained in the [Location mode](#location-mode) section.
|
||||
|
||||
### Example - Lookup codes
|
||||
|
||||
The geomap visualization can identify locations based on country, airport, or US state codes.
|
||||
|
||||
For this configuration, the dataset must contain at least one field (or column) containing the location code.
|
||||
|
||||
If the field is named `lookup`, the visualization automatically detects it and displays points based on country codes.
|
||||
|
||||
| Year | lookup | gdp |
|
||||
| ---- | ------ | --------- |
|
||||
| 2016 | MEX | 104171935 |
|
||||
| 2016 | DEU | 94393454 |
|
||||
| 2016 | FRA | 83654250 |
|
||||
| 2016 | BRA | 80921527 |
|
||||
| 2016 | CAN | 79699762 |
|
||||
|
||||
The other location types— airport codes or US state codes—aren't automatically detected.
|
||||
|
||||
If you want to use other codes or give the field a custom name, you can follow the steps in the [Location mode](#location-mode) section.
|
||||
|
||||
## Configuration options
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Map view options
|
||||
|
||||
The map view controls the initial view of the map when the dashboard loads.
|
||||
|
||||
#### Initial View
|
||||
|
||||
The initial view configures how the geomap renders when the panel is first loaded.
|
||||
|
||||
- **View** - Sets the center for the map when the panel first loads. Refer to the table following this list for view selections.
|
||||
- **Zoom** - Sets the initial zoom level.
|
||||
- **Use current map settings** - Use the settings of the current map to set the center.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| View selection | Description |
|
||||
|---|---|
|
||||
| Fit to data | fits the map view based on the data extents of Map layers and updates when data changes.<ul><li>**Data** - option allows selection of extent based on data from "All layers", a single "Layer", or the "Last value" from a selected layer.</li><li>**Layer** - can be selected if fitting data from a single "Layer" or the "Last value" of a layer.</li><li>**Padding** - sets padding in relative percent beyond data extent (not available when looking at "Last value" only).</li><li>**Max zoom** - sets the maximum zoom level when fitting data.</li> |
|
||||
| (0°, 0°) | |
|
||||
| Coordinates | sets the map view based on: **Latitude** and **Longitude**. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Default Views are also available including:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| | | | | |
|
||||
| ------------- | ------------- | ------ | ------ | --------- |
|
||||
| North America | South America | Europe | Africa | West Asia |
|
||||
| South Asia | South-East Asia | East Asia | Australia | Oceania |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Share view
|
||||
|
||||
The **Share view** option allows you to link the movement and zoom actions of multiple map visualizations within the same dashboard. The map visualizations that have this option enabled act in tandem when one of them is moved or zoomed, leaving the other ones independent.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
You might need to reload the dashboard for this feature to work.
|
||||
{{< /admonition >}}
|
||||
|
||||
#### No map repeating
|
||||
|
||||
The **No map repeating** option prevents the base map tiles from repeating horizontally when you pan across the world. This constrains the view to a single instance of the world map and avoids visual confusion when displaying global datasets. Enabling this option requires the map to reinitialize.
|
||||
|
||||
### Map layers options
|
||||
|
||||
Geomaps support showing multiple layers. Each layer determines how you visualize geospatial data on top of the base map.
|
||||
|
||||
There are three options that you need to set for all maps:
|
||||
|
||||
- [Layer type](#layer-type)
|
||||
- [Data](#data)
|
||||
- [Location mode](#location-mode)
|
||||
|
||||
Other options are dependent on your map layer type and are described within the layer type section.
|
||||
|
||||
The layer controls allow you to create layers, change their name, reorder and delete layers.
|
||||
|
||||
- **Add layer** creates an additional, configurable data layer for the geomap. When you add a layer, you are prompted to select a layer type. You can change the layer type at any point during panel configuration. See the **Layer Types** section above for details on each layer type.
|
||||
- **Edit layer name (pencil icon)** renames the layer.
|
||||
- **Trash Bin** deletes the layer.
|
||||
- **Reorder (six dots/grab handle)** allows you to change the layer order. Data on higher layers will appear above data on lower layers. The visualization will update the layer order as you drag and drop to help simplify choosing a layer order.
|
||||
|
||||
You can add multiple layers of data to a single geomap in order to create rich, detailed visualizations.
|
||||
|
||||
#### Layer type
|
||||
|
||||
There are seven map layer types to choose from in a geomap.
|
||||
|
||||
- [Markers](#markers-layer) renders a marker at each data point.
|
||||
- [Heatmap](#heatmap-layer) visualizes a heatmap of the data.
|
||||
- [GeoJSON](#geojson-layer) renders static data from a GeoJSON file.
|
||||
- [Night / Day](#night--day-layer) renders a night / day region.
|
||||
- [Route (Beta)](#route-layer-beta) render data points as a route.
|
||||
- [Photos (Beta)](#photos-layer-beta) renders a photo at each data point.
|
||||
- [Network (Beta)](#network-layer-beta) visualizes a network graph from the data.
|
||||
- [Open Street Map](#open-street-map-layer) adds a map from a collaborative free geographic world database.
|
||||
- [CARTO basemap](#carto-basemap-layer) adds a layer from CARTO Raster basemaps.
|
||||
- [ArcGIS MapServer](#arcgis-mapserver-layer) adds a layer from an ESRI ArcGIS MapServer.
|
||||
- [XYZ Tile layer](#xyz-tile-layer) adds a map from a generic tile layer.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
Beta is equivalent to the [public preview](/docs/release-life-cycle/) release stage.
|
||||
{{< /admonition >}}
|
||||
|
||||
There are also two experimental (or alpha) layer types.
|
||||
|
||||
- **Icon at last point (alpha)** renders an icon at the last data point.
|
||||
- **Dynamic GeoJSON (alpha)** styles a GeoJSON file based on query results.
|
||||
|
||||
To enable experimental layers. Set `enable_alpha` to `true` in your configuration file:
|
||||
|
||||
```
|
||||
[panels]
|
||||
enable_alpha = true
|
||||
```
|
||||
|
||||
To enable the experimental layers using Docker, run the following command:
|
||||
|
||||
```
|
||||
docker run -p 3000:3000 -e "GF_PANELS_ENABLE_ALPHA=true" grafana/grafana:<VERSION>
|
||||
```
|
||||
|
||||
#### Data
|
||||
|
||||
Geomaps need a source of geographical data gathered from a data source query which can return multiple datasets. By default Grafana picks the first dataset, but this drop-down allows you to pick other datasets if the query returns more than one.
|
||||
|
||||
#### Location mode
|
||||
|
||||
There are four options to map the data returned by the selected query:
|
||||
|
||||
- **Auto** automatically searches for location data. Use this option when your query is based on one of the following names for data fields.
|
||||
- geohash: “geohash”
|
||||
- latitude: “latitude”, “lat”
|
||||
- longitude: “longitude”, “lng”, “lon”
|
||||
- lookup: “lookup”
|
||||
- **Coords** specifies that your query holds coordinate data. You will get prompted to select numeric data fields for latitude and longitude from your database query.
|
||||
- **Geohash** specifies that your query holds geohash data. You will be prompted to select a string data field for the geohash from your database query.
|
||||
- **Lookup** specifies that your query holds location name data that needs to be mapped to a value. You will be prompted to select the lookup field from your database query and a gazetteer. The gazetteer is the directory that is used to map your queried data to a geographical point.
|
||||
|
||||
#### Markers layer
|
||||
|
||||
The markers layer allows you to display data points as different marker shapes such as circles, squares, triangles, stars, and more.
|
||||
|
||||
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Data | Configure the data settings for the layer. For more information, refer to [Data](#data). |
|
||||
| Location | Configure the data settings for the layer. For more information, refer to [Location mode](#location-mode). |
|
||||
| Size | Configures the size of the markers. The default is `Fixed size`, which makes all marker sizes the same regardless of the data; however, there is also an option to size the markers based on data corresponding to a selected field. `Min` and `Max` marker sizes have to be set such that the markers can scale within this range. |
|
||||
| Symbol | Allows you to choose the symbol, icon, or graphic to aid in providing additional visual context to your data. Choose from assets that are included with Grafana such as simple symbols or the Unicon library. You can also specify a URL containing an image asset. The image must be a scalable vector graphic (SVG). |
|
||||
| Symbol Vertical Align | Configures the vertical alignment of the symbol relative to the data point. Note that the symbol's rotation angle is applied first around the data point, then the vertical alignment is applied relative to the rotation of the symbol. |
|
||||
| Symbol Horizontal Align | Configures the horizontal alignment of the symbol relative to the data point. Note that the symbol's rotation angle is applied first around the data point, then the horizontal alignment is applied relative to the rotation of the symbol. |
|
||||
| Color | Configures the color of the markers. The default `Fixed color` sets all markers to a specific color. There is also an option to have conditional colors depending on the selected field data point values and the color scheme set in the `Standard options` section. |
|
||||
| Fill opacity | Configures the transparency of each marker. |
|
||||
| Rotation angle | Configures the rotation angle of each marker in degrees. The default is `Fixed value`, which makes all markers rotate to the same angle regardless of the data; however, there is also an option to set the rotation of the markers based on data corresponding to a selected field. |
|
||||
| Text label | Configures a text label for each marker. |
|
||||
| Show legend | Allows you to toggle the legend for the layer. |
|
||||
| Display tooltip | Allows you to toggle tooltips for the layer. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Heatmap layer
|
||||
|
||||
The heatmap layer clusters various data points to visualize locations with different densities.
|
||||
To add a heatmap layer:
|
||||
|
||||
Click on the drop-down menu under Data Layer and choose `Heatmap`.
|
||||
|
||||
Similar to `Markers`, you are prompted with various options to determine which data points to visualize and how you want to visualize them.
|
||||
|
||||
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Data | Configure the data settings for the layer. For more information, refer to [Data](#data). |
|
||||
| Location | Configure the data settings for the layer. For more information, refer to [Location mode](#location-mode). |
|
||||
| Weight values | Configures the size of the markers. The default is `Fixed size`, which makes all marker sizes the same regardless of the data; however, there is also an option to size the markers based on data corresponding to a selected field. `Min` and `Max` marker sizes have to be set such that the markers can scale within this range. |
|
||||
| Radius | Configures the size of the heatmap clusters. |
|
||||
| Blur | Configures the amount of blur on each cluster. |
|
||||
| Opacity | Configures the opacity of each cluster. |
|
||||
| Display tooltip | Allows you to toggle tooltips for the layer. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### GeoJSON layer
|
||||
|
||||
The GeoJSON layer allows you to select and load a static GeoJSON file from the filesystem.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| GeoJSON URL | Provides a choice of GeoJSON files that are included with Grafana. You can also enter a URL manually, which supports variables. |
|
||||
| Default Style | Controls which styles to apply when no rules above match.<ul><li>**Color** - configures the color of the default style</li><li>**Opacity** - configures the default opacity</li></ul> |
|
||||
| Style Rules | Apply styles based on feature properties <ul><li>**Rule** - allows you to select a _feature_, _condition_, and _value_ from the GeoJSON file in order to define a rule. The trash bin icon can be used to delete the current rule.</li><li>**Color** - configures the color of the style for the current rule</li><li>**Opacity** - configures the transparency level for the current rule</li> |
|
||||
| Display tooltip | Allows you to toggle tooltips for the layer. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Styles can be set within the "properties" object of the GeoJSON with support for the following geometries:
|
||||
|
||||
**Polygon, MultiPolygon**
|
||||
|
||||
- **"fill"** - The color of the interior of the polygon(s)
|
||||
- **"fill-opacity"** - The opacity of the interior of the polygon(s)
|
||||
- **"stroke-width"** - The width of the line component of the polygon(s)
|
||||
|
||||
**Point, MultiPoint**
|
||||
|
||||
- **"marker-color"** - The color of the point(s)
|
||||
- **"marker-size"** - The size of the point(s)
|
||||
|
||||
**LineString, MultiLineString**
|
||||
|
||||
- **"stroke"** - The color of the line(s)
|
||||
- **"stroke-width"** - The width of the line(s)
|
||||
|
||||
#### Night / Day layer
|
||||
|
||||
The Night / Day layer displays night and day regions based on the current time range.
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-day-night-9-1-0.png" max-width="600px" alt="Geomap panel Night / Day" >}}
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Data | Configures the data set for the layer. For more information, refer to [Data](#data). |
|
||||
| Show | Toggles the time source from panel time range. |
|
||||
| Night region color | Picks the color for the night region. |
|
||||
| Display sun | Toggles the sun icon. |
|
||||
| Opacity | Set the opacity from `0` (transparent) to `1` (opaque). |
|
||||
| Display tooltip | Allows you to toggle tooltips for the layer. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
[Extensions for OpenLayers - DayNight](https://viglino.github.io/ol-ext/examples/layer/map.daynight.html)
|
||||
|
||||
#### Route layer (Beta)
|
||||
|
||||
{{< admonition type="caution" >}}
|
||||
The Route layer is currently in [public preview](/docs/release-life-cycle/). Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available.
|
||||
{{< /admonition >}}
|
||||
|
||||
The Route layer renders data points as a route.
|
||||
|
||||
{{< figure src="/media/docs/grafana/geomap-route-layer-basic-9-4-0.png" max-width="600px" alt="Geomap panel Route" >}}
|
||||
|
||||
The layer can also render a route with arrows.
|
||||
|
||||
{{< figure src="/media/docs/grafana/geomap-route-layer-arrow-size-9-4-0.png" max-width="600px" alt="Geomap panel Route arrows with size" >}}
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Data | configure the data settings for the layer. For more information, refer to [Data](#data). |
|
||||
| Location | configure the data settings for the layer. For more information, refer to [Location mode](#location-mode). |
|
||||
| Size | sets the route thickness. Fixed value by default. When field data is selected you can set the Min and Max range in which field data can scale. |
|
||||
| Color | sets the route color. Set to `Fixed color` by default. You can also tie the color to field data. |
|
||||
| Fill opacity | configures the opacity of the route. |
|
||||
| Text label | configures a text label for each route. |
|
||||
| Arrow | sets the arrow styling to display along route, in order of data. Choose from: **None**, **Forward**, and **Reverse** |
|
||||
| Display tooltip | allows you to toggle tooltips for the layer. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
[Extensions for OpenLayers - Flow Line Style](http://viglino.github.io/ol-ext/examples/style/map.style.gpxline.html)
|
||||
|
||||
#### Photos layer (Beta)
|
||||
|
||||
{{< admonition type="caution" >}}
|
||||
The Photos layer is currently in [public preview](/docs/release-life-cycle/). Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available.
|
||||
{{< /admonition >}}
|
||||
|
||||
The Photos layer renders a photo at each data point.
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-photos-9-3-0.png" max-width="600px" alt="Geomap panel Photos" >}}
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Data | Configure the data settings for the layer. For more information, refer to [Data](#data). |
|
||||
| Location | Configure the data settings for the layer. For more information, refer to [Location mode](#location-mode). |
|
||||
| Image Source field | Allows you to select a string field containing image data in either of the following formats:<ul><li>**Image URLs**</li><li>**Base64 encoded** - Image binary ("data:image/png;base64,...")</li></ul> |
|
||||
| Kind | Sets the frame style around the images. Choose from: **Square**, **Circle**, **Anchored**, and **Folio**. |
|
||||
| Crop | Toggles whether the images are cropped to fit. |
|
||||
| Shadow | Toggles a box shadow behind the images. |
|
||||
| Border | Sets the border size around images. |
|
||||
| Border color | Sets the border color around images. |
|
||||
| Radius | Sets the overall size of images in pixels. |
|
||||
| Display tooltip | Allows you to toggle tooltips for the layer. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
[Extensions for OpenLayers - Image Photo Style](http://viglino.github.io/ol-ext/examples/style/map.style.photo.html)
|
||||
|
||||
#### Network layer (Beta)
|
||||
|
||||
{{< admonition type="caution" >}}
|
||||
The Network layer is currently in [public preview](/docs/release-life-cycle/). Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available.
|
||||
{{< /admonition >}}
|
||||
|
||||
The Network layer renders a network graph. This layer supports the same [data format supported by the node graph visualization](ref:data-format) with the addition of [geospatial data](#location-mode) included in the nodes data. The geospatial data is used to locate and render the nodes on the map.
|
||||
|
||||
{{< figure src="/media/docs/grafana/screenshot-grafana-10-1-geomap-network-layer-v2.png" max-width="750px" alt="Geomap network layer" >}}
|
||||
|
||||
You can convert node graph data to a network layer:
|
||||
{{< video-embed src="/media/docs/grafana/screen-recording-10-1-geomap-network-layer-from-node-graph.mp4" max-width="750px" alt="Node graph to Geomap network layer" >}}
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Data | Configure the data settings for the layer. For more information, refer to [Data](#data). |
|
||||
| Location | Configure the data settings for the layer. For more information, refer to [Location mode](#location-mode). |
|
||||
| Arrow | Sets the arrow direction to display for each edge, with forward meaning source to target. Choose from: **None**, **Forward**, **Reverse** and **Both**. |
|
||||
| Show legend | Allows you to toggle the legend for the layer. **Note:** The legend currently only supports node data. |
|
||||
| Display tooltip | Allows you to toggle tooltips for the layer. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
##### Node styles options
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Size | Configures the size of the nodes. The default is `Fixed size`, which makes all node sizes the same regardless of the data; however, there is also an option to size the nodes based on data corresponding to a selected field. `Min` and `Max` node sizes have to be set such that the nodes can scale within this range. |
|
||||
| Symbol | Allows you to choose the symbol, icon, or graphic to aid in providing additional visual context to your data. Choose from assets that are included with Grafana such as simple symbols or the Unicon library. You can also specify a URL containing an image asset. The image must be a scalable vector graphic (SVG). |
|
||||
| Color | Configures the color of the nodes. The default `Fixed color` sets all nodes to a specific color. There is also an option to have conditional colors depending on the selected field data point values and the color scheme set in the `Standard options` section. |
|
||||
| Fill opacity | Configures the transparency of each node. |
|
||||
| Rotation angle | Configures the rotation angle of each node in degrees. The default is `Fixed value`, which makes all nodes rotate to the same angle regardless of the data; however, there is also an option to set the rotation of the nodes based on data corresponding to a selected field. |
|
||||
| Text label | Configures a text label for each node. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
##### Edge styles options
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Size | Configures the line width of the edges. The default is `Fixed size`, which makes all edge line widths the same regardless of the data; however, there is also an option to size the edges based on data corresponding to a selected field. `Min` and `Max` eges sizes have to be set such that the edges can scale within this range. |
|
||||
| Color | Configures the color of the edges. The default `Fixed color` sets all edges to a specific color. There is also an option to have conditional colors depending on the selected field data point values and the color scheme set in the `Standard options` section. |
|
||||
| Fill opacity | Configures the transparency of each edge. |
|
||||
| Text label | Configures a text label for each edge. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Open Street Map layer
|
||||
|
||||
A map from a collaborative free geographic world database.
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-osm-9-1-0.png" max-width="600px" alt="Geomap panel Open Street Map" >}}
|
||||
|
||||
- **Opacity** from 0 (transparent) to 1 (opaque)
|
||||
- **Display tooltip** - allows you to toggle tooltips for the layer.
|
||||
|
||||
[About Open Street Map](https://www.openstreetmap.org/about)
|
||||
|
||||
#### CARTO basemap layer
|
||||
|
||||
A CARTO layer is from CARTO Raster basemaps.
|
||||
|
||||
- **Theme**
|
||||
- Auto
|
||||
- Light
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-carto-light-9-1-0.png" max-width="600px" alt="Geomap panel CARTO light example" >}}
|
||||
- Dark
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-carto-dark-9-1-0.png" max-width="600px" alt="Geomap panel CARTO dark example" >}}
|
||||
- **Show labels** shows the Country details on top of the map.
|
||||
- **Opacity** from 0 (transparent) to 1 (opaque)
|
||||
- **Display tooltip** - allows you to toggle tooltips for the layer.
|
||||
|
||||
[About CARTO](https://carto.com/about-us/)
|
||||
|
||||
#### ArcGIS MapServer layer
|
||||
|
||||
An ArcGIS layer is a layer from an ESRI ArcGIS MapServer.
|
||||
|
||||
- **Server Instance** to select the map type.
|
||||
- World Street Map
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-wsm-9-1-0.png" max-width="600px" alt="Geomap panel ArcGIS World Street Map" >}}
|
||||
- World Imagery
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-wi-9-1-0.png" max-width="600px" alt="Geomap panel ArcGIS World Imagery" >}}
|
||||
- World Physical
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-wp-9-1-0.png" max-width="600px" alt="Geomap panel ArcGIS World Physical" >}}
|
||||
- Topographic
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-topographic-9-1-0.png" max-width="600px" alt="Geomap panel ArcGIS Topographic" >}}
|
||||
- USA Topographic
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-usa-topographic-9-1-0.png" max-width="600px" alt="Geomap panel ArcGIS USA Topographic" >}}
|
||||
- World Ocean
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-ocean-9-1-0.png" max-width="600px" alt="Geomap panel ArcGIS World Ocean" >}}
|
||||
- Custom MapServer (see [XYZ](#xyz-tile-layer) for formatting)
|
||||
- URL template
|
||||
- Attribution
|
||||
- **Opacity** from 0 (transparent) to 1 (opaque)
|
||||
- **Display tooltip** - allows you to toggle tooltips for the layer.
|
||||
|
||||
##### More Information
|
||||
|
||||
- [ArcGIS Services](https://services.arcgisonline.com/arcgis/rest/services)
|
||||
- [About ESRI](https://www.esri.com/en-us/about/about-esri/overview)
|
||||
|
||||
#### XYZ Tile layer
|
||||
|
||||
The XYZ Tile layer is a map from a generic tile layer.
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-xyz-9-1-0.png" max-width="600px" alt="Geomap panel xyz example" >}}
|
||||
|
||||
- **URL template** - Set a valid tile server url, with {z}/{x}/{y} for example: https://tile.openstreetmap.org/{z}/{x}/{y}.png
|
||||
- **Attribution** sets the reference string for the layer if displayed in [map controls](#show-attribution)
|
||||
- **Opacity** from 0 (transparent) to 1 (opaque)
|
||||
|
||||
##### More information
|
||||
|
||||
- [Tiled Web Map Wikipedia](https://en.wikipedia.org/wiki/Tiled_web_map)
|
||||
- [List of Open Street Map Tile Servers](https://wiki.openstreetmap.org/wiki/Tile_servers)
|
||||
|
||||
### Basemap layer options
|
||||
|
||||
A basemap layer provides the visual foundation for a mapping application. It typically contains data with global coverage. Several base layer options
|
||||
are available each with specific configuration options to style the base map.
|
||||
|
||||
Basemap layer types can also be added as layers. You can specify an opacity.
|
||||
|
||||
There are four basemap layer types to choose from in a geomap.
|
||||
|
||||
- [Open Street Map](#open-street-map-layer) adds a map from a collaborative free geographic world database.
|
||||
- [CARTO basemap](#carto-basemap-layer) adds a layer from CARTO Raster basemaps.
|
||||
- [ArcGIS MapServer](#arcgis-mapserver-layer) adds a layer from an ESRI ArcGIS MapServer.
|
||||
- [XYZ Tile layer](#xyz-tile-layer) adds a map from a generic tile layer.
|
||||
|
||||
The default basemap layer uses the CARTO map. You can define custom default base layers in the `.ini` configuration file.
|
||||
|
||||
|
||||
|
||||
#### Configure the default base layer with provisioning
|
||||
|
||||
You can configure the default base map using config files with Grafana’s provisioning system. For more information on all the settings, refer to the [provisioning docs page](ref:provisioning-docs-page).
|
||||
|
||||
Use the JSON configuration option `default_baselayer_config` to define the default base map. There are currently four base map options to choose from: `carto`, `esri-xyz`, `osm-standard`, `xyz`. Here are some provisioning examples for each base map option.
|
||||
|
||||
- **carto** loads the CartoDB tile server. You can choose from `auto`, `dark`, and `light` theme for the base map and can be set as shown below. The `showLabels` tag determines whether or not Grafana shows the Country details on top of the map. Here is an example:
|
||||
|
||||
```ini
|
||||
geomap_default_baselayer = `{
|
||||
"type": "carto",
|
||||
"config": {
|
||||
"theme": "auto",
|
||||
"showLabels": true
|
||||
}
|
||||
}`
|
||||
```
|
||||
|
||||
- **esri-xyz** loads the ESRI tile server. There are already multiple server instances implemented to show the various map styles: `world-imagery`, `world-physical`, `topo`, `usa-topo`, and `ocean`. The `custom` server option allows you to configure your own ArcGIS map server. Here are some examples:
|
||||
|
||||
{{< tabs >}}
|
||||
{{< tab-content name="World imagery" >}}
|
||||
|
||||
```ini
|
||||
geomap_default_baselayer = `{
|
||||
"type": "esri-xyz",
|
||||
"config": {
|
||||
"server": "world-imagery"
|
||||
}
|
||||
}`
|
||||
```
|
||||
|
||||
{{< /tab-content >}}
|
||||
{{< tab-content name="Custom" >}}
|
||||
|
||||
```ini
|
||||
geomap_default_baselayer = `{
|
||||
"type": "esri-xyz",
|
||||
"config": {
|
||||
"server": "custom",
|
||||
"url": "[tile server url]",
|
||||
"attribution": "[tile server attribution]"
|
||||
}
|
||||
}`
|
||||
```
|
||||
|
||||
{{< /tab-content >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
- **osm-standard** loads the OpenStreetMap tile server. There are no additional configurations needed and the `config` fields can be left blank. Here is an example:
|
||||
|
||||
```ini
|
||||
default_baselayer_config = `{
|
||||
"type": "osm-standard",
|
||||
"config": {}
|
||||
}`
|
||||
```
|
||||
|
||||
- **xyz** loads a custom tile server defined by the user. Set a valid tile server `url`, with {z}/{x}/{y} for this option in order to properly load a default base map. Here is an example:
|
||||
|
||||
```ini
|
||||
default_baselayer_config = `{
|
||||
"type": "xyz",
|
||||
"config": {
|
||||
"attribution": "Open street map",
|
||||
"url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
}
|
||||
}`
|
||||
```
|
||||
|
||||
`enable_custom_baselayers` allows you to enable or disable custom open source base maps that are already implemented. The default is `true`.
|
||||
|
||||
### Map controls options
|
||||
|
||||
The map controls section contains various options for map information and tool overlays.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| [Show zoom control](#show-zoom-control) | Displays zoom controls in the upper left corner. |
|
||||
| [Mouse wheel zoom](#mouse-wheel-zoom) | Enables the mouse wheel to be used for zooming in or out. |
|
||||
| [Show attribution](#show-attribution) | Displays attribution for basemap layers. |
|
||||
| [Show scale](#show-scale) | Displays scale information in the bottom left corner in meters (m) or kilometers (km). |
|
||||
| [Show measure tools](#show-measure-tools) | Displays measure tools in the upper right corner. This includes the [Length](#length) and [Area](#area) options. |
|
||||
| [Show debug](#show-debug) | Displays debug information in the upper right corner. |
|
||||
| [Tooltip](#tooltip) | Controls display of tooltips. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Show zoom control
|
||||
|
||||
Displays zoom controls in the upper left corner. This control can be useful when using systems that don't have a mouse.
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-zoom-9-1-0.png" max-width="300px" alt="Geomap panel zoom" >}}
|
||||
|
||||
#### Mouse wheel zoom
|
||||
|
||||
Enables the mouse wheel to be used for zooming in or out.
|
||||
|
||||
#### Show attribution
|
||||
|
||||
Displays attribution for basemap layers.
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-attribution-9-1-0.png" max-width="400px" alt="Geomap panel attribution" >}}
|
||||
|
||||
#### Show scale
|
||||
|
||||
Displays scale information in the bottom left corner in meters (m) or kilometers (km).
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-scale-9-1-0.png" max-width="400px" alt="Geomap panel scale" >}}
|
||||
|
||||
#### Show measure tools
|
||||
|
||||
Displays measure tools in the upper right corner. Measurements appear only when this control is open.
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-measure-9-1-0.png" max-width="400px" alt="Geomap panel measure" >}}
|
||||
|
||||
- **Click** to start measuring
|
||||
- **Continue clicking** to continue measurement
|
||||
- **Double-click** to end measurement
|
||||
|
||||
When you change measurement type or units, the previous measurement is removed from the map. If the control is closed and then re-opened, the most recent measurement is displayed. A measurement can be modified by clicking and dragging on it.
|
||||
|
||||
##### Length
|
||||
|
||||
Get the spherical length of a geometry. This length is the sum of the great circle distances between coordinates. For multi-part geometries, the length is the sum of the length of each part. Geometries are assumed to be in 'EPSG:3857'.
|
||||
|
||||
- **Metric (m/km)**
|
||||
- **Feet (ft)**
|
||||
- **Miles (mi)**
|
||||
- **Nautical miles (nmi)**
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-measure-length-9-1-0.png" max-width="400px" alt="Geomap panel measure length" >}}
|
||||
|
||||
##### Area
|
||||
|
||||
Get the spherical area of a geometry. This area is calculated assuming that polygon edges are segments of great circles on a sphere. Geometries are assumed to be in 'EPSG:3857'.
|
||||
|
||||
- **Square Meters (m²)**
|
||||
- **Square Kilometers (km²)**
|
||||
- **Square Feet (ft²)**
|
||||
- **Square Miles (mi²)**
|
||||
- **Acres (acre)**
|
||||
- **Hectare (ha)**
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-measure-area-9-1-0.png" max-width="550px" alt="Geomap panel measure area" >}}
|
||||
|
||||
#### Show debug
|
||||
|
||||
Displays debug information in the upper right corner. This can be useful for debugging or validating a data source.
|
||||
|
||||
- **Zoom** displays current zoom level of the map.
|
||||
- **Center** displays the current **longitude**, **latitude** of the map center.
|
||||
|
||||
{{< figure src="/static/img/docs/geomap-panel/geomap-map-controls-debug-9-1-0.png" max-width="400px" alt="Geomap panel debug" >}}
|
||||
|
||||
#### Tooltip
|
||||
|
||||
Tooltips are supported for the **Markers**, **Heatmap**, **Photos** (beta) layers.
|
||||
For these layer types, choose from the following tooltip options:
|
||||
|
||||
- **None** displays tooltips only when a data point is clicked.
|
||||
- **Details** displays tooltips when a mouse pointer hovers over a data point.
|
||||
|
||||
When a data point on the geomap represents one row—that is, only a single row of response data is relevant to that point—the tooltip displays a grid with the row's names and values:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-single-row-marker-v12.1.png" max-width="750px" alt="A data point with one row of associated data" >}}
|
||||
|
||||
When a data point represents more than one row—that is, different rows but with the same geographical information—then each row appears as a single entry:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-multiple-row-marker-v12.1.png" max-width="750px" alt="A data point with mulitple rows of associated data" >}}
|
||||
|
||||
The text displayed in each tooltip row is associated with the first field value in each data row.
|
||||
Click it to expand and display the full details of the data row.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
The data appearing in each detail row is determined by the underlying query and transformations applied to the query's results, and can't be directly controlled using tooltip options.
|
||||
{{< /admonition >}}
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,218 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/heatmap/ # /docs/grafana/next/features/panels/heatmap/
|
||||
- ../../heatmap/ # /docs/grafana/next/visualizations/heatmap/
|
||||
- ../../../panels-visualizations/visualizations/heatmap/ # /docs/grafana/next/panels-visualizations/visualizations/heatmap/
|
||||
description: Configure options for Grafana's heatmap visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- heatmap
|
||||
- panel
|
||||
- documentation
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Heatmap
|
||||
weight: 100
|
||||
refs:
|
||||
intro-histograms-heatmaps:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/fundamentals/intro-histograms/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/fundamentals/intro-histograms/
|
||||
histograms:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/histogram/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/histogram/
|
||||
dashboards:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard/
|
||||
---
|
||||
|
||||
# Heatmap
|
||||
|
||||
Heatmaps allow you to view [histograms](ref:histograms) 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](ref:intro-histograms-heatmaps).
|
||||
|
||||
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:
|
||||
|
||||
{{< figure src="/static/img/docs/heatmap-panel/temperature_heatmap.png" max-width="1025px" alt="A heatmap visualization showing the random walk distribution over time" >}}
|
||||
|
||||
{{< docs/play title="Grafana Heatmaps" url="https://play.grafana.org/d/heatmap-calculate-log/" >}}
|
||||
|
||||
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](ref:dashboards), 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" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Heatmap options
|
||||
|
||||
The following options control how data in the heatmap is calculated and grouped.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Options | Description |
|
||||
| ------- | ----------- |
|
||||
| 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 | This setting determines how the x-axis is split into buckets. You can specify a time interval in the **Size** input. For example, a time range of `1h` makes the cells 1-hour wide on the x-axis. You can also set an interval based on **Count**. |
|
||||
| Y Bucket | This setting determines how the y-axis is split into buckets. Choose from **Size** or **Count**. |
|
||||
| Y Bucket scale | Select one of the following y-axis value scales:<ul><li>**Linear** - Linear scale.</li><li>**Logarithmic** - Choose a **Log base** of **2** or **10**.</li><li>**Symlog** - Symlog scale. Choose a **Log base** of **2** or **10** and enter a value for the **Linear threshold**.</li></ul> |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Y-Axis options
|
||||
|
||||
The following options define the display of the y-axis.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Options | Description |
|
||||
| ------- | ----------- |
|
||||
| Placement | Set where the y-axis is displayed. Choose from: **Left**, **Right**, or **Hidden**. |
|
||||
| Unit | Unit configuration. |
|
||||
| Decimals | This setting determines decimal configuration. |
|
||||
| Min/Max value | These settings configure the axis range. |
|
||||
| Axis width | This setting configures the width for the axis. |
|
||||
| Axis label | This setting configures the axis value. |
|
||||
| Tick alignment | Sets the alignment of the tick marks on the visualization. Choose from: **Auto**, **Top (LE)**, **Middle**, and **Bottom (GE)**. This option is only displayed when your **Calculate from data** setting is **No**. |
|
||||
| Reverse| When selected, the axis appears in reverse order. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+3" >}}
|
||||
|
||||
### Colors options
|
||||
|
||||
The color spectrum controls the mapping between value count (in each bucket) and the color assigned to each bucket. The leftmost color on the spectrum represents the minimum count and the color on the right most side represents the maximum count. Some color schemes are automatically inverted when using the light theme.
|
||||
|
||||
You can also change the color mode to Opacity. In this case, the color will not change but the amount of opacity will change with the bucket count
|
||||
|
||||
#### Mode
|
||||
|
||||
Use the following options to define the heatmap colors.
|
||||
|
||||
- **Scheme** - Bucket value represented by cell color.
|
||||
- **Scheme** - If the mode is **Scheme**, then select a color scheme.
|
||||
- **Opacity** - Bucket value represented by cell opacity. Opaque cell means maximum value.
|
||||
- **Color** - Cell base color.
|
||||
- **Scale** - Scale for mapping bucket values to the opacity.
|
||||
- **Exponential** - Power scale. Cell opacity calculated as `value ^ k`, where `k` is a configured **Exponent** value. If exponent is less than `1`, you will get a logarithmic scale. If exponent is greater than `1`, you will get an exponential scale. In case of `1`, scale will be the same as linear.
|
||||
- **Exponent** - Value of the exponent, greater than `0`.
|
||||
- **Linear** - Linear scale. Bucket value maps linearly to the opacity.
|
||||
|
||||
#### Steps
|
||||
|
||||
Set a value between `1` and `128`.
|
||||
|
||||
#### Reverse
|
||||
|
||||
Toggle the switch to reverse the color scheme. This option only applies the **Scheme** color mode.
|
||||
|
||||
#### Start/end color scale from value
|
||||
|
||||
By default, Grafana calculates cell colors based on minimum and maximum bucket values. With Min and Max you can overwrite those values. Consider a bucket value as a Z-axis and Min and Max as Z-Min and Z-Max, respectively.
|
||||
|
||||
- **Start** - Minimum value using for cell color calculation. If the bucket value is less than Min, then it is mapped to the "minimum" color. The series min value is the default value.
|
||||
- **End** - Maximum value using for cell color calculation. If the bucket value is greater than Max, then it is mapped to the "maximum" color. The series max value is the default value.
|
||||
|
||||
### Cell display options
|
||||
|
||||
Use these settings to control the display of heatmap cells.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Unit | Unit configuration. |
|
||||
| Decimals | This setting determines decimal configuration. |
|
||||
| Cell gap | Set how much space there is between cells. |
|
||||
| Hide cells with values <= | Enter a value. |
|
||||
| Hide cells with values >= | Enter a value. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Tooltip options
|
||||
|
||||
Tooltip options control the information overlay that appears when you hover over data points in the visualization.
|
||||
|
||||
| Option | Description |
|
||||
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| [Tooltip mode](#tooltip-mode) | When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. |
|
||||
| Show histogram (Y axis) | When you set the **Tooltip mode** to **Single**, this option is displayed. This option controls whether or not the tooltip includes a histogram representing the y-axis. |
|
||||
| [Show color scale](#show-color-scale) | This option controls whether or not the tooltip includes the color scale that's also represented in the legend. |
|
||||
| Max width | Set the maximum width of the tooltip box. |
|
||||
| Max height | Set the maximum height of the tooltip box. The default is 600 pixels. |
|
||||
|
||||
#### Tooltip mode
|
||||
|
||||
When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave.
|
||||
|
||||
- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization.
|
||||
- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip.
|
||||
- **Hidden -** Do not display the tooltip when you interact with the visualization.
|
||||
|
||||
Use an override to hide individual series from the tooltip.
|
||||
|
||||
#### Show color scale
|
||||
|
||||
When you set the **Tooltip mode** to **Single**, this option is displayed. This option controls whether or not the tooltip includes the color scale that's also represented in the legend. When the color scale is included in the tooltip, it shows the hovered value on the scale:
|
||||
|
||||
|
||||
|
||||
### Legend options
|
||||
|
||||
Choose whether you want to display the heatmap legend on the visualization by toggling the **Show legend** switch.
|
||||
|
||||
### Exemplars
|
||||
|
||||
Set the color used to show exemplar data.
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/histogram/ # /docs/grafana/next/features/panels/histogram/
|
||||
- ../../../panels/visualizations/histogram/ # /docs/grafana/next/panels/visualizations/histogram/
|
||||
- ../../../visualizations/histogram/ # /docs/grafana/next/visualizations/histogram/
|
||||
- ../../../panels-visualizations/visualizations/histogram/ # /docs/grafana/next/panels-visualizations/visualizations/histogram/
|
||||
description: Configure options for Grafana's histogram visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- docs
|
||||
- bar chart
|
||||
- panel
|
||||
- barchart
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Histogram
|
||||
weight: 100
|
||||
refs:
|
||||
color-scheme:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/#color-scheme
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/#color-scheme
|
||||
---
|
||||
|
||||
# Histogram
|
||||
|
||||
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.
|
||||
|
||||
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="1025px" 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
|
||||
|
||||
After 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 histogram visualization:
|
||||
|
||||
{{< youtube id="QfJ480j9-KM" >}}
|
||||
|
||||
{{< docs/play title="Histogram Examples" url="https://play.grafana.org/d/histogram_tests/" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
Histograms support time series and any table results with one or more numerical fields.
|
||||
|
||||
### Examples
|
||||
|
||||
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 random walk distribution." >}}
|
||||
|
||||
#### Basic numerical table
|
||||
|
||||
| Gender | Height (in) | 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" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Histogram options
|
||||
|
||||
Use the following options to refine your histogram visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Bucket count | Specifies the number of bins used to group your data in the histogram, affecting the granularity of the displayed distribution. Leave this empty for automatic bucket count of 30. |
|
||||
| Bucket size | The size of the buckets. Leave this empty for automatic bucket sizing (~10% of the full range). |
|
||||
| [Bucket offset](#bucket-offset) | If the first bucket should not start at zero. A non-zero offset has the effect of shifting the aggregation window. |
|
||||
| Combine series | This will merge all series and fields into a combined histogram. |
|
||||
| Stacking | Controls how multiple series are displayed in the histogram. Choose from the following:<ul><li>**Off** - Series are not stacked, but instead shown side by side.</li><li>**Normal** - Series are stacked on top of each other, showing cumulative values.</li><li>**100%** - Series are stacked to fill 100% of the chart, showing the relative proportion of each series.</li></ul> |
|
||||
| Line width | Controls line width of the bars. |
|
||||
| Fill opacity | Controls the fill opacity bars. |
|
||||
| [Gradient mode](#gradient-mode) | Set the mode of the gradient fill. Fill gradient is based on the line color. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Bucket offset
|
||||
|
||||
If the first bucket should not start at zero, a non-zero offset has the effect of shifting the aggregation window.
|
||||
|
||||
For example, 5-sized buckets that are 0-5, 5-10, 10-15 with a default 0 offset would become 2-7, 7-12, 12-17 with an offset of 2; offsets of 0, 5, or 10, in this case, would effectively do nothing.
|
||||
|
||||
Typically, this option would be used with an explicitly defined bucket size rather than automatic. For this setting to affect, the offset amount should be greater than 0 and less than the bucket size; values outside this range have the same effect as values within this range.
|
||||
|
||||
#### Gradient mode
|
||||
|
||||
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme](ref:color-scheme) field option.
|
||||
|
||||
Gradient display is influenced by the **Fill opacity** setting.
|
||||
|
||||
Choose from the following:
|
||||
|
||||
- **None** - No gradient fill. This is the default setting.
|
||||
- **Opacity** - Transparency of the gradient is calculated based on the values on the Y-axis. The opacity of the fill is increasing with the values on the Y-axis.
|
||||
- **Hue** - Gradient color is generated based on the hue of the line color.
|
||||
- **Scheme** - The selected [color palette](https://grafana.com/docs/grafana/latest/panels-visualizations/configure-standard-options/#color-scheme) is applied to the histogram bars.
|
||||
|
||||
### Tooltip options
|
||||
|
||||
{{< docs/shared lookup="visualizations/tooltip-options-3.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Legend options
|
||||
|
||||
{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/logs/ # /docs/grafana/next/features/panels/logs/
|
||||
- ../../../panels/visualizations/logs-panel/ # /docs/grafana/next/panels/visualizations/logs-panel/
|
||||
- ../../../reference/logs/ # /docs/grafana/next/reference/logs/
|
||||
- ../../logs-panel/ # /docs/grafana/next/visualizations/logs-panel/
|
||||
- ../../../panels-visualizations/visualizations/logs/ # /docs/grafana/next/panels-visualizations/visualizations/logs/
|
||||
keywords:
|
||||
- grafana
|
||||
- dashboard
|
||||
- documentation
|
||||
- panels
|
||||
- logs panel
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's logs visualization
|
||||
title: Logs
|
||||
weight: 100
|
||||
refs:
|
||||
log-levels:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/explore/logs-integration/#log-level
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/explore/logs-integration/#log-level
|
||||
---
|
||||
|
||||
# Logs
|
||||
|
||||
_Logs_ are structured records of events or messages generated by a system or application—that is, a series of text records with status updates from your system or app. They generally include timestamps, messages, and context information like the severity of the logged event.
|
||||
|
||||
The logs visualization displays these records from data sources that support logs, such as Elastic, Influx, and Loki. The logs visualization has colored indicators of log status, as well as collapsible log events that help you analyze the information generated.
|
||||
|
||||
|
||||
|
||||
{{< docs/play title="Logs Panel" url="https://play.grafana.org/d/6NmftOxZz/" >}}
|
||||
|
||||
Typically, you use logs with a graph visualization to display the log output of a related process. If you have an incident in your application or systems, such as a website disruption or code failure, you can use the logs visualization to help you figure out what went wrong, when, and even why.
|
||||
|
||||
## Configure a log visualization
|
||||
|
||||
The following video provides a walkthrough of creating a logs visualization. You'll also learn how to customize some settings and log visualization caveats:
|
||||
|
||||
{{< youtube id="jSSi_x-fD_8" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
The logs visualization works best with log-type datasets such as queries from data sources like Loki, Elastic, and InfluxDB.
|
||||
|
||||
You can also build log-formatted data from other data sources as long as the first field is a time type followed by string, number, and time fields. The leading time field is used to sort and timestamp the logs and if the data contains other time-type fields, they’re included as elements of the logged record.
|
||||
|
||||
The second field is used as the log record title regardless of whether it’s a time, numeric, or string field. Usually the second field is a text field containing multiple string elements, but if the message level (or `lvl`) is present, the visualization uses the values in it to add colors to the record, as described in [Log levels integration](ref:log-levels).
|
||||
|
||||
Subsequent fields are collapsed inside of each log record and you can open them by clicking the expand (`>`) icon.
|
||||
|
||||
To limit the number of log lines rendered in the visualization, you can use the **Max data points** setting in the panel **Query options**. If that option isn't set, then the data source typically enforces its own default limit.
|
||||
|
||||
### Example
|
||||
|
||||
| Time | TitleMessage | Element1 | Element2 | Element3 |
|
||||
| ------------------- | -------------------- | -------- | -------- | ------------------- |
|
||||
| 2023-02-01 12:00:00 | title=Log1 lvl=info | 1 | server2 | 2023-02-01 11:00:00 |
|
||||
| 2023-02-01 11:30:00 | title=Log1 lvl=error | 1 | server2 | 2023-02-01 11:00:00 |
|
||||
| 2023-02-01 11:00:00 | title=Log1 lvl=trace | 1 | server2 | 2023-02-01 11:00:00 |
|
||||
|
||||
|
||||
|
||||
## Log level
|
||||
|
||||
For logs where a **level** label is specified, we use the value of the label to determine the log level and update color accordingly. If the log doesn't have a level label specified, we try to find out if its content matches any of the supported expressions (see below for more information). The log level is always determined by the first match. In case Grafana is not able to determine a log level, it will be visualized with **unknown** log level. See [supported log levels and mappings of log level abbreviation and expressions](ref:log-levels).
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Logs options
|
||||
|
||||
Use these settings to refine your visualization:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Time | Show or hide the time column. This is the timestamp associated with the log line as reported from the data source. |
|
||||
| Unique labels | Show or hide the unique labels column, which shows only non-common labels. |
|
||||
| Common labels | Show or hide the common labels. |
|
||||
| Wrap lines | Turn line wrapping on or off. |
|
||||
| Prettify JSON | Toggle the switch on to pretty print all JSON logs. This setting does not affect logs in any format other than JSON. |
|
||||
| Enable log details | Toggle the switch on to see an extendable area with log details including labels and detected fields. Each field or label has a stats icon to display ad-hoc statistics in relation to all displayed logs. The default setting is on. |
|
||||
| Deduplication | Hide log messages that are duplicates of others shown, according to your selected criteria. Choose from: <ul><li>**Exact** - Ignoring ISO datetimes.</li><li>**Numerical** - Ignoring only those that differ by numbers such as IPs or latencies.</li><li>**Signatures** - Removing successive lines with identical punctuation and white space.</li></ul> |
|
||||
| Order | Set whether to show results **Newest first** or **Oldest first**. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../panels/visualizations/news-graph/ # /docs/grafana/next/panels/visualizations/news-graph/
|
||||
- ../../news-panel/ # /docs/grafana/next/visualizations/news-panel/
|
||||
- ../../../panels-visualizations/visualizations/news/ # /docs/grafana/next/panels-visualizations/visualizations/news/
|
||||
keywords:
|
||||
- grafana
|
||||
- news
|
||||
- documentation
|
||||
- panels
|
||||
- news panel
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's news visualization
|
||||
title: News
|
||||
weight: 100
|
||||
---
|
||||
|
||||
# News
|
||||
|
||||
The news visualization displays an RSS feed. By default, it displays articles from the Grafana Labs blog, but you can change this by entering a different RSS feed URL.
|
||||
|
||||
{{< figure src="/static/img/docs/news/news-visualization.png" max-width="1025px" alt="A news visualization showing the latest Grafana news feed" >}}
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
In version 8.5, we discontinued the "Use Proxy" option for Grafana news visualizations. As a result, RSS feeds that are not configured for request by Grafana's frontend (with the appropriate [CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)) may not load.
|
||||
{{< /admonition >}}
|
||||
|
||||
You can use the news visualization to provide regular news and updates to your users.
|
||||
|
||||
{{< docs/play title="News Panel" url="https://play.grafana.org/d/cdodkwspaaa68b/" >}}
|
||||
|
||||
## Configure a news visualization
|
||||
|
||||
After you’ve created a [dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/), enter the URL of an RSS in the **URL** field in the **News** section. This visualization type doesn't accept any other queries, and you shouldn't expect to be able to filter or query the RSS feed data in any way using this visualization.
|
||||
|
||||
If you're having trouble loading an RSS feed, you can try rehosting the feed on a different server or using a CORS proxy. A CORS proxy is a tool that allows you to bypass CORS restrictions by making requests to the RSS feed on your behalf. You can find more information about using CORS proxies online.
|
||||
|
||||
If you're unable to display an RSS feed using the news visualization, you can try using the community RSS/Atom data source plugin [RSS/Atom data source](https://grafana.com/grafana/plugins/volkovlabs-rss-datasource/) in combination with the Dynamic text community panel [Dynamic text](https://grafana.com/grafana/plugins/marcusolsson-dynamictext-panel/). This will allow you to display the RSS feed in a different way.
|
||||
|
||||
## Supported data formats
|
||||
|
||||
The news visualization supports RSS and Atom feeds.
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### News options
|
||||
|
||||
Use the following options to refine your news visualization:
|
||||
|
||||
- **URL** - The URL of the RSS or Atom feed.
|
||||
- **Show image** - Controls if the news social image is displayed beside the text content.
|
||||
@@ -0,0 +1,244 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../panels-visualizations/visualizations/node-graph/ # /docs/grafana/next/panels-visualizations/visualizations/node-graph/
|
||||
- ../../../panels/visualizations/node-graph/ # /docs/grafana/next/panels/visualizations/node-graph/
|
||||
- ../../../visualizations/node-graph/ # /docs/grafana/next/visualizations/node-graph/
|
||||
keywords:
|
||||
- grafana
|
||||
- dashboard
|
||||
- documentation
|
||||
- panels
|
||||
- node graph
|
||||
- directed graph
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's node graph visualization
|
||||
title: Node graph
|
||||
weight: 100
|
||||
---
|
||||
|
||||
# Node graph
|
||||
|
||||
Node graphs are useful when you need to visualize elements that are related to each other. This is done by displaying circles—or _nodes_—for each element you want to visualize, connected by lines—or _edges_. The visualization uses a directed force layout that positions the nodes into a network of connected circles.
|
||||
|
||||
Node graphs display useful information about each node, as well as the relationships between them, allowing you to visualize complex infrastructure maps, hierarchies, or execution diagrams.
|
||||
|
||||
|
||||
|
||||
The appearance of nodes and edges can also be customized in several ways including color, borders, and line style.
|
||||
|
||||
You can use a node graph visualization if you need to show:
|
||||
|
||||
- Solution topologies
|
||||
- Networks
|
||||
- Infrastructure
|
||||
- Organizational charts
|
||||
- Critical path diagrams
|
||||
- Family trees
|
||||
- Mind maps
|
||||
|
||||
## Configure a node graph visualization
|
||||
|
||||
The following video provides beginner steps for creating node panel visualizations. You'll learn the data requirements and caveats, special customizations, and much more:
|
||||
|
||||
{{< youtube id="VrvsMkRwoKw" >}}
|
||||
|
||||
{{< docs/play title="Node graph panel" url="https://play.grafana.org/d/bdodfbi3d57uoe/" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
To create node graphs, you need two datasets: one containing the records for the displayed elements (nodes) and one dataset containing the records for the connections between those elements (edges).
|
||||
|
||||
### Nodes dataset
|
||||
|
||||
The nodes dataset must contain one alphanumeric ID field that gives each element a unique identifier. The visualization also accepts other options fields for titles, subtitles, main and secondary stats, arc information for how much of the circle border to paint, details, colors, icons, node size, and indicators for element highlighting. For more information and naming conventions for these fields, refer to the [Nodes data frame structure](#nodes-data-frame-structure) section.
|
||||
|
||||
#### Example
|
||||
|
||||
| id | title | subtitle | mainstat | secondarystat | color | icon | highlighted |
|
||||
| ----- | ----- | -------- | -------- | ------------- | ----- | ---- | ----------- |
|
||||
| node1 | PC | Windows | AMD | 16gbRAM | blue | | true |
|
||||
| node2 | PC | Linux | Intel | 32gbRAM | green | eye | false |
|
||||
| node3 | Mac | MacOS | M3 | 16gbRAM | gray | apps | false |
|
||||
| node4 | Alone | SoLonely | JustHere | NotConnected | red | | false |
|
||||
|
||||
If the icon field contains a value, it’s displayed instead of the title and subtitle. For a list of of available icons, refer to [Icons Overview](https://developers.grafana.com/ui/latest/index.html?path=/story/docs-overview-icon--icons-overview).
|
||||
|
||||
### Edges dataset
|
||||
|
||||
Similar to the nodes dataset, the edges dataset needs one unique ID field for each relationship, followed by two fields containing the source and the target nodes of the edge; that is, the nodes the edge connects. Other optional fields are main and secondary stats, context menu elements, line thickness, highlight indications, line colors, and configurations to turn the connection into a dashed line. For more information and naming conventions for these fields, refer to the [Edges data frame structure](#edges-data-frame-structure) section.
|
||||
|
||||
#### Example
|
||||
|
||||
| id | source | target | mainstat | seconddarystat | thickness | highlighted | color |
|
||||
| ----- | ------ | ------ | -------- | -------------- | --------- | ----------- | ------ |
|
||||
| edge1 | node1 | node2 | TheMain | TheSub | 3 | true | cyan |
|
||||
| edge2 | node3 | node2 | Main2 | Sub2 | 1 | false | orange |
|
||||
|
||||
If a node lacks edge connections, it’s displayed on its own outside of the network.
|
||||
|
||||
### Data requirements
|
||||
|
||||
A node graph requires a specific shape of the data to be able to display its nodes and edges. This means not every data source or query can be visualized with this graph. If you want to use this as a data source developer see the section about data API.
|
||||
|
||||
A node graph consists of _nodes_ and _edges_.
|
||||
|
||||
- A _node_ is displayed as a circle. A node might represent an application, a service, or anything else that is relevant from an application perspective.
|
||||
- An _edge_ is displayed as a line that connects two nodes. The connection might be a request, an execution, or some other relationship between the two nodes.
|
||||
|
||||
Both nodes and edges can have associated metadata or statistics. The data source defines what information and values is shown, so different data sources can show different type of values or not show some values.
|
||||
|
||||
#### Nodes
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
Node graphs can show only 1,500 nodes. If this limit is crossed a warning will be visible in upper right corner, and some nodes will be hidden. You can expand hidden parts of the graph by clicking on the "Hidden nodes" markers in the graph.
|
||||
{{< /admonition >}}
|
||||
|
||||
Usually, nodes show two statistical values inside the node and two identifiers just below the node, usually name and type. Nodes can also show another set of values as a color circle around the node, with sections of different color represents different values that should add up to 1.
|
||||
|
||||
For example, you can have the percentage of errors represented by a red portion of the circle.
|
||||
Additional details can be displayed in a context menu which is displayed when you click on the node.
|
||||
There also can be additional links in the context menu that can target either other parts of Grafana or any external link.
|
||||
|
||||
|
||||
|
||||
#### Edges
|
||||
|
||||
Edges can also show statistics when you hover over the edge. Similar to nodes, you can open a context menu with additional details and links by clicking on the edge.
|
||||
|
||||
The first data source supporting this visualization is X-Ray data source for its Service map feature. For more information, refer to the [X-Ray plugin documentation](https://grafana.com/grafana/plugins/grafana-x-ray-datasource).
|
||||
|
||||
## Node graph navigation
|
||||
|
||||
You can use pan, zoom, and other functions to navigate a node graph.
|
||||
|
||||
### Pan
|
||||
|
||||
You can pan the view by clicking outside any node or edge and dragging your mouse.
|
||||
|
||||
### Zoom
|
||||
|
||||
Use the buttons in the lower right corner to zoom in or out. You can also use the mouse wheel or touchpad scroll, together with either Ctrl or Cmd key to do so.
|
||||
|
||||
### Hidden nodes
|
||||
|
||||
The number of nodes shown at a given time is limited to maintain a reasonable visualization performance. Nodes that are not currently visible are hidden behind clickable markers that show an approximate number of hidden nodes that are connected by a particular edge. You can click on the marker to expand the graph around that node.
|
||||
|
||||
|
||||
|
||||
### Grid view
|
||||
|
||||
You can switch to the grid view to have a better overview of the most interesting nodes in the graph. Grid view shows nodes in a grid without edges and can be sorted by stats shown inside the node or by stats represented by the a colored border of the nodes.
|
||||
|
||||
|
||||
|
||||
To sort the nodes, click on the stats inside the legend. The marker next to the stat name shows which stat is currently used for sorting and sorting direction.
|
||||
|
||||
|
||||
|
||||
Click on the node and select "Show in Graph layout" option to switch back to graph layout and focus on the selected node, to show it in context of the full graph.
|
||||
|
||||
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Node graph options
|
||||
|
||||
Use the following options to refine your node graph visualization.
|
||||
|
||||
- **Zoom mode** - Choose how the node graph should handle zoom and scroll events.
|
||||
|
||||
### Nodes options
|
||||
|
||||
The **Nodes** options section provides configurations for node behaviors.
|
||||
|
||||
- **Main stat unit** - Choose which unit the main stat displays in the graph's nodes.
|
||||
- **Secondary stat unit** - Choose which unit the secondary stat displays in the graph's nodes.
|
||||
- **Arc sections** - Configure which fields define the size of the colored circle around the node and select a color for each. You can add multiple fields.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
Defining arc sections overrides the automatic detection of `arc__*` and `color` fields described in the **Optional fields** section of [Nodes data frame structure](#nodes-data-frame-structure).
|
||||
{{< /admonition >}}
|
||||
|
||||
### Edges options
|
||||
|
||||
The **Edges** options section provides configurations for node edges behaviors.
|
||||
|
||||
- **Main stat unit** - Choose which unit the main stat displays in the graph's edges.
|
||||
- **Secondary stat unit** - Choose which unit the secondary stat displays in the graph's edges.
|
||||
|
||||
### Data links
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
In node graphs, some data fields may have pre-configured data links. To add a different data link in those cases, use a [field override](#field-overrides).
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Data API
|
||||
|
||||
This visualization needs a specific shape of the data to be returned from the data source in order to correctly display it.
|
||||
|
||||
Node graphs, at minimum, require a data frame describing the edges of the graph. By default, node graphs will compute the nodes and any stats based on this data frame. Optionally a second data frame describing the nodes can be sent in case there is need to show more node specific metadata. You have to set `frame.meta.preferredVisualisationType = 'nodeGraph'` on both data frames or name them `nodes` and `edges` respectively for the node graph to render.
|
||||
|
||||
### Edges data frame structure
|
||||
|
||||
Required fields:
|
||||
|
||||
| Field name | Type | Description |
|
||||
| ---------- | ------ | ------------------------------ |
|
||||
| id | string | Unique identifier of the edge. |
|
||||
| source | string | Id of the source node. |
|
||||
| target | string | Id of the target. |
|
||||
|
||||
Optional fields:
|
||||
|
||||
| Field name | Type | Description |
|
||||
| --------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| mainstat | string/number | First stat shown in the overlay when hovering over the edge. It can be a string showing the value as is or it can be a number. If it is a number, any unit associated with that field is also shown |
|
||||
| secondarystat | string/number | Same as mainStat, but shown right under it. |
|
||||
| detail\_\_\* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the edge. Use `config.displayName` for more human readable label. |
|
||||
| thickness | number | The thickness of the edge. Default: `1` |
|
||||
| highlighted | boolean | Sets whether the edge should be highlighted. Useful, for example, to represent a specific path in the graph by highlighting several nodes and edges. Default: `false` |
|
||||
| color | string | Sets the default color of the edge. It can be an acceptable HTML color string. Default: `#999` |
|
||||
| strokeDasharray | string | Sets the pattern of dashes and gaps used to render the edge. If unset, a solid line is used as edge. For more information and examples, refer to the [`stroke-dasharray` MDN documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray). |
|
||||
|
||||
{{< admonition type="caution" >}}
|
||||
Starting with 10.5, `highlighted` is deprecated.
|
||||
It will be removed in a future release.
|
||||
Use `color` to indicate a highlighted edge state instead.
|
||||
{{< /admonition >}}
|
||||
|
||||
### Nodes data frame structure
|
||||
|
||||
Required fields:
|
||||
|
||||
| Field name | Type | Description |
|
||||
| ---------- | ------ | -------------------------------------------------------------------------------------------- |
|
||||
| id | string | Unique identifier of the node. This ID is referenced by edge in its source and target field. |
|
||||
|
||||
Optional fields:
|
||||
|
||||
| Field name | Type | Description |
|
||||
| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| title | string | Name of the node visible in just under the node. |
|
||||
| subtitle | string | Additional, name, type or other identifier shown under the title. |
|
||||
| mainstat | string/number | First stat shown inside the node itself. It can either be a string showing the value as is or a number. If it is a number, any unit associated with that field is also shown. |
|
||||
| secondarystat | string/number | Same as mainStat, but shown under it inside the node. |
|
||||
| arc\_\_\* | number | Any field prefixed with `arc__` will be used to create the color circle around the node. All values in these fields should add up to 1. You can specify color using `config.color.fixedColor`. |
|
||||
| detail\_\_\* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the node. Use `config.displayName` for more human readable label. |
|
||||
| color | string/number | Can be used to specify a single color instead of using the `arc__` fields to specify color sections. It can be either a string which should then be an acceptable HTML color string or it can be a number in which case the behavior depends on `field.config.color.mode` setting. This can be for example used to create gradient colors controlled by the field value. |
|
||||
| icon | string | Name of the icon to show inside the node instead of the default stats. Only Grafana [built in icons](https://developers.grafana.com/ui/latest/index.html?path=/story/iconography-icon--icons-overview)) are allowed. |
|
||||
| nodeRadius | number | Radius value in pixels. Used to manage node size. |
|
||||
| highlighted | boolean | Sets whether the node should be highlighted. Useful for example to represent a specific path in the graph by highlighting several nodes and edges. Default: `false` |
|
||||
@@ -0,0 +1,197 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../panels/visualizations/pie-chart-pane/ # /docs/grafana/next/panels/visualizations/pie-chart-pane/
|
||||
- ../../pie-chart-panel/ # /docs/grafana/next/visualizations/pie-chart-panel/
|
||||
- ../../../panels-visualizations/visualizations/pie-chart/ # /docs/grafana/next/panels-visualizations/visualizations/pie-chart/
|
||||
keywords:
|
||||
- grafana
|
||||
- pie chart
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's pie chart visualization
|
||||
title: Pie chart
|
||||
weight: 100
|
||||
refs:
|
||||
calculation-types:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/calculation-types/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types/
|
||||
configure-legends:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-legend/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-legend/
|
||||
---
|
||||
|
||||
# Pie chart
|
||||
|
||||
A pie chart is a graph that displays data as segments of a circle proportional to the whole, making it look like a sliced pie. Each slice corresponds to a value or measurement.
|
||||
|
||||
|
||||
|
||||
The pie chart visualization is ideal when you have data that adds up to a total and you want to show the proportion of each value compared to other slices, as well as to the whole of the pie.
|
||||
|
||||
You can use a pie chart if you need to compare:
|
||||
|
||||
- Browser share distribution in the market
|
||||
- Incident causes per category
|
||||
- Network traffic sources
|
||||
- User demographics
|
||||
|
||||
## Configure a pie chart visualization
|
||||
|
||||
The following video guides you through the creation steps and common customizations of pie chart visualizations and is great for beginners:
|
||||
|
||||
{{< youtube id="A_lDhM9w4_g" >}}
|
||||
|
||||
{{< docs/play title="Grafana Bar Charts and Pie Charts" url="https://play.grafana.org/d/ktMs4D6Mk/" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
The pie chart is different from other visualizations in that it will only display one pie, regardless of the number of datasets, fields, or records queried in it.
|
||||
|
||||
To create a pie chart visualization, you need a dataset containing a set of numeric values either in rows, columns, or both.
|
||||
|
||||
### Example - One row
|
||||
|
||||
The easiest way to provide data for a pie chart visualization is in a dataset with a single record (or row) containing the fields (or columns) that you want in the pie, as in the following example. The default settings of the pie chart visualization automatically display each column as a slice of the pie.
|
||||
|
||||
| Value1 | Value2 | Value3 | Optional |
|
||||
| ------ | ------ | ------ | -------- |
|
||||
| 5 | 3 | 2 | Sums10 |
|
||||
|
||||
|
||||
|
||||
### Example - Multiple rows
|
||||
|
||||
If you need to use numeric data that's in multiple rows, the default **Show** parameter of the visualization [Value options](#value-options) is set to **Calculate** and use data from the last row.
|
||||
|
||||
| Value | Label |
|
||||
| ----- | ------ |
|
||||
| 5 | Value1 |
|
||||
| 3 | Value2 |
|
||||
| 2 | Value3 |
|
||||
|
||||
|
||||
|
||||
By default, the visualization is configured to [calculate](#value-options) a single value per column or series and to display only the last row of data.
|
||||
|
||||
To allow values in multiple rows to be displayed, change the **Show** setting in the [Value options](#value-options) from **Calculate** to **All values**.
|
||||
|
||||
|
||||
|
||||
### Example - Multiple rows and columns
|
||||
|
||||
If your dataset contains multiple rows and columns with numeric data, by default only the last row's values are summed.
|
||||
|
||||
| Value1 | Value2 | Value3 | Optional |
|
||||
| ------ | ------ | ------ | -------- |
|
||||
| 5 | 3 | 2 | Sums10 |
|
||||
| 10 | 6 | 4 | Sums20 |
|
||||
| 20 | 8 | 2 | Sums30 |
|
||||
|
||||
|
||||
|
||||
If you want to display all the cells, change the **Show** setting in the [Value options](#value-options) from **Calculate** to **All values**. This also labels the elements by concatenating all the text fields (if you have any) with the column name.
|
||||
|
||||
|
||||
|
||||
If you want to display only the values from a given field (or column), once the **Show** setting in the [Value options](#value-options) is set to **All values**, set the **Fields** option to the column you wish to sum in the display. The value labels are also concatenated as indicated before.
|
||||
|
||||
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value options
|
||||
|
||||
Use the following options to refine the value in your visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Show | Set how much information to show. Choose from:<ul><li>**Calculate** - Reduces each value to a single value per series.</li><li>**All values** - Displays every value from a single series.</li></ul> |
|
||||
| Calculation | If you chose **Calculate** as your **Show** option, select a calculation to reduce each series. For information about available calculations, refer to [Calculation types](ref:calculation-types). |
|
||||
| Limit | If you chose **All values** as your **Show** option, enter a value to limit the number of values displayed. |
|
||||
| Fields | Select which field or fields to display in the visualization. Each field name is available on the list, or you can select one of the following options:<ul><li>**Numeric fields** - All fields with numerical values.</li><li>**All fields** - All fields that are not removed by transformations.</li><li>**Time** - All fields with time values.</li></ul> |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Pie chart options
|
||||
|
||||
Use these options to refine how your visualization looks.
|
||||
|
||||
#### Pie chart type
|
||||
|
||||
Select the pie chart display style. Choose from **Pie** or **Donut**.
|
||||
|
||||
|
||||
|
||||
#### Slice sorting
|
||||
|
||||
By default, the pie chart is sorted so that the slices decrease in size clockwise around the circle.
|
||||
You can configure the sorting of the slices, and by extension the legend, with the following options:
|
||||
|
||||
- **Descending** - The slices decrease in size, clockwise (default).
|
||||
- **Ascending** - The slices increase in size, clockwise.
|
||||
- **None** - No sorting is applied. The original order of the data is maintained.
|
||||
|
||||
#### Labels
|
||||
|
||||
Select labels to display on the pie chart. You can select more than one.
|
||||
|
||||
- **Name** - The series or field name.
|
||||
- **Percent** - The percentage of the whole.
|
||||
- **Value** - The raw numerical value.
|
||||
|
||||
Labels are displayed in white over the body of the chart. You might need to select darker chart colors to make them more visible. Long names or numbers might be clipped.
|
||||
|
||||
The following example shows a pie chart with **Name** and **Percent** labels displayed:
|
||||
|
||||
{{< figure src="/static/img/docs/pie-chart-panel/pie-chart-labels-7-5.png" alt="Pie chart labels" max-width="350px" >}}
|
||||
|
||||
### Tooltip options
|
||||
|
||||
{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Legend options
|
||||
|
||||
Use these settings to define how the legend appears in your visualization. For more information about the legend, refer to [Configure a legend](ref:configure-legends).
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Visibility | Toggle the switch to turn the legend on or off. |
|
||||
| Mode | Use these settings to define how the legend appears in your visualization. Choose from:<ul><li>**List** - Displays the legend as a list. This is a default display mode of the legend.</li><li>**Table** - Displays the legend as a table.</li></ul> |
|
||||
| Placement | Select where to display the legend. Choose **Bottom** or **Right**. |
|
||||
| Width | Control how wide the legend is when placed on the right side of the visualization. This option is only displayed if you set the legend placement to **Right**. |
|
||||
| Legend values | Select values to display in the legend. You can select more than one:<ul><li>**Percent** - The percentage of the whole.</li><li>**Value** - The raw numerical value.</li></ul> |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/singlestat/ # /docs/grafana/next/features/panels/singlestat/
|
||||
- ../../../features/panels/stat/ # /docs/grafana/next/features/panels/stat/
|
||||
- ../../../panels/visualizations/stat-panel/ # /docs/grafana/next/panels/visualizations/stat-panel/
|
||||
- ../../../reference/singlestat/ # /docs/grafana/next/reference/singlestat/
|
||||
- ../../stat-panel/ # /docs/grafana/next/visualizations/stat-panel/
|
||||
- ../../../panels-visualizations/visualizations/stat/ # /docs/grafana/next/panels-visualizations/visualizations/stat/
|
||||
description: Configure options for Grafana's stat visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- docs
|
||||
- stat panel
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Stat
|
||||
weight: 100
|
||||
refs:
|
||||
calculation-types:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/calculation-types/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types/
|
||||
create-dashboard:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard/
|
||||
---
|
||||
|
||||
# Stat
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
This visualization replaces the Singlestat visualization, which was deprecated in Grafana 7.0 and removed in Grafana 8.0.
|
||||
{{< /admonition >}}
|
||||
|
||||
A stat visualization displays your data in single values of interest—such as the latest or current value of a series—with an optional graph sparkline. A graph sparkline, which is only available in stat visualizations, is a small time-series graph shown in the background of each value in the visualization.
|
||||
|
||||
For example, if you're monitoring the utilization of various services, you can use a stat visualization to show their latest usage:
|
||||
|
||||
|
||||
|
||||
Use a stat visualization when you need to:
|
||||
|
||||
- Monitor key metrics at a glance, such as the latest health of your application, number of high priority bugs in your application, or total number of sales.
|
||||
- Display aggregated data, such as the average response time of your services.
|
||||
- Highlight values above your normal thresholds to quickly identify if any metrics are outside your expected range.
|
||||
|
||||
{{< docs/play title="Stat Visualizations in Grafana" url="https://play.grafana.org/d/Zb3f4veGk/" >}}
|
||||
|
||||
## Configure a stat visualization
|
||||
|
||||
Once you've [created a dashboard](ref:create-dashboard), the following video shows you how to configure a stat visualization:
|
||||
|
||||
{{< youtube id="yNRnLyVntUw" start="1048" >}}
|
||||
|
||||
Alternatively, refer to this blog post on [how to easily retrieve values from a range in Grafana using a stat visualization](https://grafana.com/blog/2023/10/18/how-to-easily-retrieve-values-from-a-range-in-grafana-using-a-stat-panel/).
|
||||
|
||||
## Supported data formats
|
||||
|
||||
The stat visualization supports a variety of formats for displaying data. Supported formats include:
|
||||
|
||||
- **Single values** - The most common format and can be numerical, strings, or boolean values.
|
||||
- **Time-series data** - [Calculation types](ref:calculation-types) can be applied to your time-series data to display single values over a specified time range.
|
||||
|
||||
### Examples
|
||||
|
||||
The following tables are examples of the type of data you need for a stat visualization and how it should be formatted.
|
||||
|
||||
#### Single numerical values
|
||||
|
||||
| Number of high priority bugs |
|
||||
| ---------------------------- |
|
||||
| 80 |
|
||||
| 52 |
|
||||
| 59 |
|
||||
| 40 |
|
||||
|
||||
The data is visualized as follows, with the last value displayed, along with a sparkline and [percentage change](#value-options):
|
||||
|
||||
|
||||
|
||||
#### Time-series data
|
||||
|
||||
| Time | Cellar | Living room | Porch | Bedroom | Guest room | Kitchen |
|
||||
| ------------------- | ------ | ----------- | ----- | ------- | ---------- | ------- |
|
||||
| 2024-03-20 06:34:40 | 12.3 | 18.3 | 18.8 | 15.9 | 9.29 | 9.61 |
|
||||
| 2024-03-20 06:41:40 | 16.8 | 17.1 | 21.5 | 14.1 | 10.5 | 17.5 |
|
||||
| 2024-03-20 06:48:40 | 16.7 | 18.0 | 21.0 | 9.51 | 13.6 | 20.1 |
|
||||
| 2024-03-20 06:55:40 | 14.3 | 18.7 | 16.5 | 9.11 | 14.8 | 12.5 |
|
||||
| 2024-03-20 07:02:40 | 12.8 | 15.2 | 21.1 | 15.6 | 7.98 | 13.0 |
|
||||
|
||||
The data is visualized as follows, with the mean value displayed for each room, along with the room name, sparkline, and unit of measurement:
|
||||
|
||||
|
||||
|
||||
By default, a stat displays one of the following:
|
||||
|
||||
- Just the value for a single series or field.
|
||||
- Both the value and name for multiple series or fields.
|
||||
|
||||
You can use the [**Text mode**](#text-mode) to control how the text is displayed.
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value options
|
||||
|
||||
Use the following options to refine how your visualization displays its values:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Show | Display a single value per column or series, or show values for each row. Choose from: <ul><li>**Calculate** - Display a calculated value based on all rows.</li><li>**All values** - Show a separate stat for every row. If you select this option, then you can also limit the number of rows to display.</li> |
|
||||
| Calculation | This option is displayed when you select **Calculate** as your **Show** option. Select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types](ref:calculation-types). |
|
||||
| Limit | This option is displayed when you select **All values** as your **Show** option. Set the maximum number of rows to display. Default is 5,000. |
|
||||
| Fields | Select the fields displayed in the visualization. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Stat styles
|
||||
|
||||
The stat visualization automatically adjusts the layout depending on available width and height in the dashboard, but you can also use the following options to further style the visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Orientation | Select a stacking direction. Choose from: <ul><li>**Auto** - Grafana selects the ideal orientation.</li><li>**Horizontal** - Bars stretch horizontally, left to right.</li><li>**Vertical** - Bars stretch vertically, top to bottom.</li></ul> |
|
||||
| [Text mode](#text-mode) | You can use the **Text mode** option to control what text the visualization renders. If the value is not important, only the name and color is, then change the **Text mode** to **Name**. The value will still be used to determine color and is displayed in a tooltip. |
|
||||
| [Wide layout](#wide-layout) | Set whether wide layout is enabled or not. Wide layout is enabled by default. This option is only applicable when **Text mode** is set to **Value and name**. |
|
||||
| Color mode | Select a color mode. Choose from: <ul><li>**None** - No color applied to the value.</li><li>**Value** - Applies color to the value and graph area.</li><li>**Background Gradient** - Applies color to the value, graph area, and background, with a slight background gradient.</li><li>**Background Solid** - Applies color to the value, graph area, and background, with a solid background color.</li></ul> |
|
||||
| Graph mode | Select a graph sparkline mode. Choose from: <ul><li>**None** - Hides the graph sparkline and only shows the value.</li><li>**Area** - Shows the graph sparkline below the value. This requires that your query returns a time column.</li></ul> The graph sparkline is automatically hidden if the panel becomes too small.|
|
||||
| Text alignment | Select an alignment mode. Choose from: <ul><li>**Auto** - If only a single value is shown (no repeat), then the value is centered. If multiple series or rows are shown, then the value is left-aligned.</li><li>**Center** - Stat value is centered.</li></ul> |
|
||||
| Show percent change | Set whether percent change is displayed or not. Disabled by default. This option is applicable when the **Show** setting, under **Value options**, is set to **Calculate**. |
|
||||
| Percent change color mode | This option is only displayed when **Show percent change** is enabled. Choose from: <ul><li>**Standard** - Green if the percent change is positive, red if the percent change is negative.</li><li>**Inverted** - Red if the percent change is positive, green if the percent change is negative.</li><li>**Same as Value** - Use the same color as the value.</li></ul> |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Text mode
|
||||
|
||||
You can use the Text mode option to control what text the visualization renders. If the value is not important, only the name and color is, then change the **Text mode** to **Name**. The value will still be used to determine color and is displayed in a tooltip.
|
||||
|
||||
- **Auto** - If the data contains multiple series or fields, show both name and value.
|
||||
- **Value** - Show only value, never name. Name is displayed in the hover tooltip instead.
|
||||
- **Value and name** - Always show value and name.
|
||||
- **Name** - Show name instead of value. Value is displayed in the hover tooltip.
|
||||
- **None** - Show nothing (empty). Name and value are displayed in the hover tooltip.
|
||||
|
||||
#### Wide layout
|
||||
|
||||
Set whether wide layout is enabled or not. Wide layout is enabled by default.
|
||||
|
||||
- **On** - Wide layout is enabled.
|
||||
- **Off** - Wide layout is disabled.
|
||||
|
||||
This option is only applicable when **Text mode** is set to **Value and name**. When wide layout is enabled, the value and name are displayed side-by-side with the value on the right, if the panel is wide enough. When wide layout is disabled, the value is always rendered underneath the name.
|
||||
|
||||
### Text size
|
||||
|
||||
Adjust the sizes of the gauge text.
|
||||
|
||||
- **Title** - Enter a numeric value for the gauge title size.
|
||||
- **Value** - Enter a numeric value for the gauge value size.
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../panels/visualizations/state-timeline/ # /docs/grafana/next/panels/visualizations/state-timeline/
|
||||
- ../../state-timeline/ # /docs/grafana/next/visualizations/state-timeline/
|
||||
- ../../../panels-visualizations/visualizations/state-timeline/ # /docs/grafana/next/panels-visualizations/visualizations/state-timeline/
|
||||
description: Configure options for Grafana's state timeline visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- docs
|
||||
- state timeline
|
||||
- panel
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: State timeline
|
||||
weight: 100
|
||||
---
|
||||
|
||||
# State timeline
|
||||
|
||||
A state timeline visualization displays data in a way that shows state changes over time. In a state timeline, the data is presented as a series of bars or bands called _state regions_. State regions can be rendered with or without values, and the region length indicates the duration or frequency of a state within a given time range.
|
||||
|
||||
For example, if you're monitoring the CPU usage of a server, you can use a state timeline to visualize the different states, such as “LOW,” “NORMAL,” “HIGH,” or “CRITICAL,” over time. Each state is represented by a different color and the lengths represent the duration of time that the server remained in that state:
|
||||
|
||||
|
||||
|
||||
The state timeline visualization is useful when you need to monitor and analyze changes in states or statuses of various entities over time. You can use one when you need to:
|
||||
|
||||
- Monitor the status of a server, application, or service to know when your infrastructure is experiencing issues over time.
|
||||
- Identify operational trends over time.
|
||||
- Spot any recurring issues with the health of your applications.
|
||||
|
||||
## Configure a state timeline
|
||||
|
||||
{{< 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:
|
||||
|
||||
- **Timestamps** - Indicate when each state change occurred. This could also be the start time for the state change. You can also add an optional timestamp to indicate the end time for the state change.
|
||||
- **Entity name/identifier** - Represents the name of the entity you're trying to monitor.
|
||||
- **State value** - Represents the state value of the entity you're monitoring. These can be string, numerical, or boolean states.
|
||||
|
||||
Each state ends when the next state begins or when there is a `null` value.
|
||||
|
||||
### Example 1
|
||||
|
||||
The following example has a single time column and includes null values:
|
||||
|
||||
| Timestamps | Server A | Server B |
|
||||
| ------------------- | -------- | -------- |
|
||||
| 2024-02-29 8:00:00 | Up | Up |
|
||||
| 2024-02-29 8:15:00 | null | Up |
|
||||
| 2024-02-29 8:30:00 | Down | null |
|
||||
| 2024-02-29 8:45:00 | | Up |
|
||||
| 2024-02-29 9:00:00 | Up | |
|
||||
| 2024-02-29 9:15:00 | Up | Down |
|
||||
| 2024-02-29 9:30:00 | Up | Down |
|
||||
| 2024-02-29 10:00:00 | Down | Down |
|
||||
| 2024-02-29 10:30:00 | Warning | Down |
|
||||
|
||||
The data is converted as follows, with the [null and empty values visualized as gaps](#connect-null-values) in the state timeline:
|
||||
|
||||
{{< figure src="/static/img/docs/state-timeline-panel/state-timeline-with-null-values.png" max-width="1025px" alt="A state timeline visualization with null values showing the status of two servers" >}}
|
||||
|
||||
### Example 2
|
||||
|
||||
The following example has two time columns and doesn't include any null values:
|
||||
|
||||
| Start time | End time | Server A | Server B |
|
||||
| ------------------- | ------------------- | -------- | -------- |
|
||||
| 2024-02-29 8:00:00 | 2024-02-29 8:15:00 | Up | Up |
|
||||
| 2024-02-29 8:15:00 | 2024-02-29 8:30:00 | Up | Up |
|
||||
| 2024-02-29 8:45:00 | 2024-02-29 9:00:00 | Down | Up |
|
||||
| 2024-02-29 9:00:00 | 2024-02-29 9:15:00 | Down | Up |
|
||||
| 2024-02-29 9:30:00 | 2024-02-29 10:00:00 | Down | Down |
|
||||
| 2024-02-29 10:00:00 | 2024-02-29 10:30:00 | Warning | Down |
|
||||
|
||||
The data is converted as follows:
|
||||
|
||||
{{< figure src="/static/img/docs/state-timeline-panel/state-timeline-with-two-timestamps.png" max-width="1025px" alt="A state timeline visualization with two time columns showing the status of two servers" >}}
|
||||
|
||||
If your query results aren't in a table format like the preceding examples, especially for time-series data, you can apply specific [transformations](https://stackoverflow.com/questions/68887416/grafana-state-timeline-panel-with-values-states-supplied-by-label) to achieve this.
|
||||
|
||||
### Time series data
|
||||
|
||||
You can also create a state timeline visualization using time series data. To do this, add [thresholds](#thresholds), which turn the time series into discrete colored state regions.
|
||||
|
||||
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### State timeline options
|
||||
|
||||
Use these options to refine the visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------------------------------------------------------------------------------------------- |
|
||||
| Merge equal consecutive values | Controls whether Grafana merges identical values if they are next to each other. |
|
||||
| Show values | Controls whether values are rendered inside the state regions. Choose from **Auto**, **Always**, and **Never**. **Auto** renders values if there is sufficient space. |
|
||||
| Align values | Controls value alignment inside state regions. Choose from **Left**, **Center**, and **Right**. |
|
||||
| Row height | Controls how much space between rows there are. 1 = no space = 0.5 = 50% space. |
|
||||
| [Page size](#page-size-enable-pagination) | The **Page size** option lets you paginate the state timeline visualization to limit how many series are visible at once. |
|
||||
| Line width | Controls line width of state regions. |
|
||||
| Fill opacity | Controls value alignment inside state regions. |
|
||||
| [Connect null values](#connect-null-values) | Choose how null values, which are gaps in the data, appear on the graph. |
|
||||
| [Disconnect null values](#disconnect-values) | Choose whether to set a threshold above which values in the data should be disconnected. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Page size (enable pagination)
|
||||
|
||||
The **Page size** option lets you paginate the state timeline visualization to limit how many series are visible at once. This is useful when you have many series. With paginated results, the visualization displays a subset of all series on each page:
|
||||
|
||||
{{< video-embed src="/media/docs/grafana/panels-visualizations/screen-recording-grafana-11-2-state-timeline-pagination-dark.mp4" >}}
|
||||
|
||||
{{< docs/shared lookup="visualizations/connect-null-values.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
{{< docs/shared lookup="visualizations/disconnect-values.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Legend options
|
||||
|
||||
{{< docs/shared lookup="visualizations/legend-options-2.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Tooltip options
|
||||
|
||||
{{< docs/shared lookup="visualizations/tooltip-options-3.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Axis options
|
||||
|
||||
{{< docs/shared lookup="visualizations/axis-options-3.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
+143
@@ -0,0 +1,143 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../panels/visualizations/status-history/ # /docs/grafana/next/panels/visualizations/status-history/
|
||||
- ../../status-history/ # /docs/grafana/next/visualizations/status-history/
|
||||
- ../../../panels-visualizations/visualizations/status-history/ # /docs/grafana/next/panels-visualizations/visualizations/status-history/
|
||||
description: Configure options for Grafana's status history visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- docs
|
||||
- status history
|
||||
- panel
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Status history
|
||||
weight: 100
|
||||
---
|
||||
|
||||
# Status history
|
||||
|
||||
A status history visualization displays data in a way that shows periodic states over time. In a status history, each field or series is rendered as a horizontal row, with multiple boxes showing the different statuses. This provides you with a centralized view for the status of a component or service.
|
||||
|
||||
For example, if you're monitoring the health status of different services, you can use a status history to visualize the different statuses, such as “True” or "False," over time. Each status is represented by a different color:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-status-history-v11.6.png" max-width="800px" alt="A status history panel showing the health status of different sensors" >}}
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
A status history is similar to a [state timeline](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/state-timeline/), but has different [configuration options](#status-history-options). Unlike state timelines, status histories don't merge consecutive values.
|
||||
{{< /admonition >}}
|
||||
|
||||
Use a status history when you need to:
|
||||
|
||||
- Monitor the status of a server, application, or service to know when your infrastructure is experiencing issues over time.
|
||||
- Identify operational trends over time.
|
||||
- Spot any recurring issues with the health of your applications.
|
||||
|
||||
## Configure a status history
|
||||
|
||||
Once you've [created a dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/), you can use the following state timeline video as a reference for how to configure a status history:
|
||||
|
||||
{{< 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:
|
||||
|
||||
- **Timestamps** - Indicate when each status change occurred. This could also be the start time for the status change. You can also add an optional timestamp to indicate the end time for the status change.
|
||||
- **Entity name/identifier** - Represents the name of the entity you're trying to monitor.
|
||||
- **Status value** - Represents the state value of the entity you're monitoring. These can be string, numerical, or boolean states.
|
||||
|
||||
### Examples
|
||||
|
||||
The following tables are examples of the type of data you need for a status history visualization and how it should be formatted.
|
||||
|
||||
#### Single time column with null values
|
||||
|
||||
| Timestamps | Backend_01 | Backend_02 |
|
||||
| ------------------ | ---------- | ---------- |
|
||||
| 2024-02-29 8:00:00 | OK | WARN |
|
||||
| 2024-02-29 8:15:00 | WARN | |
|
||||
| 2024-02-29 8:18:00 | | WARN |
|
||||
| 2024-02-29 8:30:00 | BAD | |
|
||||
| 2024-02-29 8:36:00 | | OK |
|
||||
| 2024-02-29 8:45:00 | OK | |
|
||||
|
||||
The data is converted as follows, with the null and empty values visualized as gaps in the status history:
|
||||
|
||||
{{< figure src="/static/img/docs/status-history-panel/status_history_with_null.png" max-width="1025px" alt="A status history panel with null values showing the status of two servers" >}}
|
||||
|
||||
#### Two time columns without null values
|
||||
|
||||
| Start time | End time | Backend_01 | Backend_02 |
|
||||
| ------------------ | ------------------ | ---------- | ---------- |
|
||||
| 2024-02-29 8:00:00 | 2024-02-29 8:15:00 | OK | OK |
|
||||
| 2024-02-29 8:15:00 | 2024-02-29 8:30:00 | OK | OK |
|
||||
| 2024-02-29 8:30:00 | 2024-02-29 8:45:00 | OK | OK |
|
||||
| 2024-02-29 8:45:00 | 2024-02-29 9:00:00 | BAD | WARN |
|
||||
| 2024-02-29 9:00:00 | 2024-02-29 9:15:00 | OK | WARN |
|
||||
|
||||
The data is converted as follows:
|
||||
|
||||
{{< figure src="/static/img/docs/status-history-panel/status_history.png" max-width="1025px" alt="A status history panel with two time columns showing the status of two servers" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Status history options
|
||||
|
||||
Use these options to refine the visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------------------------------------------------------------------------------------------- |
|
||||
| Show values | Controls whether values are rendered inside the state regions. Choose from **Auto**, **Always**, and **Never**. **Auto** renders values if there is sufficient space. |
|
||||
| Row height | Controls the height of boxes. 1 = maximum space and 0 = minimum space. |
|
||||
| Column width | Controls the width of boxes. 1 = maximum space and 0 = minimum space. |
|
||||
| Page size (enable pagination) | The **Page size** option lets you paginate the status history visualization to limit how many series are visible at once. This is useful when you have many series. |
|
||||
| Line width | Controls line width of state regions. |
|
||||
| Fill opacity | Controls value alignment inside state regions. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Legend options
|
||||
|
||||
{{< docs/shared lookup="visualizations/legend-options-2.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Tooltip options
|
||||
|
||||
{{< docs/shared lookup="visualizations/tooltip-options-3.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Axis options
|
||||
|
||||
{{< docs/shared lookup="visualizations/axis-options-3.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,567 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/table_panel/ # /docs/grafana/next/features/panels/table_panel/
|
||||
- ../../../panels/visualizations/table/filter-table-columns/ # /docs/grafana/next/panels/visualizations/table/filter-table-columns/
|
||||
- ../../../reference/table/ # /docs/grafana/next/reference/table/
|
||||
- ../../table/ # /docs/grafana/next/visualizations/table/
|
||||
- ../../table/filter-table-columns/ # /docs/grafana/next/visualizations/table/filter-table-columns/
|
||||
- ../../../panels/visualizations/table/table-field-options/ # /docs/grafana/next/panels/visualizations/table/table-field-options/
|
||||
- ../../../panels-visualizations/visualizations/table/ # /docs/grafana/next/panels-visualizations/visualizations/table/
|
||||
description: Configure options for Grafana's table visualization
|
||||
keywords:
|
||||
- grafana
|
||||
- dashboard
|
||||
- panels
|
||||
- table panel
|
||||
- table options
|
||||
- format tables
|
||||
- table filter
|
||||
- filter columns
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Table
|
||||
weight: 100
|
||||
refs:
|
||||
calculations:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/calculation-types/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types/
|
||||
time-series-panel:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/time-series/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series/
|
||||
time-series-to-table-transformation:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/transform-data/#time-series-to-table-transform
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/transform-data/#time-series-to-table-transform
|
||||
color-scheme:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/#color-scheme
|
||||
- pattern: /docs/grafana-cloud
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/#color-scheme
|
||||
field-override:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/
|
||||
data-transformation:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/transform-data/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/transform-data/
|
||||
build-query:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/
|
||||
graph-styles:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/time-series/#graph-styles-options
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series/#graph-styles-options
|
||||
---
|
||||
|
||||
# Table
|
||||
|
||||
Tables are a highly flexible visualization designed to display data in columns and rows.
|
||||
The table visualization can take multiple datasets and provide the option to switch between them.
|
||||
With this versatility, it's the preferred visualization for viewing multiple data types, aiding in your data analysis needs.
|
||||
|
||||
|
||||
|
||||
You can use a table visualization to show datasets such as:
|
||||
|
||||
- Common database queries like logs, traces, metrics
|
||||
- Financial reports
|
||||
- Customer lists
|
||||
- Product catalogs
|
||||
|
||||
Any information you might want to put in a spreadsheet can often be best visualized in a table.
|
||||
|
||||
Tables also provide different styles to visualize data inside the table cells, such as colored text and cell backgrounds, gauges, sparklines, data links, JSON code, and images.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
Annotations and alerts are not currently supported for tables.
|
||||
{{< /admonition >}}
|
||||
|
||||
## Configure a table visualization
|
||||
|
||||
The following video provides a visual walkthrough of the options you can set in a table visualization.
|
||||
If you want to see a configuration in action, check out the video:
|
||||
|
||||
{{< youtube id="PCY7O8EJeJY" >}}
|
||||
|
||||
{{< docs/play title="Table Visualizations in Grafana" url="https://play.grafana.org/d/OhR1ID6Mk/" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
The table visualization supports any data that has a column-row structure.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
If you’re using a cell type such as sparkline or JSON, the data requirements may differ in a way that’s specific to that type. For more info refer to [Cell type](#cell-type).
|
||||
{{< /admonition >}}
|
||||
|
||||
### Example
|
||||
|
||||
This example shows a basic dataset in which there's data for every table cell:
|
||||
|
||||
```csv
|
||||
Column1, Column2, Column3
|
||||
value1 , value2 , value3
|
||||
value4 , value5 , value6
|
||||
value7 , value8 , value9
|
||||
```
|
||||
|
||||
If a cell is missing or the table column-row structure is not complete, as in the following example, the table visualization won’t display any of the data:
|
||||
|
||||
```csv
|
||||
Column1, Column2, Column3
|
||||
value1 , value2 , value3
|
||||
gap1 , gap2
|
||||
value4 , value5 , value6
|
||||
```
|
||||
|
||||
If you need to hide columns, you can do so using [data transformations](ref:data-transformation), [field overrides](#field-overrides), or by [building a query](ref:build-query) that returns only the needed columns.
|
||||
|
||||
## Column filtering
|
||||
|
||||
You can temporarily change how column data is displayed using column filtering.
|
||||
For example, you can show or hide specific values.
|
||||
|
||||
### Turn on column filtering
|
||||
|
||||
To turn on column filtering, follow these steps:
|
||||
|
||||
1. In Grafana, navigate to the dashboard with the table with the columns that you want to filter.
|
||||
1. Hover over any part of the panel to which you want to add the link to display the actions menu on the top right corner.
|
||||
1. Click the menu and select **Edit**.
|
||||
1. In the panel editor pane, expand the **Table** options section.
|
||||
1. Toggle on the [**Column filter** switch](#table-options).
|
||||
|
||||
A filter icon (funnel) appears next to each column title.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/column-filter-with-icon.png" max-width="350px" alt="Column filtering turned on" class="docs-image--no-shadow" >}}
|
||||
|
||||
### Filter column values
|
||||
|
||||
To filter column values, follow these steps:
|
||||
|
||||
1. Click the filter icon (funnel) next to a column title.
|
||||
|
||||
Grafana displays the filter options for that column.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/filter-column-values_12.2.png" max-width="300px" alt="Filter column values" >}}
|
||||
|
||||
1. Click the checkbox next to the values that you want to display or click **Select all**.
|
||||
1. Enter text in the search field at the top to show those values in the display so that you can select them rather than scroll to find them.
|
||||
1. Choose from several operators to display column values:
|
||||
- **Contains** - Matches a regex pattern (operator by default).
|
||||
- **Expression** - Evaluates a boolean expression. The character `$` represents the column value in the expression (for example, "$ >= 10 && $ <= 12").
|
||||
- The typical comparison operators: `=`, `!=`, `<`, `<=`, `>`, `>=`.
|
||||
|
||||
1. Click the checkbox above the **Ok** and **Cancel** buttons to add or remove all displayed values to and from the filter.
|
||||
|
||||
### Clear column filters
|
||||
|
||||
Columns with filters applied have a blue filter displayed next to the title.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/filtered-column.png" max-width="100px" alt="Filtered column" class="docs-image--no-shadow" >}}
|
||||
|
||||
To remove the filter, click the blue filter icon and then click **Clear filter**.
|
||||
|
||||
<!-- vale Grafana.WordList = NO -->
|
||||
<!-- vale Grafana.Spelling = NO -->
|
||||
|
||||
### Apply ad hoc filters from the table
|
||||
|
||||
In tables, you can apply ad hoc filters directly from the visualization with one click.
|
||||
|
||||
To display the filter icons, hover your cursor over the cell that has the value for which you want to filter:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-table-adhoc-filter-v12.2.png" max-width="500px" alt="Table with ad hoc filter icon displayed on a cell" >}}
|
||||
|
||||
For more information about applying ad hoc filters this way, refer to [Dashboard drilldown with ad hoc filters](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/variables/add-template-variables/#dashboard-drilldown-with-ad-hoc-filters).
|
||||
|
||||
<!-- vale Grafana.Spelling = YES -->
|
||||
<!-- vale Grafana.WordList = YES -->
|
||||
|
||||
## Sort columns
|
||||
|
||||
Click a column title to change the sort order from default to descending to ascending.
|
||||
Each time you click, the sort order changes to the next option in the cycle.
|
||||
You can sort multiple columns by holding the `Cmd` or `Ctrl` key
|
||||
and clicking the column name.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/sort-descending.png" max-width="350px" alt="Sort descending" class="docs-image--no-shadow" >}}
|
||||
|
||||
## Dataset selector
|
||||
|
||||
If the data queried contains multiple datasets, a table displays a drop-down list at the bottom, so you can select the dataset you want to visualize.
|
||||
This option is only available when you're editing the panel.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-table-multi-dataset-v11.3.png" max-width="650px" alt="Table visualization with multiple datasets" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Table options
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| -------------------- | --------------------------------------------------------- |
|
||||
| Show table header | Show or hide column names imported from your data source. |
|
||||
| Frozen columns | Freeze columns starting from the left side of the table. Enter a value to set how many columns are frozen. |
|
||||
| Cell height | Set the height of the cell. Choose from **Small**, **Medium**, or **Large**. |
|
||||
| Max row height | Define the maximum height for a row in the table. This can be useful when **Wrap text** is enabled for one or more columns. |
|
||||
| Enable pagination | Toggle the switch to control how many table rows are visible at once. When switched on, the page size automatically adjusts to the height of the table. This option doesn't affect queries. |
|
||||
| Minimum column width | Define the lower limit of the column width, in pixels. By default, the minimum width of the table column is 150 pixels. For small-screen devices, such as mobile phones or tablets, reduce the value to `50` to allow table-based panels to render correctly in dashboards. |
|
||||
| Column width | Define a column width, in pixels, rather than allowing the width to be set automatically. By default, Grafana calculates the column width based on the table size and the minimum column width. |
|
||||
| Column alignment | Set how Grafana should align cell contents. Choose from: **Auto** (default), **Left**, **Center**, or **Right**. |
|
||||
| Column filter | Temporarily change how column data is displayed. For example, show or hide specific values. For more information, refer to [Column filtering](#column-filtering). |
|
||||
| Wrap text | Enables text wrapping for cell content. |
|
||||
| Wrap header text | Enables text wrapping for column headers. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Table footer options
|
||||
|
||||
The table footer displays the results of calculations (and reducer functions) on fields.
|
||||
The footer is only displayed after you select an option in the **Calculation** drop-down list:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-table-footer-selector-v12.2.png" max-width="300px" alt="The footer calculation selector, open" >}}
|
||||
|
||||
There are several calculations you can choose from including minimum, maximum, first, last, and total.
|
||||
For the full list of options, refer to [Calculations](ref:calculations).
|
||||
|
||||
In the table footer:
|
||||
|
||||
- You can apply multiple calculations at once.
|
||||
- The calculations and reducer functions apply to all fields in the table, by default. To control which fields have a calculation or function applied, add the table footer in an override instead.
|
||||
- If you enable a mathematical function for a non-numeric field, nothing for that function is displayed for that field.
|
||||
|
||||
In the following image, multiple calculations—**Mean**, **Max**, and **Last**—have been applied:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-tablefooter-v12.2.png" max-width="750px" alt="Table with footer displaying mean, max, and last" >}}
|
||||
|
||||
You can also see in the previous image that the mathematical functions, **Mean** and **Max**, haven't been applied to the text field in the table.
|
||||
Only the **Last** function has been applied to that field.
|
||||
|
||||
{{< admonition type="note">}}
|
||||
Calculations applied to cell types like **Markdown + HTML** might have unexpected results.
|
||||
{{< /admonition>}}
|
||||
|
||||
### Cell options
|
||||
|
||||
Cell options allow you to control how data is displayed in a table.
|
||||
The options are differ based on the cell type that you select and are outlined within the descriptions of each cell type.
|
||||
The following table provides short descriptions for each cell type and links to a longer description and the cell type options.
|
||||
|
||||
#### Cell type
|
||||
|
||||
By default, Grafana automatically chooses display settings.
|
||||
You can override these settings by choosing one of the following cell types to control the default display for all fields.
|
||||
Additional configuration is available for some cell types.
|
||||
|
||||
If you want to apply a cell type to only some fields instead of all fields, you can do so using the **Cell options > Cell type** field override.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Cell type | Description |
|
||||
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [Auto](#auto) | A basic text and number cell. |
|
||||
| [Colored text](#colored-text) | If thresholds, value mappings, or color schemes are set, then the cell text is displayed in the appropriate color. |
|
||||
| [Colored background](#colored-background) | If thresholds, value mappings, or color schemes are set, then the cell background is displayed in the appropriate color. |
|
||||
| [Data links](#data-links) | The cell text reflects the titles of the configured data links.|
|
||||
| [Gauge](#gauge) | Values are displayed as a horizontal bar gauge. You can set the [Gauge display mode](#gauge-display-mode) and the [Value display](#value-display) options. |
|
||||
| [Sparkline](#sparkline) | Shows values rendered as a sparkline. |
|
||||
| [JSON View](#json-view) | Shows values formatted as code. |
|
||||
| [Pill](#pill) | Displays each item in a comma-separated string in a colored block. |
|
||||
| [Markdown + HTML](#markdown--html) | Displays rich markdown or HTML content. |
|
||||
| [Image](#image) | Displays an image when the value is a URL or a base64 encoded image. |
|
||||
| [Actions](#actions) | The cell displays a button that triggers a basic, unauthenticated API call when clicked. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Auto
|
||||
|
||||
This is a basic text and number cell.
|
||||
|
||||
It has the following cell options:
|
||||
|
||||
{{< docs/shared lookup="visualizations/cell-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
#### Colored text
|
||||
|
||||
If thresholds, value mappings, or color schemes are set, the cell text is displayed in the appropriate color.
|
||||
|
||||
|
||||
|
||||
The colored text cell type has the following options:
|
||||
|
||||
{{< docs/shared lookup="visualizations/cell-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
#### Colored background
|
||||
|
||||
If thresholds, value mappings, or color schemes are set, the cell background is displayed in the appropriate color.
|
||||
|
||||
|
||||
|
||||
You can also set background cell color by row:
|
||||
|
||||
|
||||
|
||||
The colored background cell type has the following options:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Background display mode | Choose between **Basic** and **Gradient**. |
|
||||
| Apply to entire row | Toggle the switch on to apply the background color that's configured for the cell to the whole row. |
|
||||
| Cell value inspect | <p>Enables value inspection from table cells. When the switch is toggled on, clicking the inspect icon in a cell opens the **Inspect value** drawer which contains two tabs: **Plain text** and **Code editor**.</p><p>Grafana attempts to automatically detect the type of data in the cell and opens the drawer with the associated tab showing. However, you can switch back and forth between tabs.</p> |
|
||||
| Tooltip from field | Toggle on the **Tooltip from field** switch to use the values from another field (or column) in a tooltip. For more information, refer to the [Tooltip from field](#tooltip-from-field). |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<!-- The cell value inspect and tooltip from field descriptions above should be copied from docs/sources/shared/visualizations/cell-options.md -->
|
||||
|
||||
#### Data links
|
||||
|
||||
If you've configured data links, when the cell type is **Auto**, the cell text becomes clickable.
|
||||
If you change the cell type to **Data links**, the cell text reflects the titles of the configured data links. To control the application of data link text more granularly, use a **Cell option > Cell type > Data links** field override.
|
||||
|
||||
#### Gauge
|
||||
|
||||
With this cell type, cells can be displayed as a graphical gauge, with several different presentation types.
|
||||
|
||||
The gauge cell type has the following options:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------------------ | -------------------------------------------------------------------------------------------------------------- |
|
||||
| Gauge display mode | Controls the type of gauge used. For more information, refer to the [Gauge display mode](#gauge-display-mode). |
|
||||
| Value display | Controls how the value is displayed. For more information, refer to the [Value display](#value-display). |
|
||||
| Tooltip from field | Toggle on the **Tooltip from field** switch to use the values from another field (or column) in a tooltip. For more information, refer to [Tooltip from field](#tooltip-from-field). |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
The maximum and minimum values of the gauges are configured automatically from the smallest and largest values in your whole dataset.
|
||||
If you don't want the max/min values to be pulled from the whole dataset, you can configure them for each column using [field overrides](#field-overrides).
|
||||
{{< /admonition >}}
|
||||
|
||||
##### Gauge display mode
|
||||
|
||||
You can set three gauge display modes.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Basic | Shows a simple gauge with the threshold levels defining the color of gauge. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-gauge-mode-basic-v11.3.png" alt="Table cell with basic gauge mode" >}} |
|
||||
| Gradient | The threshold levels define a gradient. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-gauge-mode-gradient-v11.3.png" alt="Table cell with gradient gauge mode" >}} |
|
||||
| Retro LCD | The gauge is split up in small cells that are lit or unlit. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-gauge-mode-retro-v11.3.png" alt="Table cell with retro LCD gauge mode" >}} |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
##### Value display
|
||||
|
||||
Labels displayed alongside of the gauges can be set to be colored by value, match the theme text color, or be hidden.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Value color | Labels are colored by value. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-labels-value-color-v11.3.png" alt="Table with labels in value color" >}} |
|
||||
| Text color | Labels match the theme text color. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-labels-text-color-v11.3.png" alt="Table with labels in theme color" >}} |
|
||||
| Hidden | Labels are hidden. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-labels-hidden-v11.3.png" alt="Table with labels hidden" >}} |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Sparkline
|
||||
|
||||
This cell type shows values rendered as a sparkline.
|
||||
To show sparklines on data with multiple time series, use the [Time series to table transformation](ref:time-series-to-table-transformation) to process it into a format the table can show.
|
||||
|
||||
|
||||
|
||||
The sparkline cell type options are described in the following table.
|
||||
For more detailed information about all of the sparkline styling options (except **Hide value**), refer to the [time series graph styles documentation](ref:graph-styles).
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| Hide value | Toggle the switch on or off to display or hide the cell value on the sparkline. |
|
||||
| Style | Choose whether to display your time-series data as **Lines**, **Bars**, or **Points**. You can use overrides to combine multiple styles in the same graph. |
|
||||
| Line interpolation | How the graph interpolates the series line. Choose from:<ul><li>**Linear** - Points are joined by straight lines.</li><li>**Smooth** - Points are joined by curved lines that smooths transitions between points.</li><li>**Step before** - The line is displayed as steps between points. Points are rendered at the end of the step.</li><li>**Step after** - The line is displayed as steps between points. Points are rendered at the beginning of the step.</li></ul> |
|
||||
| Line width | The thickness of the series lines or the outline for bars using the **Line width** slider. |
|
||||
| Fill opacity | The series area fill color using the **Fill opacity** slider. |
|
||||
| Gradient mode | Gradient mode controls the gradient fill, which is based on the series color. Gradient appearance is influenced by the **Fill opacity** setting. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme](ref:color-scheme). Choose from:<ul><li>**None** - No gradient fill. This is the default setting.</li><li>**Opacity** - An opacity gradient where the opacity of the fill increases as y-axis values increase.</li><li>**Hue** - A subtle gradient that's based on the hue of the series color.</li></ul> |
|
||||
| Line style | Choose from:<ul><li>**Solid**</li><li>**Dash** - Select the length and gap for the line dashes. Default dash spacing is 10, 10.</li><li>**Dots** - Select the gap for the dot spacing. Default dot spacing is 0, 10.</li></ul> |
|
||||
| Connect null values | How null values, which are gaps in the data, appear on the graph. Null values can be connected to form a continuous line or set to a threshold above which gaps in the data are no longer connected. Choose from:<ul><li>**Never** - Time series data points with gaps in the data are never connected.</li><li>**Always** - Time series data points with gaps in the data are always connected.</li><li>**Threshold** - Specify a threshold above which gaps in the data are no longer connected. This can be useful when the connected gaps in the data are of a known size or within a known range, and gaps outside this range should no longer be connected.</li></ul> |
|
||||
| Show points | Whether to show data points to lines or bars. Choose from: <ul><li>**Auto** - Grafana determines a point's visibility based on the density of the data. If the density is low, then points appear.</li><li>**Always** - Show the points regardless of how dense the dataset is.</li><li>**Never** - Don't show points.</li></ul> |
|
||||
| Point size | Set the size of the points, from 1 to 40 pixels in diameter. |
|
||||
| Bar alignment | Set the position of the bar relative to a data point. |
|
||||
| Tooltip from field | Toggle on the **Tooltip from field** switch to use the values from another field (or column) in a tooltip. For more information, refer to [Tooltip from field](#tooltip-from-field). |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### JSON View
|
||||
|
||||
This cell type shows values formatted as code.
|
||||
If a value is an object the JSON view allowing browsing the JSON object will appear on hover.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/json-view.png" max-width="350px" alt="JSON view" class="docs-image--no-shadow" >}}
|
||||
|
||||
For the JSON view cell type, you can set enable **Cell value inspect**.
|
||||
This enables value inspection from table cells.
|
||||
When the switch is toggled on, clicking the inspect icon in a cell opens the **Inspect value** drawer which contains two tabs: **Plain text** and **Code editor**.
|
||||
|
||||
Toggle on the **Tooltip from field** switch to use the values from another field (or column) in a tooltip.
|
||||
For more information, refer to [Tooltip from field](#tooltip-from-field).
|
||||
|
||||
Grafana attempts to automatically detect the type of data in the cell and opens the drawer with the associated tab showing.
|
||||
However, you can switch back and forth between tabs.
|
||||
|
||||
#### Pill
|
||||
|
||||
The **Pill** cell type displays each item in a comma-separated string in a colored block.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-table-pill-cells-v12.2.png" max-width="750px" alt="Table using the pill cell type" >}}
|
||||
|
||||
The colors applied to each piece of text are maintained throughout the table.
|
||||
For example, if the word "test" is first displayed in a red pill, it will always be displayed in a red pill.
|
||||
|
||||
The following data formats are supported for the pill cell type:
|
||||
|
||||
- Comma-separated values (`cows,chickens,goats`)
|
||||
- JSON arrays of uniform (`(["cows","chickens","goats"])`) or mixed (`[1,2,3,"foo",42,"bar"]`) types
|
||||
|
||||
Toggle on the **Tooltip from field** switch to use the values from another field (or column) in a tooltip.
|
||||
For more information, refer to [Tooltip from field](#tooltip-from-field).
|
||||
|
||||
#### Markdown + HTML
|
||||
|
||||
The **Markdown + HTML** cell type displays rich Markdown or HTML content, rendered using the
|
||||
[GitHub-Flavored Markdown](https://github.github.com/gfm/) spec. This is useful if you need to display
|
||||
customized, pre-formatted information alongside tabular data, such as formatted strings,
|
||||
lists of links, or other dynamic cases.
|
||||
|
||||
For this cell type, you can toggle the **Dynamic height** switch, which allows the cell to resize
|
||||
dynamically based on the cell content. If you use dynamic height, we strongly recommend that you
|
||||
also toggle on **Pagination** to avoid performance issues in larger tables, since enabling
|
||||
Dynamic height disables table {{< term "virtualization" >}}virtualization{{< /term >}}.
|
||||
|
||||
By default, the HTML rendered is sanitized, and un-sanitized HTML can only be rendered
|
||||
in these cells if the [`disable_sanitize_html`](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/setup-grafana/configure-grafana/#disable_sanitize_html) option is set to true for your Grafana instance.
|
||||
|
||||
Toggle on the **Tooltip from field** switch to use the values from another field (or column) in a tooltip.
|
||||
For more information, refer to [Tooltip from field](#tooltip-from-field).
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-table-markdown-v12.2.png" max-width="600px" alt="Table using the pill cell type" >}}
|
||||
|
||||
#### Image
|
||||
|
||||
If you have a field value that is an image URL or a base64 encoded image, this cell type displays it as an image.
|
||||
|
||||
|
||||
|
||||
It has the following options:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Alt text | Set the alternative text of an image. The text will be available for screen readers and in cases when images can't be loaded. |
|
||||
| Title text | Set the text that's displayed when the image is hovered over with a cursor. |
|
||||
| Tooltip from field | Toggle on the **Tooltip from field** switch to use the values from another field (or column) in a tooltip. For more information, refer to [Tooltip from field](#tooltip-from-field). |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Actions
|
||||
|
||||
The cell displays a button that triggers a basic, unauthenticated API call when clicked.
|
||||
Configure the API call with the following options:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------------------ | ------------ |
|
||||
| Endpoint | Enter the endpoint URL. |
|
||||
| Method | Choose from **GET**, **POST**, and **PUT**. |
|
||||
| Content-Type | Select an option in the drop-down list. Choose from: JSON, Text, JavaScript, HTML, XML, and x-www-form-urlencoded. |
|
||||
| Query parameters | Enter as many **Key**, **Value** pairs as you need. |
|
||||
| Header parameters | Enter as many **Key**, **Value** pairs as you need. |
|
||||
| Payload | Enter the body of the API call. |
|
||||
| Tooltip from field | Toggle on the **Tooltip from field** switch to use the values from another field (or column) in a tooltip. For more information, refer to [Tooltip from field](#tooltip-from-field). |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Tooltip from field
|
||||
|
||||
Toggle on the **Tooltip from field** switch to use the values from another field (or column) in a tooltip.
|
||||
|
||||
When you toggle the switch on, you can select from a drop-down list any of the fields in the table to be used as the source of the tooltip content.
|
||||
All table fields are included in the drop-down list, whether visible or hidden.
|
||||
|
||||
When a tooltip from a field has been added to a cell, a chip is displayed in the top-right or top-left corner of the cell:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-tooltip-chip-1-v12.2.png" max-width="500px" alt="Tooltip chip" >}}
|
||||
|
||||
Hover your mouse over the chip to display the tooltip.
|
||||
|
||||
When you toggle on the switch, the **Tooltip placement** option, which controls where the tooltip box opens upon hover, is also displayed.
|
||||
Select one of the following options: **Auto**, **Top**, **Right**, **Bottom**, and **Left**.
|
||||
|
||||
The content of the tooltip is determined by the values of the source field and can't be directly edited.
|
||||
However, you can affect the display of the value using overrides like value mappings, as shown in the [Example: Tooltip from field with value mappings](#example-tooltip-from-field-with-value-mappings) section.
|
||||
|
||||
While you can turn on this option under **Cell options**, and have it applied to all cells in the table, it's typically used as an override on a sub-set of cells instead.
|
||||
This is demonstrated in the example in the following section.
|
||||
|
||||
##### Example: Tooltip from field using overrides
|
||||
|
||||
The following table has five visible fields (columns) as well as a hidden field called "Info":
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-tooltip-table-1-v12.2.png" max-width="750px" alt="Table that includes a hidden column" >}}
|
||||
|
||||
- The "Info" field is hidden using the **Table > Hide in table** override property.
|
||||
- The following overrides have been applied to the "Short text" field:
|
||||
- The values from the "Info" field are used as tooltip text for the "Short text" cells using the **Cell options > Tooltip from field** override property.
|
||||
- The **Cell options > Tooltip placement** override property is set to control the placement of the tooltip.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-tooltip-override-2-v12.2.png" max-width="300px" alt="Override to use the Info field values as tooltips for the Short text column" >}}
|
||||
|
||||
Now, when you hover the cursor over the chip in the "Short text" column, the corresponding values from the "Info" column appear in the tooltip:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-tooltip-on-hover-v12.2.png" max-width="750px" alt="Info field value in the tooltip of the Short text cell upon hover" >}}
|
||||
|
||||
##### Example: Tooltip from field with value mappings
|
||||
|
||||
While the content of the tooltip is determined by the values of the source field and can't be directly edited, you can use field overrides on the source field to manipulate the display of that value.
|
||||
|
||||
For example, if the "Info" column is being used as the source field for the tooltip values, you could set up a value mapping.
|
||||
In this case, the value "up" is mapped to the word "Good":
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-tooltip-value-map-v12.2.png" max-width="750px" alt="Info field value up being mapped to the value Good in an override" >}}
|
||||
|
||||
Now, when you hover the cursor over the chip in the "Short text" cell, the mapped value appears in the tooltip:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-tooltip-on-hover-2-v12.2.png" max-width="750px" alt="Info field mapped to a new value in the tooltip of the Short text cell upon hover" >}}
|
||||
|
||||
You can use all field overrides to affect the display of the tooltip.
|
||||
For example, the **Table > Column width** or **Cell options > Cell type** overrides can change the cell width or visual display of the data.
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-3.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/text/ # /docs/grafana/next/features/panels/text/
|
||||
- ../../../panels-visualizations/visualizations/text/ # /docs/grafana/next/panels-visualizations/visualizations/text/
|
||||
- ../../../panels/visualizations/text-panel/ # /docs/grafana/next/panels/visualizations/text-panel/
|
||||
- ../../../reference/alertlist/ # /docs/grafana/next/reference/alertlist/
|
||||
- ../../../visualizations/text-panel/ # /docs/grafana/next/visualizations/text-panel/
|
||||
keywords:
|
||||
- grafana
|
||||
- text
|
||||
- documentation
|
||||
- panel
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's text visualization
|
||||
title: Text
|
||||
weight: 100
|
||||
refs:
|
||||
disable-sanitize-html:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/setup-grafana/configure-grafana/#disable_sanitize_html
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/setup-grafana/configure-grafana/#disable_sanitize_html
|
||||
variables:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/variables/variable-syntax/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/variables/variable-syntax/
|
||||
---
|
||||
|
||||
# Text
|
||||
|
||||
Text visualizations let you include text or HTML in your dashboards.
|
||||
This can be used to add contextual information and descriptions or embed complex HTML.
|
||||
|
||||
For example, if you want to display important links on your dashboard, you can use a text visualization to add these links:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-text-visualization-v11.6.png" max-width="750px" alt="A text panel showing important links" >}}
|
||||
|
||||
{{< docs/play title="Text Panel" url="https://play.grafana.org/d/adl33bxy1ih34b/" >}}
|
||||
|
||||
Use a text visualization when you need to:
|
||||
|
||||
- Add important links or useful annotations.
|
||||
- Provide instructions or guidance on how to interpret different panels, configure settings, or take specific actions based on the displayed data.
|
||||
- Announce any scheduled maintenance or downtime that might impact your dashboards.
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Text options
|
||||
|
||||
Use the following options to refine your text visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Mode | Determines how embedded content appears. Choose from:<ul><li>**Markdown** - Formats the content as [markdown](https://en.wikipedia.org/wiki/Markdown).</li><li>**HTML** - Renders the content as [sanitized](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/text/sanitize.ts) HTML. If you require more direct control over the output, you can set the [disable_sanitize_html](ref:disable-sanitize-html) flag which enables you to directly enter HTML.</li><li>**Code** - Renders content inside a read-only code editor. [Variables](ref:variables) in the content are expanded for display.</li></ul><p>To allow embedding of iframes and other websites, you need set `allow_embedding = true` in your Grafana `config.ini` or environment variables (depending on your employment).</p> |
|
||||
| Language | When you choose **Code** as your text mode, select an appropriate language to apply syntax highlighting to the embedded text. |
|
||||
| Show line numbers | Displays line numbers in the panel preview when you choose **Code** as your text mode. |
|
||||
| Show mini map | Displays a small outline of the embedded text in the panel preview when you choose **Code** as your text mode. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
+214
@@ -0,0 +1,214 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../../features/panels/histogram/ # /docs/grafana/next/features/panels/histogram/
|
||||
- ../../../panels/visualizations/time-series/ # /docs/grafana/next/panels/visualizations/time-series/
|
||||
- ../../../panels/visualizations/time-series/annotate-time-series/ # /docs/grafana/next/panels/visualizations/time-series/annotate-time-series/
|
||||
- ../../../panels/visualizations/time-series/change-axis-display/ # /docs/grafana/next/panels/visualizations/time-series/change-axis-display/
|
||||
- ../../../panels/visualizations/time-series/graph-color-scheme/ # /docs/grafana/next/panels/visualizations/time-series/graph-color-scheme/
|
||||
- ../../../panels/visualizations/time-series/graph-time-series-as-bars/ # /docs/grafana/next/panels/visualizations/time-series/graph-time-series-as-bars/
|
||||
- ../../../panels/visualizations/time-series/graph-time-series-as-lines/ # /docs/grafana/next/panels/visualizations/time-series/graph-time-series-as-lines/
|
||||
- ../../../panels/visualizations/time-series/graph-time-series-as-points/ # /docs/grafana/next/panels/visualizations/time-series/graph-time-series-as-points/
|
||||
- ../../../panels/visualizations/time-series/graph-time-series-stacking/ # /docs/grafana/next/panels/visualizations/time-series/graph-time-series-stacking/
|
||||
- ../../time-series/ # /docs/grafana/next/visualizations/time-series/
|
||||
- ../../time-series/annotate-time-series/ # /docs/grafana/next/visualizations/time-series/annotate-time-series/
|
||||
- ../../time-series/change-axis-display/ # /docs/grafana/next/visualizations/time-series/change-axis-display/
|
||||
- ../../time-series/graph-color-scheme/ # /docs/grafana/next/visualizations/time-series/graph-color-scheme/
|
||||
- ../../time-series/graph-time-series-as-bars/ # /docs/grafana/next/visualizations/time-series/graph-time-series-as-bars/
|
||||
- ../../time-series/graph-time-series-as-lines/ # /docs/grafana/next/visualizations/time-series/graph-time-series-as-lines/
|
||||
- ../../time-series/graph-time-series-as-points/ # /docs/grafana/next/visualizations/time-series/graph-time-series-as-points/
|
||||
- ../../time-series/graph-time-series-stacking/ # /docs/grafana/next/visualizations/time-series/graph-time-series-stacking/
|
||||
- ../../../panels-visualizations/visualizations/time-series/ # /docs/grafana/next/panels-visualizations/visualizations/time-series/
|
||||
keywords:
|
||||
- grafana
|
||||
- graph panel
|
||||
- time series panel
|
||||
- documentation
|
||||
- guide
|
||||
- graph
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's time series visualization
|
||||
title: Time series
|
||||
menuTitle: Time series
|
||||
weight: 10
|
||||
refs:
|
||||
link-alert:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/alerting/alerting-rules/create-grafana-managed-rule/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/alerting-and-irm/alerting/alerting-rules/create-grafana-managed-rule/
|
||||
panel-data-section:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/panel-editor-overview/#data-section
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/panel-editor-overview/#data-section
|
||||
---
|
||||
|
||||
# Time series
|
||||
|
||||
Time series visualizations are the default way to show the variations of a set of data values over time. Each data point is matched to a timestamp and this _time series_ is displayed as a graph. The visualization can render series as lines, points, or bars and it's versatile enough to display almost any type of [time-series data](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/fundamentals/timeseries/).
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-time-series-v12.0.png" max-width="750px" alt="Time series visualization" >}}
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
You can migrate from the legacy Graph visualization to the time series visualization. To migrate, open the panel and click the **Migrate** button in the side pane.
|
||||
{{< /admonition >}}
|
||||
|
||||
A time series visualization displays an x-y graph with time progression on the x-axis and the magnitude of the values on the y-axis. This visualization is ideal for displaying large numbers of timed data points that would be hard to track in a table or list.
|
||||
|
||||
You can use the time series visualization if you need track:
|
||||
|
||||
- Temperature variations throughout the day
|
||||
- The daily progress of your retirement account
|
||||
- The distance you jog each day over the course of a year
|
||||
|
||||
## Configure a time series visualization
|
||||
|
||||
The following video guides you through the creation steps and common customizations of time series visualizations, and is great for beginners:
|
||||
|
||||
{{< youtube id="RKtW87cPxsw" >}}
|
||||
|
||||
{{< docs/play title="Time Series Visualizations in Grafana" url="https://play.grafana.org/d/000000016/" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
Time series visualizations require time-series data—a sequence of measurements, ordered in time, and formatted as a table—where every row in the table represents one individual measurement at a specific time. Learn more about [time-series data](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/fundamentals/timeseries/).
|
||||
|
||||
The dataset must contain at least one numeric field, and in the case of multiple numeric fields, each one is plotted as a new line, point, or bar labeled with the field name in the tooltip.
|
||||
|
||||
### Example 1
|
||||
|
||||
In the following example, there are three numeric fields represented by three lines in the chart:
|
||||
|
||||
| Time | value1 | value2 | value3 |
|
||||
| ------------------- | ------ | ------ | ------ |
|
||||
| 2022-11-01 10:00:00 | 1 | 2 | 3 |
|
||||
| 2022-11-01 11:00:00 | 4 | 5 | 6 |
|
||||
| 2022-11-01 12:00:00 | 7 | 8 | 9 |
|
||||
| 2022-11-01 13:00:00 | 4 | 5 | 6 |
|
||||
|
||||
|
||||
|
||||
If the time field isn't automatically detected, you might need to convert the data to a time format using a [data transformation](ref:panel-data-section).
|
||||
|
||||
### Example 2
|
||||
|
||||
The time series visualization also supports multiple datasets. If all datasets are in the correct format, the visualization plots the numeric fields of all datasets and labels them using the column name of the field.
|
||||
|
||||
#### Query1
|
||||
|
||||
| Time | value1 | value2 | value3 |
|
||||
| ------------------- | ------ | ------ | ------ |
|
||||
| 2022-11-01 10:00:00 | 1 | 2 | 3 |
|
||||
| 2022-11-01 11:00:00 | 4 | 5 | 6 |
|
||||
| 2022-11-01 12:00:00 | 7 | 8 | 9 |
|
||||
|
||||
#### Query2
|
||||
|
||||
| timestamp | number1 | number2 | number3 |
|
||||
| ------------------- | ------- | ------- | ------- |
|
||||
| 2022-11-01 10:30:00 | 11 | 12 | 13 |
|
||||
| 2022-11-01 11:30:00 | 14 | 15 | 16 |
|
||||
| 2022-11-01 12:30:00 | 17 | 18 | 19 |
|
||||
| 2022-11-01 13:30:00 | 14 | 15 | 16 |
|
||||
|
||||
|
||||
|
||||
### Example 3
|
||||
|
||||
If you want to more easily compare events between different, but overlapping, time frames, you can do this by using a time offset while querying the compared dataset:
|
||||
|
||||
#### Query1
|
||||
|
||||
| Time | value1 | value2 | value3 |
|
||||
| ------------------- | ------ | ------ | ------ |
|
||||
| 2022-11-01 10:00:00 | 1 | 2 | 3 |
|
||||
| 2022-11-01 11:00:00 | 4 | 5 | 6 |
|
||||
| 2022-11-01 12:00:00 | 7 | 8 | 9 |
|
||||
|
||||
#### Query2
|
||||
|
||||
| timestamp(-30min) | number1 | number2 | number3 |
|
||||
| ------------------- | ------- | ------- | ------- |
|
||||
| 2022-11-01 10:30:00 | 11 | 12 | 13 |
|
||||
| 2022-11-01 11:30:00 | 14 | 15 | 16 |
|
||||
| 2022-11-01 12:30:00 | 17 | 18 | 19 |
|
||||
| 2022-11-01 13:30:00 | 14 | 15 | 16 |
|
||||
|
||||
|
||||
|
||||
When you add the offset, the resulting visualization makes the datasets appear to be occurring at the same time so that you can compare them more easily.
|
||||
|
||||
## Alert rules
|
||||
|
||||
You can [link alert rules](ref:link-alert) to time series visualizations in the form of annotations to observe when alerts fire and are resolved. In addition, you can create alert rules from the **Alert** tab within the [panel editor](ref:panel-data-section).
|
||||
|
||||
## Special overrides
|
||||
|
||||
The following overrides help you further refine a time series visualization.
|
||||
|
||||
### Transform override property
|
||||
|
||||
Use the **Graph styles > Transform** [override property](#field-overrides) to transform series values without affecting the values shown in the tooltip, context menu, or legend. Choose from the following transform options:
|
||||
|
||||
- **Constant** - Show the first value as a constant line.
|
||||
- **Negative Y transform** - Flip the results to negative values on the y-axis.
|
||||
|
||||
### Fill below to override property
|
||||
|
||||
The **Graph styles > Fill below to** [override property](#field-overrides) fills the area between two series. When you configure the property, select the series for which you want the fill to stop.
|
||||
|
||||
The following example shows three series: Min, Max, and Value. The Min and Max series have **Line width** set to 0. Max has a **Fill below to** override set to Min, which fills the area between Max and Min with the Max line color.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-fill-below-to-v12.0.png" max-width="600px" alt="Fill below to example" >}}
|
||||
|
||||
{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+2" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Tooltip options
|
||||
|
||||
{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1">}}
|
||||
|
||||
### Legend options
|
||||
|
||||
{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Axis options
|
||||
|
||||
{{< docs/shared lookup="visualizations/axis-options-1.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Graph styles options
|
||||
|
||||
The options under the **Graph styles** section let you control the general appearance of the graph, excluding [color](#standard-options).
|
||||
|
||||
{{< docs/shared lookup="visualizations/graph-styles-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,197 @@
|
||||
---
|
||||
aliases:
|
||||
- ../../traces/ # /docs/grafana/next/visualizations/traces/
|
||||
- ../../../panels-visualizations/visualizations/traces/ # /docs/grafana/next/panels-visualizations/visualizations/traces/
|
||||
keywords:
|
||||
- grafana
|
||||
- dashboard
|
||||
- documentation
|
||||
- panels
|
||||
- traces
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's traces visualization
|
||||
title: Traces
|
||||
weight: 100
|
||||
refs:
|
||||
variables-documentation:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/variables/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/variables/
|
||||
generative-ai-features:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
||||
tracing-in-explore:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/explore/trace-integration/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/explore/trace-integration/
|
||||
panel-editor-documentation:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/panel-editor-overview/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/panel-editor-overview/
|
||||
tempo-data-source:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/tempo/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/connect-externally-hosted/data-sources/tempo/
|
||||
configure-panel-options-documentation:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-panel-options/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-panel-options/
|
||||
---
|
||||
|
||||
# Traces
|
||||
|
||||
{{< shared id="traces-viz" >}}
|
||||
|
||||
Traces visualizations let you follow a request as it traverses the services in your infrastructure.
|
||||
The traces visualization displays traces data in a diagram that allows you to easily interpret it. Traces visualizations currently render one trace traversal based on the traceID used in TraceQL or using a variable.
|
||||
|
||||
{{< /shared >}}
|
||||
|
||||
For more information about traces and how to use them, refer to the following documentation:
|
||||
|
||||
- [Tracing in Explore](ref:tracing-in-explore)
|
||||
- [Tempo data source](ref:tempo-data-source)
|
||||
- [Getting started with Tempo](/docs/tempo/latest/getting-started)
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-traces-visualization-11.5.png" max-width= "700px" alt="Screenshot of the trace view" >}}
|
||||
|
||||
{{< docs/play title="Traces Panel" url="https://play.grafana.org/d/edodkfmj0tce8f/" >}}
|
||||
|
||||
## Add a panel with tracing visualizations
|
||||
|
||||
Once you have tracing data available in your Grafana stack, you can add tracing panels to your Grafana dashboards.
|
||||
|
||||
Using a dashboard variable, `traceID`, lets you create a query to show specific traces for a given trace ID.
|
||||
For more information about dashboard variables, refer to the [Variables documentation](ref:variables-documentation).
|
||||
|
||||
### Before you begin
|
||||
|
||||
To use this procedure, you need:
|
||||
|
||||
- A Grafana instance
|
||||
- A [Tempo data source](ref:tempo-data-source) connected to your Grafana instance
|
||||
|
||||
### Steps {#add-the-traces-panel-query}
|
||||
|
||||
To view and analyze traces data in a dashboard, you need to add the traces visualization to your dashboard and define a query using the panel editor.
|
||||
The query determines the data that is displayed in the visualization.
|
||||
For more information on the panel editor, refer to the [Panel editor documentation](ref:panel-editor-documentation).
|
||||
|
||||
This procedure uses dashboard variables and templates to allow you to enter trace IDs which can then be visualized. You'll use a variable called `traceId` and add it as a template query.
|
||||
|
||||
1. From your Grafana stack, create a new dashboard or go to an existing dashboard where you'd like to add traces visualizations.
|
||||
1. Do one of the following:
|
||||
- New dashboard - Click **+ Add visualization**.
|
||||
- Existing dashboard - Click **Edit** in the top-right corner and then select **Visualization** in the **Add** drop-down.
|
||||
|
||||
1. Search for and select the appropriate tracing data source.
|
||||
1. In the top-right corner of the panel editor, select the **Visualizations** tab, search for, and select **Traces**.
|
||||
1. Under the **Panel options**, enter a **Title** for your trace panel or have Grafana create one using [generative AI features](ref:generative-ai-features).
|
||||
|
||||
For more information on the panel editor, refer to the [Configure panel options documentation](ref:configure-panel-options-documentation).
|
||||
|
||||
1. In the query editor, click the **TraceQL** query type tab.
|
||||
1. Enter `${traceId}` in the TraceQL query field to create a dashboard variable. This variable is used as the template query.
|
||||
|
||||
{{< figure src="/static/img/docs/panels/traces/screenshot-traces-template-query.png" alt="Add a template query" >}}
|
||||
|
||||
1. Click **Back to dashboard**.
|
||||
1. Click **Settings** and go to the **Variables** tab.
|
||||
1. Add a new variable called `traceId`, of variable type **Custom**, giving it a label if required.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-traces-custom-variable-v11.5.png" max-width="400px" alt="Add a template query" >}}
|
||||
|
||||
1. Click **Save dashboard**.
|
||||
1. Click **Back to dashboard** and **Exit edit**.
|
||||
1. Verify that the panel works by using a valid trace ID for the data source used for the trace panel and editing the ID in the dashboard variable.
|
||||
|
||||
{{< figure src="/static/img/docs/panels/traces/screenshot-traces-traceid-panel.png" alt="Results of query in trace panel" >}}
|
||||
|
||||
## Add TraceQL with table visualizations
|
||||
|
||||
While you can add a trace visualization to a dashboard, having to manually add trace IDs as a dashboard variable is cumbersome.
|
||||
It’s more useful to instead be able to use TraceQL queries to search for specific types of traces and then select appropriate traces from matching results.
|
||||
|
||||
1. In the same dashboard where you added the trace visualization, click **Edit** in the top-right corner.
|
||||
1. In the **Add** drop-down, select **Visualization**.
|
||||
1. Select the same trace data source you used in the previous section.
|
||||
1. In the top-right corner of the panel editor, select the **Visualizations** tab, search for, and select **Table**.
|
||||
1. In the query editor, select the **TraceQL** tab.
|
||||
1. Under the **Panel options**, enter a **Title** for your trace panel or have Grafana create one using [generative AI features](ref:generative-ai-features).
|
||||
1. Add an appropriate TraceQL query to search for traces that you would like to visualize in the dashboard. This example uses a simple, static query. You can write the TraceQL query as a template query to take advantage of other dashboard variables, if they exist. This lets you create dynamic queries based on these variables.
|
||||
|
||||
{{< figure src="/static/img/docs/panels/traces/screenshot-traces-dynamic-query.png" alt="Create a dynamic query" >}}
|
||||
|
||||
1. Click **Save dashboard**.
|
||||
1. Click **Back to dashboard** and **Exit edit**.
|
||||
|
||||
When results are returned from a query, the results are rendered in the panel’s table.
|
||||
|
||||
{{< figure src="/static/img/docs/panels/traces/screenshot-traces-returned-query.png" alt="Results of a returned query in the panel table" >}}
|
||||
|
||||
### Use a variable to add other links to traces
|
||||
|
||||
The results in the traces visualization include links to the **Explore** page that renders the trace. You can add other links to traces in the table that fill in the `traceId` dashboard variable when selected, so that the trace is visualized in the same dashboard.
|
||||
|
||||
To create a set of data links in the panel, use the following steps:
|
||||
|
||||
1. In the panel editor menu, under **Data links**, click **Add link**.
|
||||
1. Add a **Title** for the data link.
|
||||
1. Find the UUID of the dashboard by looking in your browser’s address bar when the full dashboard is being rendered. Because this is a link to a dashboard in the same Grafana stack, only the path of the dashboard is required.
|
||||
|
||||
{{< figure src="/static/img/docs/panels/traces/screensnot-traces-uuid-url.png" alt="Unique identifier for the dashboard" >}}
|
||||
|
||||
1. In the **URL** field, make a self-reference to the dashboard that contains both of the panels. This self-reference uses the value of the selected trace in the table to fill in the dashboard variable. Use the path for the dashboard from the previous step and then fill in the value of `traceId` using the selected results from the TraceQL table.
|
||||
The trace ID is exposed using the `traceID` data field in the returned results, so use that as the value for the dashboard variable.
|
||||
|
||||
{{< figure src="/static/img/docs/panels/traces/screenshot-traces-edit-link.png" alt="Edit link and add the Trace link" >}}
|
||||
|
||||
1. Select **Save** to save the data link.
|
||||
1. Click **Save dashboard**.
|
||||
1. Click **Back to dashboard** and **Exit edit**.
|
||||
|
||||
You should now see a list of matching traces in the table visualization. While selecting the **TraceID** or **SpanID** fields will give you the option to either open the **Explore** page to visualize the trace or following the data link, selecting any other field (such as **Start time**, **Name** or **Duration**) automatically follows the data link, filling in the `traceId` dashboard variable, and then shows the relevant trace in the trace panel.
|
||||
|
||||
{{< figure src="/static/img/docs/panels/traces/screenshot-traces-trace-link.png" alt="Selecting the trace link" >}}
|
||||
|
||||
{{< figure src="/static/img/docs/panels/traces/screenshot-traces-trace-link-follow.png" caption="Follow the trace link populates the trace ID and displays the traces view" >}}
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Span filters options
|
||||
|
||||
The **Span filters** options control the initial state of the span filters when the visualization loads, allowing you to customize your trace analysis view.
|
||||
|
||||
The following options support variable interpolation, where you can set the service name to a variable `$var` and the visualization will replace it with the value for the variable named `$var` in the span filters: **Service name**, **Span name**, **Min duration**, **Max duration**, and **Tags**.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Find in trace | Set the initial value to focus on spans relevant to your query. |
|
||||
| Show matches only | Toggle the switch on to display only spans that match the defined filter criteria. This helps simplify trace interpretation. |
|
||||
| Show critical path only | Toggle the switch on to highlight only the spans in the critical path, which helps identify performance bottlenecks and their impact on overall latency. |
|
||||
| Service name | Along with the **Service name operator**, define a specific service or pattern to narrow analysis to spans related to particular services. |
|
||||
| Span name | Along with the **Span name operator**, filter spans by name or pattern to focus on specific span types or processes. |
|
||||
| Min duration | Set the minimum duration threshold to exclude spans outside the desired time range. |
|
||||
| Max duration | Set the maximum duration threshold to exclude spans outside the desired time range. |
|
||||
| Tags | Add one or more tags to further refine the filtering criteria so only relevant spans are displayed. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
keywords:
|
||||
- grafana
|
||||
- graph panel
|
||||
- trend panel
|
||||
- documentation
|
||||
- guide
|
||||
- graph
|
||||
- line chart
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's trend visualization
|
||||
title: Trend
|
||||
weight: 100
|
||||
refs:
|
||||
time-series-visualization:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/time-series/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series/
|
||||
aliases:
|
||||
- ../../../panels-visualizations/visualizations/trend/ # /docs/grafana/next/panels-visualizations/visualizations/trend/
|
||||
---
|
||||
|
||||
# Trend
|
||||
|
||||
Trend visualizations should be used for datasets that have a sequential, numeric x-field that is not time. Some examples are function graphs, rpm/torque curves, supply/demand relationships, and elevation or heart rate plots along a race course (with x as distance or duration from start).
|
||||
|
||||
For example, you could represent engine power and torque versus speed where speed is plotted on the x-axis and power and torque are plotted on the y-axes:
|
||||
|
||||
{{< figure src="/media/docs/grafana/screenshot-trend-visualization-v12.0.png" max-width="750px" alt="Trend engine power and torque curves" >}}
|
||||
|
||||
Trend visualizations support all visual styles and options available in the [time series visualization](ref:time-series-visualization) with these exceptions:
|
||||
|
||||
- No annotations or time regions
|
||||
- No shared cursor/crosshair
|
||||
- No multi-timezone x-axis
|
||||
- No ability to change the dashboard time range using drag-selection
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### X axis options
|
||||
|
||||
In the **X field** option, select a field that contains increasing numeric values.
|
||||
|
||||
### Tooltip options
|
||||
|
||||
{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Legend options
|
||||
|
||||
{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Graph styles options
|
||||
|
||||
The options under the **Graph styles** section let you control the general appearance of the graph, excluding [color](#standard-options).
|
||||
|
||||
{{< docs/shared lookup="visualizations/graph-styles-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Axis options
|
||||
|
||||
{{< docs/shared lookup="visualizations/axis-options-2.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
@@ -0,0 +1,217 @@
|
||||
---
|
||||
canonical: https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/xy-chart/
|
||||
keywords:
|
||||
- grafana
|
||||
- chart
|
||||
- xy chart
|
||||
- documentation
|
||||
- guide
|
||||
- graph
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
description: Configure options for Grafana's xy chart
|
||||
title: XY chart
|
||||
weight: 100
|
||||
refs:
|
||||
configure-standard-options:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/#max
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/#max
|
||||
color-scheme:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/#color-scheme
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/#color-scheme
|
||||
configure-field-overrides:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/
|
||||
aliases:
|
||||
- ../../../panels-visualizations/visualizations/xy-chart/ # /docs/grafana/next/panels-visualizations/visualizations/xy-chart/
|
||||
---
|
||||
|
||||
# XY chart
|
||||
|
||||
XY charts provide a way to visualize arbitrary x and y values in a graph so that you can easily show the relationship between two variables. XY charts are typically used to create scatter plots. You can also use them to create bubble charts where field values determine the size of each bubble:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-xy-charts-v11.6.png" max-width="750px" alt="An xy chart showing height weight distribution" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
You can use any type of tabular data with at least two numeric fields in an xy chart. The x field can be a time field. This type of visualization doesn't require time data, but it can be used.
|
||||
|
||||
## Configuration options
|
||||
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### XY Chart options
|
||||
|
||||
The following options let you control how data is displayed in an xy chart:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| [Series mapping](#series-mapping) | Set how series data is mapped in the chart. Choose from: **Auto** and **Manual**. Depending on your series mapping selection, the **Frame**, **X-field**, and **Y-field** options differ. For information on setting these specific fields, refer to the [Series mapping section](#series-mapping). |
|
||||
| Size field | Set which field's values control the size of the points in the chart. This value is relative to the min and max of all the values in the data frame. When you select this option, you can then set the **Min point size** and **Max point size** options. Required in **Manual** mode. |
|
||||
| Color field | Set which field's values control the color of the points in the chart. To use the color value options under the **Standard** options, you must set this field. Typically, this field is used when you only have one series displayed in the chart. Required in **Manual** mode. |
|
||||
| [Show](#show) | Set how values are represented in the visualization. Choose from: **Points**, **Lines**, or **Both**. |
|
||||
| Point size | Set the size of all points in the chart, from one to one hundred pixels in diameter. The default size is five pixels. You can set an [override](ref:configure-field-overrides) to set the pixel size by series (y-field). |
|
||||
| Min/Max point size | Use these options to control the minimum or maximum point size when you've set the **Size field** option. You can [override](ref:configure-field-overrides) these options for specific series. |
|
||||
| Point shape | Set the shape of the points in the chart. Choose from:<ul><li>**Circle** - The default setting</li><li>**Square** </li></ul> |
|
||||
| Point stroke width | The width of the point stroke in pixels. The default is one pixel. |
|
||||
| Fill opacity | The opacity of the point fill. The default is 50. |
|
||||
| [Line style](#line-style) | Set the style of the lines that connect points. Choose from: **Solid**, **Dash**, or **Dots**. |
|
||||
| Line width | The width of the lines that connect points, in pixels. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Series mapping
|
||||
|
||||
Set how series data is mapped in the chart. Choose from:
|
||||
|
||||
- **Auto** - Automatically generates series from all available data frames (or datasets). You can filter to select only one frame.
|
||||
- **Manual** - Explicitly define the series by selecting from available data frames.
|
||||
|
||||
Depending on your series mapping selection, the **Frame**, **X-field**, and **Y-field** options differ.
|
||||
These options are described in the tabs that follow:
|
||||
|
||||
{{< tabs >}}
|
||||
{{< tab-content name="Auto series mapping options" >}}
|
||||
|
||||
When you select **Auto** as your series mapping mode, the following options are preconfigured, but you can also define them yourself:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Frame | By default, an xy chart displays all data frames. You can filter to select only one frame. |
|
||||
| [X field](#x-field) | Select which field or fields x represents. By default, this is the first number or time field in each data frame. For an example of this in **Auto** mode, refer to the [X field section](#x-field). |
|
||||
| [Y field](#y-field) | After the x-field is set, by default, all the remaining number fields in the data frame are designated as the y-fields. You can use this option to explicitly choose which fields to use for y. For more information on how to use this in **Auto** mode, refer to the [Y field section](#y-field). |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
{{< /tab-content >}}
|
||||
{{< tab-content name="Manual series mapping options" >}}
|
||||
|
||||
When you select **Manual** as your series mode, you can add, edit, and delete series.
|
||||
To manage a series, click the **Series** field; to rename the series, click the series name.
|
||||
|
||||
In **Manual** mode, these fields are required:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Frame | Select your data frame or dataset. You can add as many frames as you want. |
|
||||
| X field | Select which field x represents. |
|
||||
| Y field | Select which field y represents. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
{{< /tab-content >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
#### X field
|
||||
|
||||
In **Auto** series mapping mode, select which field or fields x represents. By default, this is the first number or time field in each data frame. For example, you enter the following CSV content:
|
||||
|
||||
| a | b | c |
|
||||
| --- | --- | --- |
|
||||
| 0 | 0 | 0 |
|
||||
| 1 | 1 | 9 |
|
||||
| 2 | 2 | 4 |
|
||||
|
||||
In the resulting chart, the x-field is generated from the values in column "a" unless you define it differently.
|
||||
|
||||
#### Y field
|
||||
|
||||
In **Auto** series mapping mode, after the x-field is set, by default, all the remaining number fields in the data frame are designated as the y-fields.
|
||||
You can use this option to explicitly choose which fields to use for y.
|
||||
|
||||
The series of the chart are generated from the y-fields.
|
||||
To make changes to a series in an xy chart, make [overrides](ref:configure-field-overrides) to the y-field.
|
||||
|
||||
{{< admonition type=note >}}
|
||||
Any field you use in the **Size field** or **Color field** doesn't generate a series.
|
||||
{{< /admonition >}}
|
||||
|
||||
You can also use [overrides](ref:configure-field-overrides) to exclude y-fields individually.
|
||||
To do so, add an override with the following properties for each y-field you want removed:
|
||||
|
||||
- Override type: **Fields with name**
|
||||
- Override property: **Series > Hide in area**
|
||||
- Area: **Viz**
|
||||
|
||||
#### Show
|
||||
|
||||
Set how values are represented in the visualization. Choose from:
|
||||
|
||||
- **Points** - Display values as points. When you select this option, the **Point size** option is also displayed.
|
||||
- **Lines** - Add a line between values. When you select this option, the [Line style](#line-style) and **Line width** options are also displayed.
|
||||
- **Both** - Display both points and lines.
|
||||
|
||||
#### Line style
|
||||
|
||||
Set the style of the lines that connect points. To change the color, use the standard [Color scheme](ref:color-scheme) field option.
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-line-style-options-v11.6.png" max-width="400px" alt="Line style options" >}}
|
||||
|
||||
- **Solid** - Display a solid line. This is the default setting.
|
||||
- **Dash** - Display a dashed line. When you choose this option, a drop-down list is displayed where you can select the length and gap setting for the line dashes. By default, the length and gap are set to `10, 10`.
|
||||
- **Dots** - Display dotted lines. When you choose this option, a drop-down list is displayed where you can select dot spacing. By default, the dot spacing is set to `0, 10` (the first number represents dot length, which is always zero).
|
||||
|
||||
### Tooltip options
|
||||
|
||||
Tooltip options control the information overlay that appears when you hover over data points in the visualization.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------------ | ----------- |
|
||||
| Tooltip mode | When you hover your cursor over the visualization, Grafana can display tooltips. Choose how they behave:<ul><li>**Single** - The hover tooltip shows only a single series, the one that you are hovering over on the visualization.</li><li>**Hidden** - Do not display the tooltip when you interact with the visualization.</li></ul> |
|
||||
| Max width | Set the maximum width of the tooltip box. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Legend options
|
||||
|
||||
{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Axis options
|
||||
|
||||
{{< docs/shared lookup="visualizations/axis-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Standard options
|
||||
|
||||
**Standard options** in the panel editor pane let you change how field data is displayed in your visualizations. When you set a standard option, the change is applied to all fields or series. For more granular control over the display of fields, refer to [Configure field overrides](ref:configure-field-overrides).
|
||||
|
||||
You can customize the following standard options:
|
||||
|
||||
- **Field min/max** - Enable **Field min/max** to have Grafana calculate the min or max of each field individually, based on the minimum or maximum value of the field.
|
||||
- **Color scheme** - Set single or multiple colors for your entire visualization. To learn more about color schemes, refer to [Configure standard options](ref:configure-standard-options).
|
||||
|
||||
### Data links and actions
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
Reference in New Issue
Block a user