mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Docs: update visualization naming conventions - 2 (#74954)
* Updated naming style * Updated viz names on Visualiztions index page
This commit is contained in:
Isabel
GitHub
parent
f0b75360db
commit
7cbca0dfa4
@ -17,7 +17,7 @@ weight: 75
|
||||
|
||||
# Visualizations
|
||||
|
||||
Grafana offers a variety of visualizations to support different use cases. This section of the documentation highlights the built-in panels, their options and typical usage.
|
||||
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.
|
||||
|
||||
{{% 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.
|
||||
@ -38,14 +38,14 @@ If you are unsure which visualization to pick, Grafana can provide visualization
|
||||
- Misc
|
||||
- [Table][] is the main and only table visualization.
|
||||
- [Logs][] is the main visualization for logs.
|
||||
- [Node Graph][] for directed graphs or networks.
|
||||
- [Node graph][] for directed graphs or networks.
|
||||
- [Traces][] is the main visualization for traces.
|
||||
- [Flame Graph][] is the main visualization for profiling.
|
||||
- [Flame graph][] is the main visualization for profiling.
|
||||
- Widgets
|
||||
- [Dashboard list][] can list dashboards.
|
||||
- [Alert list][] can list alerts.
|
||||
- [Text panel][] can show markdown and html.
|
||||
- [News panel][] can show RSS feeds.
|
||||
- [Text][] can show markdown and html.
|
||||
- [News][] can show RSS feeds.
|
||||
|
||||
## Get more
|
||||
|
||||
@ -57,69 +57,69 @@ 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][] 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][] visualization.
|
||||
For categorical data use a [bar chart][].
|
||||
|
||||
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="700px" caption="Bar chart" >}}
|
||||
|
||||
### Big numbers & stats
|
||||
|
||||
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.
|
||||
A [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 panel" >}}
|
||||
{{< 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][] 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][] 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][] visualization.
|
||||
To show data in a table layout, use a [table][].
|
||||
|
||||
{{< 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][] visualization.
|
||||
To display reduced series, or values in a series, from one or more queries, as they relate to each other, use a [pie chart][].
|
||||
|
||||
{{< figure src="/static/img/docs/pie-chart-panel/pie-chart-example.png" max-width="700px" lightbox="true" caption="Pie chart visualization" >}}
|
||||
{{< 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 the [heatmap][] visualization.
|
||||
To show value distribution over, time use a [heatmap][].
|
||||
|
||||
{{< figure src="/static/img/docs/v43/heatmap_panel_cover.jpg" max-width="1000px" lightbox="true" caption="Heatmap" >}}
|
||||
|
||||
### State timeline
|
||||
|
||||
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.
|
||||
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" >}}
|
||||
{{< 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"
|
||||
[News]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/news"
|
||||
[News]: "/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"
|
||||
[Text]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/text"
|
||||
[Text]: "/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"
|
||||
[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"
|
||||
@ -127,8 +127,8 @@ The state timeline panel visualization shows discrete state changes over time. W
|
||||
[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"
|
||||
[Gauge]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/gauge"
|
||||
[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"
|
||||
@ -142,8 +142,8 @@ The state timeline panel visualization shows discrete state changes over time. W
|
||||
[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"
|
||||
[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"
|
||||
|
||||
@ -21,11 +21,11 @@ weight: 100
|
||||
|
||||
# Candlestick
|
||||
|
||||
The Candlestick panel allows you to visualize data that includes a number of consistent dimensions focused on price movement. The Candlestick panel includes an Open-High-Low-Close (OHLC) mode, as well as support for additional dimensions based on time series data.
|
||||
The candlestick visualization allows you to visualize data that includes a number of consistent dimensions focused on price movement. The candlestick visualization includes an Open-High-Low-Close (OHLC) mode, as well as support for additional dimensions based on time series data.
|
||||
|
||||
{{< figure src="/static/img/docs/candlestick-panel/candlestick-panel-8-3.png" max-width="1200px" caption="Candlestick panel" >}}
|
||||
{{< figure src="/static/img/docs/candlestick-panel/candlestick-panel-8-3.png" max-width="1200px" caption="Candlestick visualization" >}}
|
||||
|
||||
The Candlestick panel builds upon the foundation of the [time series][] panel and includes many common configuration settings.
|
||||
Candlestick visualizations build upon the foundation of the [time series visualization][] and include many common configuration settings.
|
||||
|
||||
## Mode
|
||||
|
||||
@ -33,7 +33,7 @@ The mode options allow you to toggle which dimensions are used for the visualiza
|
||||
|
||||
- **Candles** limits the panel dimensions to the open, high, low, and close dimensions used by candlestick visualizations.
|
||||
- **Volume** limits the panel dimension to the volume dimension.
|
||||
- **Both** is the default behavior for the candlestick panel. It includes both candlestick and volume visualizations.
|
||||
- **Both** is the default behavior for the candlestick visualization. It includes both candlestick and volume visualizations.
|
||||
|
||||
## Candle style
|
||||
|
||||
@ -51,7 +51,7 @@ The **Up color** and **Down color** options select which colors are used when th
|
||||
|
||||
## Open, High, Low, Close
|
||||
|
||||
The candlestick panel will attempt to map fields to the appropriate dimension. The **Open**, **High**, **Low**, and **Close** options allow you to map your data to these dimensions if the panel is unable to do so.
|
||||
The candlestick visualization will attempt to map fields to the appropriate dimension. The **Open**, **High**, **Low**, and **Close** options allow you to map your data to these dimensions if the panel is unable to do so.
|
||||
|
||||
{{% admonition type="note" %}}
|
||||
These values are hidden from the legend.
|
||||
@ -65,9 +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][] panel.
|
||||
The candlestick visualization is based on the time series visualization. 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][] visualization.
|
||||
|
||||
{{% 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"
|
||||
[time series visualization]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
|
||||
[time series visualization]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
|
||||
{{% /docs/reference %}}
|
||||
|
||||
@ -18,13 +18,13 @@ weight: 100
|
||||
|
||||
# Flame graph
|
||||
|
||||
Flame graph panel is a visualization that allows you to visualize profiling data. It can represent the profile as a flame graph, table, or both
|
||||
Flame graphs let you visualize profiling data. Using this visualization, the profile can be represented as a flame graph, table, or both
|
||||
|
||||
|
||||
|
||||
|
||||
## Flame graph mode
|
||||
|
||||
The 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.
|
||||
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.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -18,9 +18,9 @@ weight: 100
|
||||
|
||||
# Trend
|
||||
|
||||
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).
|
||||
Trend visualizations 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][] with these exceptions:
|
||||
Trend visualizations support all visual styles and options available in the [time series visualization][] with these exceptions:
|
||||
|
||||
- No annotations or time regions
|
||||
- No shared cursor/crosshair
|
||||
@ -38,6 +38,6 @@ For example, you could represent engine power and torque versus speed where spee
|
||||
{{< 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"
|
||||
[Time series visualization]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
|
||||
[Time series visualization]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
|
||||
{{% /docs/reference %}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user