Prepare dashboards, panels, and visualizations for Grafana Cloud mount (#73632)

* Update dashboards pages to use `docs/reference` shortcode

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Update panels-visualizations pages to use `docs/reference` shortcode

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Use raw Markdown admonitions for contextual links

See https://discourse.gohugo.io/t/markdown-reference-links-in-shortcodes/5770/3.
Should be resolved by https://docs.google.com/document/d/19xd4CD3IrAqQqNR3xQeLfuIV-u2iNSQSBEvPZE9J4qU/edit#heading=h.5sybau7waq2q.

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Prefer "Warning" over "Caution"

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

* Prettier

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Fix some links missing destinations

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Fix 'time range controls' link

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Add missing 'HTTP APIs' link

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Fix dashboard links missing destinations

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Fix links missing destinations in panels and visualizations documentation

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Fix dud link

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

---------

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>
Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>
This commit is contained in:
Jack Baldry
2023-09-13 11:39:04 +02:00
committed by GitHub
co-authored by Isabel
parent 00c6b87210
commit 7ef7cedc11
50 changed files with 963 additions and 320 deletions
@@ -24,28 +24,28 @@ If you are unsure which visualization to pick, Grafana can provide visualization
{{% /admonition %}}
- Graphs & charts
- [Time series]({{< relref "time-series/" >}}) is the default and main Graph visualization.
- [State timeline]({{< relref "state-timeline/" >}}) for state changes over time.
- [Status history]({{< relref "status-history/" >}}) for periodic state over time.
- [Bar chart]({{< relref "bar-chart/" >}}) shows any categorical data.
- [Histogram]({{< relref "histogram/" >}}) calculates and shows value distribution in a bar chart.
- [Heatmap]({{< relref "heatmap/" >}}) visualizes data in two dimensions, used typically for the magnitude of a phenomenon.
- [Pie chart]({{< relref "pie-chart/" >}}) is typically used where proportionality is important.
- [Candlestick]({{< relref "candlestick/" >}}) is typically for financial data where the focus is price/data movement.
- [Time series][] is the default and main Graph visualization.
- [State timeline][] for state changes over time.
- [Status history][] for periodic state over time.
- [Bar chart][] shows any categorical data.
- [Histogram][] calculates and shows value distribution in a bar chart.
- [Heatmap][] visualizes data in two dimensions, used typically for the magnitude of a phenomenon.
- [Pie chart][] is typically used where proportionality is important.
- [Candlestick][] is typically for financial data where the focus is price/data movement.
- Stats & numbers
- [Stat]({{< relref "stat/" >}}) for big stats and optional sparkline.
- [Bar gauge]({{< relref "bar-gauge/" >}}) is a horizontal or vertical bar gauge.
- [Stat][] for big stats and optional sparkline.
- [Bar gauge][] is a horizontal or vertical bar gauge.
- Misc
- [Table]({{< relref "table/" >}}) is the main and only table visualization.
- [Logs]({{< relref "logs/" >}}) is the main visualization for logs.
- [Node Graph]({{< relref "node-graph/" >}}) for directed graphs or networks.
- [Traces]({{< relref "traces/" >}}) is the main visualization for traces.
- [Flame Graph]({{< relref "flame-graph/" >}}) is the main visualization for profiling.
- [Table][] is the main and only table visualization.
- [Logs][] is the main visualization for logs.
- [Node Graph][] for directed graphs or networks.
- [Traces][] is the main visualization for traces.
- [Flame Graph][] is the main visualization for profiling.
- Widgets
- [Dashboard list]({{< relref "dashboard-list/" >}}) can list dashboards.
- [Alert list]({{< relref "alert-list/" >}}) can list alerts.
- [Text panel]({{< relref "text/" >}}) can show markdown and html.
- [News panel]({{< relref "news/" >}}) can show RSS feeds.
- [Dashboard list][] can list dashboards.
- [Alert list][] can list alerts.
- [Text panel][] can show markdown and html.
- [News panel][] can show RSS feeds.
## Get more
@@ -57,45 +57,45 @@ Below you can find some good examples for how all the visualizations in Grafana
### Graphs
For time based line, area and bar charts we recommend the default [Time series]({{< relref "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.
For time based line, area and bar charts we recommend the default [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 the [Bar chart]({{< relref "bar-chart/" >}}) visualization.
For categorical data use the [Bar chart][] visualization.
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="700px" caption="Bar chart" >}}
### Big numbers & stats
The [Stat]({{< relref "stat/" >}}) visualization shows one large stat value with an optional graph sparkline. You can control the background or value color using thresholds or color scales.
The [Stat][] visualization 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 panel" >}}
### 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]({{< relref "gauge/" >}}) shown below.
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][] shown below.
{{< figure src="/static/img/docs/v66/gauge_panel_cover.png" max-width="700px" >}}
Secondly Grafana also has a horizontal or vertical [Bar gauge]({{< relref "bar-gauge/" >}}) with three different distinct display modes.
Secondly Grafana also has a horizontal or vertical [Bar gauge][] with three different distinct display modes.
{{< figure src="/static/img/docs/v66/bar_gauge_lcd.png" max-width="700px" >}}
### Table
To show data in a table layout, use the [Table]({{< relref "table/" >}}) visualization.
To show data in a table layout, use the [Table][] visualization.
{{< figure src="/static/img/docs/tables/table_visualization.png" max-width="700px" lightbox="true" caption="Table visualization" >}}
### Pie chart
Grafana now ships with an included [Pie chart]({{< relref "pie-chart/" >}}) visualization.
Grafana now ships with an included [Pie chart][] visualization.
{{< figure src="/static/img/docs/pie-chart-panel/pie-chart-example.png" max-width="700px" lightbox="true" caption="Pie chart visualization" >}}
### Heatmaps
To show value distribution over, time use the [heatmap]({{< relref "heatmap/" >}}) visualization.
To show value distribution over, time use the [heatmap][] visualization.
{{< figure src="/static/img/docs/v43/heatmap_panel_cover.jpg" max-width="1000px" lightbox="true" caption="Heatmap" >}}
@@ -104,3 +104,68 @@ To show value distribution over, time use the [heatmap]({{< relref "heatmap/" >}
The state timeline panel visualization 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" >}}
{{% docs/reference %}}
[News panel]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/news"
[News panel]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/news"
[Histogram]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/histogram"
[Histogram]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/histogram"
[Text panel]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/text"
[Text panel]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/text"
[Dashboard list]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/dashboard-list"
[Dashboard list]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/dashboard-list"
[Flame Graph]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/flame-graph"
[Flame Graph]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/flame-graph"
[Status history]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/status-history"
[Status history]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/status-history"
[Candlestick]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/candlestick"
[Candlestick]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/candlestick"
[Radial Gauge]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/gauge"
[Radial Gauge]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/gauge"
[Alert list]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/alert-list"
[Alert list]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/alert-list"
[Pie chart]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/pie-chart"
[Pie chart]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/pie-chart"
[Bar gauge]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/bar-gauge"
[Bar gauge]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/bar-gauge"
[Bar chart]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/bar-chart"
[Bar chart]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/bar-chart"
[Node Graph]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/node-graph"
[Node Graph]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/node-graph"
[State timeline]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/state-timeline"
[State timeline]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/state-timeline"
[heatmap]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/heatmap"
[heatmap]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/heatmap"
[Traces]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/traces"
[Traces]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/traces"
[Logs]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/logs"
[Logs]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/logs"
[Heatmap]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/heatmap"
[Heatmap]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/heatmap"
[Stat]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/stat"
[Stat]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/stat"
[Table]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/table"
[Table]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/table"
[Time series]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
[Time series]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
{{% /docs/reference %}}
@@ -21,7 +21,7 @@ weight: 100
# Alert list
Use Alert list to display your alerts. You can configure the list to show the current state. You can read more about alerts in [Grafana Alerting overview]({{< relref "../../../alerting/" >}}).
Use Alert list to display your alerts. You can configure the list to show the current state. You can read more about alerts in [Grafana Alerting overview][].
{{< figure src="/static/img/docs/alert-list-panel/alert-list-panel.png" max-width="850px" >}}
@@ -64,3 +64,8 @@ Choose which alert states to display in this panel.
- No Data
- Normal
- Error
{{% docs/reference %}}
[Grafana Alerting overview]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/alerting"
[Grafana Alerting overview]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/alerting"
{{% /docs/reference %}}
@@ -133,7 +133,7 @@ Gradient color is generated based on the hue of the line color.
### Legend calculations
Choose which of the [standard calculations]({{< relref "../../calculation-types/" >}}) to show in the legend. You can have more than one.
Choose which of the [standard calculations][] to show in the legend. You can have more than one.
For more information about the legend, refer to [Configure a legend](../configure-legend/).
@@ -167,7 +167,7 @@ Display all Y-axes on the right side.
Hide all axes.
To selectively hide axes, [Add a field override]({{< relref "../../configure-overrides#add-a-field-override" >}}) that targets specific fields.
To selectively hide axes, [Add a field override][] that targets specific fields.
### Label
@@ -187,4 +187,15 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B
**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]({{< relref "../../configure-standard-options/#max" >}}).
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard options definitions][].
{{% docs/reference %}}
[Add a field override]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-overrides#add-a-field-override"
[Add a field override]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-overrides#add-a-field-override"
[standard calculations]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
[standard calculations]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
[Standard options definitions]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#max"
[Standard options definitions]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#max"
{{% /docs/reference %}}
@@ -37,7 +37,7 @@ Choose how Grafana displays your data.
Show a calculated value based on all rows.
- **Calculation -** 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]({{< relref "../../calculation-types/" >}}).
- **Calculation -** 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][].
- **Fields -** Select the fields display in the panel.
#### All values
@@ -82,3 +82,8 @@ Automatically show x-axis scrollbar when there is a large amount of data.
Limit the minimum height of the bar row in the horizontal direction.
Automatically show y-axis scrollbar when there is a large amount of data.
{{% docs/reference %}}
[Calculation types]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
[Calculation types]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
{{% /docs/reference %}}
@@ -25,7 +25,7 @@ The Candlestick panel allows you to visualize data that includes a number of con
{{< figure src="/static/img/docs/candlestick-panel/candlestick-panel-8-3.png" max-width="1200px" caption="Candlestick panel" >}}
The Candlestick panel builds upon the foundation of the [time series]({{< relref "time-series/" >}}) panel and includes many common configuration settings.
The Candlestick panel builds upon the foundation of the [time series][] panel and includes many common configuration settings.
## Mode
@@ -65,4 +65,9 @@ These values are hidden from the legend.
## Additional fields
The candlestick panel is based on the time series panel. It can visualization additional data dimensions beyond open, high, low, close, and volume The **Include** and **Ignore** options allow the panel 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]({{< relref "time-series/" >}}) panel.
The candlestick panel is based on the time series panel. It can visualization additional data dimensions beyond open, high, low, close, and volume The **Include** and **Ignore** options allow the panel 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][] panel.
{{% docs/reference %}}
[time series]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
[time series]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
{{% /docs/reference %}}
@@ -32,7 +32,7 @@ On each dashboard load, this panel queries the dashboard list, always providing
Use these options to refine your visualization.
- **Include current time range -** Select this option to propagate the time range of the current dashboard to the dashboard links. When the user clicks a link, the linked dashboard opens with the indicated time range already set.
- **Include current template variable values -** Select this option to include template variables currently used as query parameters in a link. When the user clicks the link, any matching templates in the linked dashboard are set to the values from the link. Learn more about [Dashboard URL variables]({{< relref "../../../dashboards/build-dashboards/create-dashboard-url-variables/" >}}).
- **Include current template variable values -** Select this option to include template variables currently used as query parameters in a link. When the user clicks the link, any matching templates in the linked dashboard are set to the values from the link. Learn more about [Dashboard URL variables][].
- **Starred -** Display starred dashboards in alphabetical order.
- **Recently viewed -** Display recently viewed dashboards in alphabetical order.
- **Search -** Display dashboards by search query or tags. You must enter at least one value in **Query** or **Tags**. For the **Query** and **Tags** fields. Variable interpolation is supported, for example,`$my_var` or `${my_var}`.
@@ -48,3 +48,8 @@ These options only apply if the **Search** option is selected.
- **Tags -** Here is where you enter your tags you want to search by. Note that existing tags will not appear as you type, and they _are_ case sensitive.
> **Note:** When multiple tags and strings appear, the dashboard list displays those matching _all_ conditions.
{{% docs/reference %}}
[Dashboard URL variables]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/dashboards/build-dashboards/create-dashboard-url-variables"
[Dashboard URL variables]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/dashboards/build-dashboards/create-dashboard-url-variables"
{{% /docs/reference %}}
@@ -35,7 +35,7 @@ Choose how Grafana displays your data.
Show a calculated value based on all rows.
- **Calculation -** 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]({{< relref "../../calculation-types/" >}}).
- **Calculation -** 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][].
- **Fields -** Select the fields display in the panel.
#### All values
@@ -87,3 +87,8 @@ 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.
{{% docs/reference %}}
[Calculation types]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
[Calculation types]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
{{% /docs/reference %}}
@@ -83,13 +83,13 @@ The Geomap visualization supports showing multiple layers. Each layer determines
There are seven map layer types to choose from in the Geomap visualization.
- [Markers]({{< relref "#markers-layer" >}}) renders a marker at each data point.
- [Heatmap]({{< relref "#heatmap-layer" >}}) visualizes a heatmap of the data.
- [GeoJSON]({{< relref "#geojson-layer" >}}) renders static data from a GeoJSON file.
- [Night / Day]({{< relref "#night--day-layer" >}}) renders a night / day region.
- [Route (Beta)]({{< relref "#route-layer-beta" >}}) render data points as a route.
- [Photos (Beta)]({{< relref "#photos-layer-beta" >}}) renders a photo at each data point.
- [Network (Beta)]({{< relref "#network-layer-beta" >}}) visualizes a network graph from the data.
- [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.
{{% admonition type="note" %}}
Beta is equivalent to the [public preview](/docs/release-life-cycle/) release stage.
@@ -118,7 +118,7 @@ docker run -p 3000:3000 -e "GF_PANELS_ENABLE_ALPHA=true" grafana/grafana:<VERSIO
{{% /admonition %}}
{{% admonition type="note" %}}
[Basemap layer types]({{< relref "#types-1" >}}) can also be added as layers. You can specify an opacity.
[Basemap layer types](#types-1) can also be added as layers. You can specify an opacity.
{{% /admonition %}}
### Layer Controls
@@ -155,20 +155,20 @@ are available each with specific configuration options to style the base map.
There are four basemap layer types to choose from in the Geomap visualization.
- [Open Street Map]({{< relref "#open-street-map-layer" >}}) adds a map from a collaborative free geographic world database.
- [CARTO]({{< relref "#carto-layer" >}}) adds a layer from CARTO Raster basemaps.
- [ArcGIS]({{< relref "#arcgis-layer" >}}) adds a layer from an ESRI ArcGIS MapServer.
- [XYZ]({{< relref "#xyz-tile-layer" >}}) adds a map from a generic tile layer.
- [Open Street Map](#open-street-map-layer) adds a map from a collaborative free geographic world database.
- [CARTO](#carto-layer) adds a layer from CARTO Raster basemaps.
- [ArcGIS](#arcgis-layer) adds a layer from an ESRI ArcGIS MapServer.
- [XYZ](#xyz-tile-layer) adds a map from a generic tile layer.
### Default
The default base layer uses the [CARTO]({{< relref "#carto-layer" >}}) map. You can define custom default base layers in the `.ini` configuration file.
The default base layer uses the [CARTO](#carto-layer) map. You can define custom default base layers in the `.ini` configuration file.
![Basemap layer options](/static/img/docs/geomap-panel/geomap-baselayer-8-1-0.png)
#### 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]({{< relref "../../../administration/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][].
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.
@@ -367,7 +367,7 @@ The Photos layer renders a photo at each data point.
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]({{< relref "../node-graph/#data-api" >}}) with the addition of [geospatial data]({{< relref "#location">}}) included in the nodes data. The geospatial data is used to locate and render the nodes on the map.
The Network layer renders a network graph. This layer supports the same [data format supported by the node graph visualization][] with the addition of [geospatial data]({{< relref "#location">}}) 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" caption="Geomap network layer" >}}
{{< video-embed src="/media/docs/grafana/screen-recording-10-1-geomap-network-layer-from-node-graph.mp4" max-width="750px" caption="Node graph to Geomap network layer" >}}
@@ -431,7 +431,7 @@ The XYZ tile layer is a map from a generic tile layer.
> **Note:** 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]({{< relref "#show-attribution" >}})
- **Attribution** sets the reference string for the layer if displayed in [map controls](#show-attribution)
- **Opacity** from 0 (transparent) to 1 (opaque)
{{< figure src="/static/img/docs/geomap-panel/geomap-xyz-options-9-1-0.png" max-width="1200px" caption="Geomap panel xyz options" >}}
@@ -476,7 +476,7 @@ An ArcGIS layer is a layer from an ESRI ArcGIS MapServer.
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-usa-topographic-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS USA Topographic" >}}
- World Ocean
{{< figure src="/static/img/docs/geomap-panel/geomap-arcgis-ocean-9-1-0.png" max-width="1200px" caption="Geomap panel ArcGIS World Ocean" >}}
- Custom MapServer (see [XYZ]({{< relref "#xyz-tile-layer" >}}) for formatting)
- Custom MapServer (see [XYZ](#xyz-tile-layer) for formatting)
- URL template
- Attribution
- **Opacity** from 0 (transparent) to 1 (opaque)
@@ -574,3 +574,11 @@ Displays debug information in the upper right corner. This can be useful for deb
- **None** displays tooltips only when a data point is clicked.
- **Details** displays tooltips when a mouse pointer hovers over a data point.
{{% docs/reference %}}
[provisioning docs page]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/administration/provisioning"
[provisioning docs page]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/administration/provisioning"
[data format supported by the node graph visualization]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/node-graph#data-api"
[data format supported by the node graph visualization]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/node-graph#data-api"
{{% /docs/reference %}}
@@ -19,7 +19,7 @@ weight: 100
# Heatmap
The Heatmap panel visualization allows you to view histograms over time. For more information about histograms, refer to [Introduction to histograms and heatmaps]({{< relref "../../../fundamentals/intro-histograms/" >}}).
The Heatmap panel visualization allows you to view histograms over time. For more information about histograms, refer to [Introduction to histograms and heatmaps][].
![](/static/img/docs/v43/heatmap_panel_cover.jpg)
@@ -120,3 +120,8 @@ Choose whether you want to display the heatmap legend on the visualization.
### Exemplars
Set the color used to show exemplar data.
{{% docs/reference %}}
[Introduction to histograms and heatmaps]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/fundamentals/intro-histograms"
[Introduction to histograms and heatmaps]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/fundamentals/intro-histograms"
{{% /docs/reference %}}
@@ -55,7 +55,7 @@ Controls the fill opacity bars.
### 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]({{< relref "../../configure-standard-options/#color-scheme" >}}) field option.
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 display is influenced by the **Fill opacity** setting.
@@ -77,4 +77,12 @@ Gradient color is generated based on the hue of the line color.
### Legend calculations
Choose a [standard calculations]({{< relref "../../calculation-types/" >}}) to show in the legend. You can select more than one.
Choose a [standard calculations][] to show in the legend. You can select more than one.
{{% docs/reference %}}
[color scheme]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
[color scheme]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
[standard calculations]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
[standard calculations]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
{{% /docs/reference %}}
@@ -31,7 +31,7 @@ To limit the number of lines rendered, you can use the **Max data points** setti
## 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]({{< relref "../../../explore/logs-integration/#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][].
## Log details
@@ -52,3 +52,8 @@ Use these settings to refine your visualization:
- **Prettify JSON -** Set this to `true` to pretty print all JSON logs. This setting does not affect logs in any format other than JSON.
- **Enable log details -** Toggle option to see the log details view for each log row. The default setting is true.
- **Order -** Display results in descending or ascending time order. The default is **Descending**, showing the newest logs first. Set to **Ascending** to show the oldest log lines first.
{{% docs/reference %}}
[supported log levels and mappings of log level abbreviation and expressions]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/explore/logs-integration#log-level"
[supported log levels and mappings of log level abbreviation and expressions]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/explore/logs-integration#log-level"
{{% /docs/reference %}}
@@ -33,7 +33,7 @@ Choose how much information to show.
### Calculation
Select a calculation to reduce each series when Calculate has been selected. For information about available calculations, refer to [Calculation types]({{< relref "../../calculation-types/" >}}).
Select a calculation to reduce each series when Calculate has been selected. For information about available calculations, refer to [Calculation types][].
### Limit
@@ -89,3 +89,8 @@ Select values to display in the legend. You can select more than one.
- **Value:** The raw numerical value.
For more information about the legend, refer to [Configure a legend](../configure-legend/).
{{% docs/reference %}}
[Calculation types]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
[Calculation types]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
{{% /docs/reference %}}
@@ -56,7 +56,7 @@ Display a single value per column or series, or show values for each row.
Display a calculated value based on all rows.
- **Calculation -** 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]({{< relref "../../calculation-types/" >}}).
- **Calculation -** 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][].
- **Fields -** Select the fields display in the panel.
#### All values
@@ -117,3 +117,8 @@ 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.
{{% docs/reference %}}
[Calculation types]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
[Calculation types]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
{{% /docs/reference %}}
@@ -57,7 +57,7 @@ Controls the opacity of state regions.
## Value mappings
To assign colors to boolean or string values, you can use [Value mappings]({{< relref "../../configure-value-mappings/" >}}).
To assign colors to boolean or string values, you can use [Value mappings][].
{{< figure src="/static/img/docs/v8/value_mappings_side_editor.png" max-width="300px" caption="Value mappings side editor" >}}
@@ -69,6 +69,14 @@ The panel can be used with time series data as well. In this case, the threshold
## Legend options
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Color scheme][] is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="<GRAFANA VERSION>" >}}
{{% docs/reference %}}
[Color scheme]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
[Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
[Value mappings]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-value-mappings"
[Value mappings]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-value-mappings"
{{% /docs/reference %}}
@@ -49,7 +49,7 @@ Controls the opacity of state regions.
## Value mappings
To assign colors to boolean or string values, use the [Value mappings]({{< relref "../../configure-value-mappings/" >}}).
To assign colors to boolean or string values, use the [Value mappings][].
{{< figure src="/static/img/docs/v8/value_mappings_side_editor.png" max-width="300px" caption="Value mappings side editor" >}}
@@ -62,6 +62,14 @@ use gradient color schemes to color values.
## Legend options
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Color scheme][] is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="<GRAFANA VERSION>" >}}
{{% docs/reference %}}
[Value mappings]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-value-mappings"
[Value mappings]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-value-mappings"
[Color scheme]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
[Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
{{% /docs/reference %}}
@@ -149,11 +149,10 @@ If you have a field value that is an image URL or a base64 encoded image you can
### Sparkline
{{% admonition type="note" %}}
This cell type is available in Grafana 9.5+ as an opt-in beta feature. Modify Grafana [configuration file]({{< relref "../../../setup-grafana/configure-grafana/#configuration-file-location" >}}) to enable the `timeSeriesTable` [feature toggle]({{< relref "../../../setup-grafana/configure-grafana/#feature_toggles" >}}) to use it.
{{% /admonition %}}
> **Note:** This cell type is available in Grafana 9.5+ as an opt-in beta feature.
> Modify Grafana [configuration file][] to enable the `timeSeriesTable` [feature toggle][] to use it.
Shows value rendered as a sparkline. Requires [time series to table]({{< relref "../../query-transform-data/transform-data/#time-series-to-table-transform" >}}) data transform.
Shows value rendered as a sparkline. Requires [time series to table][] data transform.
{{< figure src="/static/img/docs/tables/sparkline.png" max-width="500px" caption="Sparkline" class="docs-image--no-shadow" >}}
@@ -167,7 +166,7 @@ Cell value inspection is only available when cell display mode is set to Auto, C
## Column filter
You can temporarily change how column data is displayed. For example, you can order values from highest to lowest or hide specific values. For more information, refer to [Filter table columns]({{< relref "#filter-table-columns" >}}).
You can temporarily change how column data is displayed. For example, you can order values from highest to lowest or hide specific values. For more information, refer to [Filter table columns](#filter-table-columns).
## Pagination
@@ -206,7 +205,7 @@ To remove the filter, click the blue funnel icon and then click **Clear filter**
## Table footer
You can use the table footer to show [calculations]({{< relref "../../calculation-types/" >}}) on fields.
You can use the table footer to show [calculations][] on fields.
After you enable the table footer:
@@ -218,3 +217,14 @@ The system applies the calculation to all numeric fields if you do not select a
### Count rows
If you want to show the number of rows in the dataset instead of the number of values in the selected fields, select the **Count** calculation and enable **Count rows**.
{{% docs/reference %}}
[calculations]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
[calculations]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/calculation-types"
[time series to table]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/query-transform-data/transform-data#time-series-to-table-transform"
[time series to table]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/query-transform-data/transform-data#time-series-to-table-transform"
[configuration file]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/setup-grafana/configure-grafana#configuration-file-location"
[configuration file]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/setup-grafana/configure-grafana#configuration-file-location"
{{% /docs/reference %}}
@@ -33,7 +33,7 @@ This option formats the content as [markdown](https://en.wikipedia.org/wiki/Mark
### HTML
This setting 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]({{< relref "../../../setup-grafana/configure-grafana/#disable_sanitize_html" >}}) flag which enables you to directly enter HTML.
[disable_sanitize_html][] flag which enables you to directly enter HTML.
### Code
@@ -42,4 +42,12 @@ to the embedded text.
## Variables
[Variables]({{< relref "../../../dashboards/variables/variable-syntax/" >}}) in the content will be expanded for display.
[Variables][] in the content will be expanded for display.
{{% docs/reference %}}
[disable_sanitize_html]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/setup-grafana/configure-grafana#disable_sanitize_html"
[disable_sanitize_html]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/setup-grafana/configure-grafana#disable_sanitize_html"
[Variables]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/dashboards/variables/variable-syntax"
[Variables]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/dashboards/variables/variable-syntax"
{{% /docs/reference %}}
@@ -90,12 +90,12 @@ Use opacity to specify the series area fill color.
### Gradient mode
Gradient mode specifies 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]({{< relref "../../configure-standard-options/#color-scheme" >}}).
Gradient mode specifies 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][].
- **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 is based on the hue of the series color.
- **Scheme:** A color gradient defined by your [Color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}). This setting is used for the fill area and line. For more information about scheme, refer to [Scheme gradient mode]({{< relref "#scheme-gradient-mode" >}}).
- **Scheme:** A color gradient defined by your [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 show, the **Fill opacity** is set to 50.
@@ -126,7 +126,7 @@ This option controls how the graph interpolates the series line.
### Line style
Set the style of the line. To change the color, use the standard [color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}) field option.
Set the style of the line. To change the color, use the standard [color scheme][] field option.
![Line style option](/static/img/docs/time-series-panel/line-style-option-v9.png)
@@ -152,7 +152,7 @@ _Stacking_ allows Grafana to display series on top of each other. Be cautious wh
#### 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]({{< relref "../../configure-overrides" >}}).
The stacking group option is only available as an override. For more information about creating an override, refer to [Configure field overrides][].
1. Edit the panel and click **Overrides**.
1. Create a field override for the **Stack series** option.
@@ -187,7 +187,7 @@ Select the placement of the Y-axis.
- **Right:** Display all Y-axes on the right side.
- **Hidden:** Hide all axes.
To selectively hide axes, [Add a field override]({{< relref "../../configure-overrides#add-a-field-override" >}}) that targets specific fields.
To selectively hide axes, [Add a field override][] that targets specific fields.
### Label
@@ -205,7 +205,7 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B
**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 specific point.
To define hard limits of the Y-axis, You can set standard min/max options. For more information, refer to [Configure standard options]({{< relref "../../configure-standard-options/#max" >}}).
To define hard limits of the Y-axis, You can set standard min/max options. For more information, refer to [Configure standard options][].
![Label example](/static/img/docs/time-series-panel/axis-soft-min-max-7-4.png)
@@ -229,7 +229,7 @@ The transform option is only available as an override.
## Color options
By default, the graph uses the standard [Color scheme]({{< relref "../../configure-standard-options/#color-scheme" >}}) option to assign series colors. You can also use the legend to open the color picker by clicking the legend series color icon. Setting
By default, the graph uses the standard [Color scheme][] option to assign series colors. You can also use the legend to open the color picker by clicking the legend series color icon. Setting
color this way automatically creates an override rule that set's a specific color for a specific series.
### Classic palette
@@ -267,3 +267,20 @@ The following image shows a line chart with the **Green-Yellow-Red (by value)**
The following image shows a bar chart with the **Green-Yellow-Red (by value)** color scheme option selected.
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_bars.png" max-width="1200px" caption="Color scheme: Green-Yellow-Red" >}}
{{% docs/reference %}}
[Color scheme]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
[Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
[Add a field override]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-overrides#add-a-field-override"
[Add a field override]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-overrides#add-a-field-override"
[Configure standard options]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#max"
[Configure standard options]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#max"
[color scheme]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
[color scheme]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
[Configure field overrides]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-overrides"
[Configure field overrides]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-overrides"
{{% /docs/reference %}}
@@ -23,8 +23,8 @@ The Traces panel visualizes traces data into a diagram that allows you to easily
For more information about traces and how to use them, refer to the following documentation:
- [Tracing in Explore]({{< relref "../../../explore/trace-integration/" >}})
- [Tempo data source]({{< relref "../../../datasources/tempo/" >}})
- [Tracing in Explore][]
- [Tempo data source][]
- [Getting started with Tempo](/docs/tempo/latest/getting-started)
{{< figure src="/static/img/docs/explore/trace-view-9-4.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view" >}}
@@ -34,7 +34,7 @@ For more information about traces and how to use them, refer to the following do
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]({{< relref "../../../dashboards/variables" >}}).
For more information about dashboard variables, refer to the [Variables documentation][].
### Before you begin
@@ -47,7 +47,7 @@ To use this procedure, you need:
To view and analyze traces data in a dashboard, you need to add the tracing panel to your dashboard and define a query using the panel editor.
The query determines the data that is displayed in the panel.
For more information on the panel editor, refer to the [Panel editor documentation]({{< relref "../../panel-editor-overview" >}}).
For more information on the panel editor, refer to the [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.
@@ -55,7 +55,7 @@ This procedure uses dashboard variables and templates to allow you to enter trac
1. Select **Add visualization** from a new dashboard or select **Add Panel** on an existing dashboard.
1. Search for and select the appropriate tracing data source.
1. In the top-right 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. For more information on the panel editor, refer to the [Configure panel options documentation]({{< relref "../../configure-panel-options" >}}).
1. Under the **Panel options**, enter a **Title** for your trace panel. For more information on the panel editor, refer to the [Configure panel options documentation][].
1. In the query editor, select 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.
@@ -114,3 +114,20 @@ You should now see a list of matching traces in the Table visualization. While s
{{< figure src="/static/img/docs/panels/traces/screenshot-traces-trace-link.png" caption="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" >}}
{{% docs/reference %}}
[Tracing in Explore]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/explore/trace-integration"
[Tracing in Explore]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/explore/trace-integration"
[Tempo data source]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/datasources/tempo"
[Tempo data source]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/datasources/tempo"
[Panel editor documentation]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/panel-editor-overview"
[Panel editor documentation]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/panel-editor-overview"
[Variables documentation]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/dashboards/variables"
[Variables documentation]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/dashboards/variables"
[Configure panel options documentation]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-panel-options"
[Configure panel options documentation]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-panel-options"
{{% /docs/reference %}}
@@ -20,7 +20,7 @@ weight: 100
The trend panel should be used for datasets that have a sequential, numeric X 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).
The trend panel supports all visual styles and options available in the [Time series panel]({{< relref "../time-series" >}}) with these exceptions:
The trend panel supports all visual styles and options available in the [Time series panel][] with these exceptions:
- No annotations or time regions
- No shared cursor/crosshair
@@ -36,3 +36,8 @@ Use this option to select a field that contains increasing numeric values.
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-grafana-10-0-trend-panel-new-colors.png" max-width="750px" caption="Trend engine power and torque curves" >}}
{{% docs/reference %}}
[Time series panel]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
[Time series panel]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
{{% /docs/reference %}}