public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs: Update links for 7.0 (#24751)

Browse Source 
* update menu

* updated alert list

* Update alert-list-panel.md

* Update alert-list-panel.md

* Update bar-gauge-panel.md

* Delete bar_gauge.md

* Delete dashlist.md

* Update dashboard-list-panel.md

* deleted old panels

* Update gauge-panel.md

* Update graph-panel.md

* Update heatmap.md

* Update logs-panel.md

* Update news-panel.md

* Updated stat panel

* Update table-panel.md

* Update text-panel.md

* Fixed broken links

* Update _index.md

* Update alerts-overview.md

* Update add-a-panel.md

* Update field-configuration-options.md

* removed beta text

* Update inspect-panel.md

* Update panel-editor.md

* Update thresholds.md

* Update transformations.md

* Update _index.md

* Update _index.md

* Update _index.md

* Update _index.md

* Update _index.md

* Update transformations.md
This commit is contained in:
Diana Payton
2020-05-15 13:58:39 -07:00
committed by GitHub
parent 26964b383f
commit 0e53b15375
44 changed files with 313 additions and 1033 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/sources/features/datasources/loki.md
+4 -4
View File
@@ -23,9 +23,9 @@ Just add it as a data source and you are ready to query your log data in [Explor
## Adding the data source
1. Open Grafana and make sure you are logged in.
2. In the side menu under the `Configuration` link you should find a link named `Data Sources`.
3. Click the `Add data source` button at the top.
4. Select `Loki` from the list of data sources.
1. In the side menu under the `Configuration` link you should find a link named `Data Sources`.
1. Click the `Add data source` button at the top.
1. Select `Loki` from the list of data sources.
> Note: If you're not seeing the `Data Sources` link in your side menu it means that your current user does not have the `Admin` role for the current organization.
@@ -59,7 +59,7 @@ The new field with the link shown in log details:
## Querying Logs
Querying and displaying log data from Loki is available via [Explore]({{< relref "../explore" >}}), and with the [logs panel]({{< relref "../panels/logs/" >}}) in dashboards. Select the Loki data source, and then enter a log query to display your logs.
Querying and displaying log data from Loki is available via [Explore]({{< relref "../explore" >}}), and with the [logs panel]({{< relref "../../panels/visualizations/logs-panel.md" >}}) in dashboards. Select the Loki data source, and then enter a log query to display your logs.
### Log Queries
docs/sources/features/datasources/prometheus.md
+1 -1
View File
@@ -55,7 +55,7 @@ Open a graph in edit mode by clicking the title > Edit (or by pressing `e` key w
The Prometheus data source allows you to run "instant" queries, which query only the latest value.
You can visualize the results in a table panel to see all available labels of a timeseries.
Instant query results are made up only of one data point per series but can be shown in the graph panel with the help of [series overrides]({{< relref "../panels/graph/#series-overrides" >}}).
Instant query results are made up only of one data point per series but can be shown in the graph panel with the help of [series overrides]({{< relref "../../panels/visualizations/graph-panel.md#series-overrides" >}}).
To show them in the graph as a latest value point, add a series override and select `Points > true`.
To show a horizontal line across the whole graph, add a series override and select `Transform > constant`.
docs/sources/features/panels/_index.md
-8
View File
@@ -1,8 +0,0 @@
+++
title = "Panels"
type = "docs"
[menu.docs]
parent = "features"
identifier = "panels"
weight = 3
+++
docs/sources/features/panels/alertlist.md
-27
View File
@@ -1,27 +0,0 @@
+++
title = "Alert List"
keywords = ["grafana", "alert list", "documentation", "panel", "alertlist"]
type = "docs"
aliases = ["/docs/grafana/latest/reference/alertlist/"]
[menu.docs]
name = "Alert list"
parent = "panels"
weight = 4
+++
# Alert List Panel
{{< docs-imagebox img="/img/docs/v45/alert-list-panel.png" max-width="850px" >}}
The alert list panel allows you to display your dashboards alerts. The list can be configured to show current state or recent state changes. You can read more about alerts [here](http://docs.grafana.org/alerting/alerts-overview).
## Alert List Options
{{< docs-imagebox img="/img/docs/v45/alert-list-options.png" max-width="600px" class="docs-image--no-shadow docs-image--right" >}}
1. **Show**: Lets you choose between current state or recent state changes.
2. **Max Items**: Max items set the maximum of items in a list.
3. **Sort Order**: Lets you sort your list alphabetically(asc/desc) or by importance.
4. **Alerts From** This Dashboard`: Shows alerts only from the dashboard the alert list is in.
5. **State Filter**: Here you can filter your list by one or more parameters.
docs/sources/features/panels/bar_gauge.md
-60
View File
@@ -1,60 +0,0 @@
+++
draft = "false"
date = "2020-02-19"
title = "Bar gauge panel"
description = "Bar gauge panel docs"
keywords = ["grafana", "enter", "keywords", "here"]
type = "docs"
+++
# Bar gauge panel
{{< docs-imagebox img="/img/docs/v66/bar_gauge_cover.png" max-width="1025px" caption="Stat panel" >}}
This panel can show one or more bar gauges depending on how many series, rows or columns your query returns. The
thresholds control the bar & value color.
## Display options
* Show
* `Calculation` - Show a calculated value like min or max based on all rows.
* `All values` - Show a separate stat for every row.
* Calc
* Specify calculation / reducer function. Since this panel is designed to only show a single value Grafana needs to
know how to reduce a fields many values to a single value.
* Orientation
* `Horizontal` - The bar will stretch horizontally from left to right.
* `Vertical` - The bar will stretch vertically from top to bottom.
* Mode
* `Gradient` - The threshold levels define a gradient.
* `Retro LCD` - The gauge is split up in small cells that are lit or unlit.
* `Basic` - Single color based on the matching threshold.
Retro LCD example:
{{< docs-imagebox img="/img/docs/v66/bar_gauge_lcd.png" max-width="1025px" caption="Stat panel" >}}
### Field
* `Title` - When multiple stats are shown this field controls the title in each stat. By default this is the series name
and field name. You can use expressions like `${__series.name}` or `${__field.name}` to use only series name or field
name in title or `${__cell_2}` to refer to other fields (2 being field/column with index 2).
* `Min` - The minimum value, leave blank for auto calculation based on all series & fields. Used by Graph to set y-axis min.
* `Max` - The maximum value, leave blank for auto calculation based on all series & fields. Used by Graph to set y-axis max.
* `Decimals` - Number of decimals to render value with. Leave empty for Grafana to automatically figure out the best
number of decimals to use.
### Thresholds
Define thresholds that will set the color of either the value or the background depending on your `Color` display option. The
thresholds are automatically sorted from lowest value to highest. The `Base` value represents minus infinity.
### Value mappings
Map a number or a range of numbers to a text value.
### Data links
Data links allow you add dynamic URL links to your visualizations, [read more on data links]({{< relref "../../reference/datalinks.md" >}}).
docs/sources/features/panels/dashlist.md
-39
View File
@@ -1,39 +0,0 @@
+++
title = "Dashboard List"
keywords = ["grafana", "dashboard list", "documentation", "panel", "dashlist"]
type = "docs"
aliases = ["/docs/grafana/latest/reference/dashlist/"]
[menu.docs]
name = "Dashboard list"
parent = "panels"
weight = 4
+++
# Dashboard List Panel
{{< docs-imagebox img="/img/docs/v45/dashboard-list-panels.png" max-width="850px">}}
The dashboard list panel allows you to display dynamic links to other dashboards. The list can be configured to use starred dashboards, recently viewed dashboards, a search query and/or dashboard tags.
> On each dashboard load, the dashlist panel will re-query the dashboard list, always providing the most up to date results.
## Dashboard List Options
{{< docs-imagebox img="/img/docs/v45/dashboard-list-options.png" class="docs-image--no-shadow docs-image--right">}}
1. **Starred**: The starred dashboard selection displays starred dashboards in alphabetical order.
2. **Recently Viewed**: The recently viewed dashboard selection displays recently viewed dashboards in alphabetical order.
3. **Search**: The search dashboard selection displays dashboards by search query or tag(s).
4. **Show Headings**: When show headings is ticked the chosen list selection(Starred, Recently Viewed, Search) is shown as a heading.
5. **Max Items**: Max items set the maximum of items in a list.
6. **Query**: Here is where you enter your query you want to search by. Queries are case-insensitive, and partial values are accepted.
7. **Tags**: Here is where you enter your tag(s) you want to search by. Note that existing tags will not appear as you type, and *are* case sensitive. To see a list of existing tags, you can always return to the dashboard, open the Dashboard Picker at the top and click `tags` link in the search bar.
<div class="clearfix"></div>
> When multiple tags and strings appear, the dashboard list will display those matching ALL conditions.
docs/sources/features/panels/gauge.md
-50
View File
@@ -1,50 +0,0 @@
+++
draft = "false"
date = "2020-02-19"
title = "Gauge panel"
description = "Gauge panel docs"
keywords = ["grafana", "enter", "keywords", "here"]
type = "docs"
+++
# Gauge panel
{{< docs-imagebox img="/img/docs/v66/gauge_panel_cover.png" max-width="1025px" caption="Stat panel" >}}
The Gauge is a single value panel that can repeat a gauge for every series, column or row.
## Display options
* Show
* `Calculation` - Show a calculated value like min or max based on all rows.
* `All values` - Show a separate stat for every row.
* Calc
* Specify calculation / reducer function. Since this panel is designed to only show a single value Grafana needs to
know how to reduce a fields many values to a single value.
* Labels - Controls if thresholds values are shown.
* Markers - Controls if a thresholds band is shown outside the inner gauge value band.
## Field
* `Title` - When multiple stats are shown this field controls the title in each stat. By default this is the series name
and field name. You can use expressions like `${__series.name}` or `${__field.name}` to use only series name or field
name in title or `${__cell_2}` to refer to other fields (2 being field/column with index 2).
* `Min` - The minimum value, leave blank for auto calculation based on all series & fields. Used by Graph to set y-axis min.
* `Max` - The maximum value, leave blank for auto calculation based on all series & fields. Used by Graph to set y-axis max.
* `Decimals` - Number of decimals to render value with. Leave empty for Grafana to automatically figure out the best
number of decimals to use.
### Thresholds
Define thresholds that will set the color of either the value or the background depending on your `Color` display option. The
thresholds are automatically sorted from lowest value to highest. The `Base` value represents minus infinity.
### Value mappings
Map a number or a range of numbers to a text value.
### Data links
Data links allow you add dynamic URL links to your visualizations, [read more on data links]({{< relref "../../reference/datalinks.md" >}}).
docs/sources/features/panels/graph.md
-197
View File
@@ -1,197 +0,0 @@
+++
title = "Graph Panel"
keywords = ["grafana", "graph panel", "documentation", "guide", "graph"]
type = "docs"
aliases = ["/docs/grafana/latest/reference/graph/"]
[menu.docs]
name = "Graph"
parent = "panels"
weight = 4
+++
# Graph Panel
{{< docs-imagebox img="/img/docs/v45/graph_overview.png" class="docs-image--no-shadow" max-width="850px" >}}
The main panel in Grafana is simply named Graph. It provides a very rich set of graphing options.
1. Clicking the title for a panel exposes a menu. The `edit` option opens additional configuration
options for the panel.
2. Click to open color and axis selection.
3. Click to only show this series. Shift/Ctrl+Click to hide series.
## General
{{< docs-imagebox img="/img/docs/v51/graph_general.png" max-width= "800px" >}}
The general tab allows customization of a panel's appearance and menu options.
### Info
- **Title** - The panel title of the dashboard, displayed at the top.
- **Description** - The panel description, displayed on hover of info icon in the upper left corner of the panel.
- **Transparent** - If checked, removes the solid background of the panel (default not checked).
### Repeat
Repeat a panel for each value of a variable. Repeating panels are described in more detail [here]({{< relref "../../variables/templates-and-variables.md#repeating-panels" >}}).
## Metrics
The metrics tab defines what series data and sources to render. Each data source provides different
options.
## Axes
{{< docs-imagebox img="/img/docs/v51/graph_axes_grid_options.png" max-width= "800px" >}}
The Axes tab controls the display of axes.
### Left Y/Right Y
The **Left Y** and **Right Y** can be customized using:
- **Unit** - The display unit for the Y value
- **Scale** - The scale to use for the Y value, linear or logarithmic. (default linear)
- **Y-Min** - The minimum Y value. (default auto)
- **Y-Max** - The maximum Y value. (default auto)
- **Decimals** - Controls how many decimals are displayed for Y value (default auto)
- **Label** - The Y axis label (default "")
Axes can also be hidden by unchecking the appropriate box from **Show**.
### X-Axis
Axis can be hidden by unchecking **Show**.
For **Mode** there are three options:
- The default option is **Time** and means the x-axis represents time and that the data is grouped by time (for example, by hour or by minute).
- The **Series** option means that the data is grouped by series and not by time. The y-axis still represents the value.
{{< docs-imagebox img="/img/docs/v51/graph-x-axis-mode-series.png" max-width="800px">}}
- The **Histogram** option converts the graph into a histogram. A Histogram is a kind of bar chart that groups numbers into ranges, often called buckets or bins. Taller bars show that more data falls in that range. Histograms and buckets are described in more detail [here](http://docs.grafana.org/features/panels/heatmap/#histograms-and-buckets).
<img src="/img/docs/v43/heatmap_histogram.png" class="no-shadow">
### Y-Axes
- **Align** - Check to align left and right Y-axes by value (default unchecked/false)
- **Level** - Available when *Align* is checked. Value to use for alignment of left and right Y-axes, starting from Y=0 (default 0)
## Legend
{{< docs-imagebox img="/img/docs/v51/graph-legend.png" max-width= "800px" >}}
### Options
- **Show** - Uncheck to hide the legend (default checked/true)
- **Table** - Check to display legend in table (default unchecked/false)
- **To the right** - Check to display legend to the right (default unchecked/false)
- **Width** - Available when *To the right* is checked. Value to control the minimum width for the legend (default 0)
### Values
Additional values can be shown along-side the legend names:
- **Min** - Minimum of all values returned from the metric query
- **Max** - Maximum of all values returned from the metric query
- **Avg** - Average of all values returned from the metric query
- **Current** - Last value returned from the metric query
- **Total** - Sum of all values returned from the metric query
- **Decimals** - Controls how many decimals are displayed for legend values (and graph hover tooltips)
The legend values are calculated client side by Grafana and depend on what type of
aggregation or point consolidation your metric query is using. All the above legend values cannot
be correct at the same time. For example if you plot a rate like requests/second, this is probably
using average as aggregator, then the Total in the legend will not represent the total number of requests.
It is just the sum of all data points received by Grafana.
### Hide series
Hide series when all values of a series from a metric query are of a specific value:
- **With only nulls** - Value=*null* (default unchecked)
- **With only zeros** - Value=*zero* (default unchecked)
## Display styles
{{< docs-imagebox img="/img/docs/v51/graph_display_styles.png" max-width= "800px" >}}
Display styles control visual properties of the graph.
### Draw Options
#### Draw Modes
- **Bar** - Display values as a bar chart
- **Lines** - Display values as a line graph
- **Points** - Display points for values
#### Mode Options
- **Fill** - Amount of color fill for a series (default 1). 0 is none.
- **Line Width** - The width of the line for a series (default 1).
- **Staircase** - Draws adjacent points as staircase
- **Points Radius** - Adjust the size of points when *Points* are selected as *Draw Mode*.
- **Hidden Series** - Hide series by default in graph.
#### Hover tooltip
- **Mode** - Controls how many series to display in the tooltip when hover over a point in time, All series or single (default All series).
- **Sort order** - Controls how series displayed in tooltip are sorted, None, Ascending or Descending (default None).
- **Stacked value** - Available when *Stack* are checked and controls how stacked values are displayed in tooltip (default Individual).
- Individual: the value for the series you hover over
- Cumulative - sum of series below plus the series you hover over
#### Stacking and Null value
If there are multiple series, they can be displayed as a group.
- **Stack** - Each series is stacked on top of another
- **Percent** - Available when *Stack* are checked. Each series is drawn as a percentage of the total of all series
- **Null value** - How null values are displayed
### Series overrides
{{< docs-imagebox img="/img/docs/v51/graph_display_overrides.png" max-width= "800px" >}}
The section allows a series to be rendered differently from the others. For example, one series can be given
a thicker line width to make it stand out and/or be moved to the right Y-axis.
#### Dashes Drawing Style
There is an option under Series overrides to draw lines as dashes. Set Dashes to the value True to override the line draw setting for a specific series.
### Thresholds
{{< docs-imagebox img="/img/docs/v51/graph_display_thresholds.png" max-width= "800px" >}}
Thresholds allow you to add arbitrary lines or sections to the graph to make it easier to see when
the graph crosses a particular threshold.
### Time Regions
> Only available in Grafana v5.4 and above.
{{< docs-imagebox img="/img/docs/v54/graph_time_regions.png" max-width= "800px" >}}
Time regions allow you to highlight certain time regions of the graph to make it easier to see for example weekends, business hours and/or off work hours.
## Time Range
{{< docs-imagebox img="/img/docs/v51/graph-time-range.png" max-width= "900px" >}}
The time range tab allows you to override the dashboard time range and specify a panel specific time.
Either through a relative from now time option or through a timeshift.
Panel time overrides and timeshift are described in more detail [here]({{< relref "../../dashboards/time-range-controls.md" >}}).
### Data links
{{< docs-imagebox img="/img/docs/v66/datalinks_graph.png" max-width="1025px" caption="Data links" >}}
Data links allow you add dynamic URL links to your visualizations, [read more on data links]({{< relref "../../reference/datalinks.md" >}}).
docs/sources/features/panels/heatmap.md
-121
View File
@@ -1,121 +0,0 @@
+++
title = "Heatmap Panel"
description = "Heatmap panel documentation"
keywords = ["grafana", "heatmap", "panel", "documentation"]
type = "docs"
[menu.docs]
name = "Heatmap"
parent = "panels"
weight = 4
+++
# Heatmap Panel
![](/img/docs/v43/heatmap_panel_cover.jpg)
> New panel only available in Grafana v4.3+
The Heatmap panel allows you to view histograms over time. To fully understand and use this panel you need to
understand what Histograms are and how they are created. Read on below to for a quick introduction to the
term Histogram.
## Histograms and buckets
A histogram is a graphical representation of the distribution of numerical data. You group values into buckets
(some times also called bins) and then count how many values fall into each bucket. Instead
of graphing the actual values you then graph the buckets. Each bar represents a bucket
and the bar height represents the frequency (i.e. count) of values that fell into that bucket's interval.
Example Histogram:
![](/img/docs/v43/heatmap_histogram.png)
The above histogram shows us that most value distribution of a couple of time series. We can easily see that
most values land between 240-300 with a peak between 260-280. Histograms just look at value distributions
over specific time range. So you cannot see any trend or changes in the distribution over time,
this is where heatmaps become useful.
## Heatmap
A Heatmap is like a histogram but over time where each time slice represents its own
histogram. Instead of using bar height as a representation of frequency you use cells and color
the cell proportional to the number of values in the bucket.
Example:
![](/img/docs/v43/heatmap_histogram_over_time.png)
Here we can clearly see what values are more common and how they trend over time.
## Data Options
Data and bucket options can be found in the `Axes` tab.
### Data Formats
Data format | Description
------------ | -------------
*Time series* | Grafana does the bucketing by going through all time series values. The bucket sizes and intervals will be determined using the Buckets options.
*Time series buckets* | Each time series already represents a Y-Axis bucket. The time series name (alias) needs to be a numeric value representing the upper or lower interval for the bucket. Grafana does no bucketing so the bucket size options are hidden.
### Bucket bound
When Data format is *Time series buckets* data source returns series with names representing bucket bound. But depending
on data source, a bound may be *upper* or *lower*. This option allows to adjust a bound type. If *Auto* is set, a bound
option will be chosen based on panels' data source type.
### Bucket Size
The Bucket count and size options are used by Grafana to calculate how big each cell in the heatmap is. You can
define the bucket size either by count (the first input box) or by specifying a size interval. For the Y-Axis
the size interval is just a value but for the X-bucket you can specify a time range in the *Size* input, for example,
the time range `1h`. This will make the cells 1h wide on the X-axis.
### Pre-bucketed data
If you have a data that is already organized into buckets you can use the `Time series buckets` data format. This format
requires that your metric query returns regular time series and that each time series has a numeric name that represents
the upper or lower bound of the interval.
There are a number of data sources supporting histogram over time like Elasticsearch (by using a Histogram bucket
aggregation) or Prometheus (with [histogram](https://prometheus.io/docs/concepts/metric_types/#histogram) metric type
and *Format as* option set to Heatmap). But generally, any data source could be used if it meets the requirements:
returns series with names representing bucket bound or returns series sorted by the bound in ascending order.
With Elasticsearch you control the size of the buckets using the Histogram interval (Y-Axis) and the Date Histogram interval (X-axis).
![Elastic histogram](/img/docs/v43/elastic_histogram.png)
With Prometheus you can only control X-axis by adjusting *Min step* and *Resolution* options.
![Prometheus histogram](/img/docs/v51/prometheus_histogram.png)
## Display Options
In the heatmap *Display* tab you define how the cells are rendered and what color they are assigned.
### Color Mode and Spectrum
{{< imgbox max-width="40%" img="/img/docs/v43/heatmap_scheme.png" caption="Color spectrum" >}}
The color spectrum controls the mapping between value count (in each bucket) and the color assigned to each bucket.
The left most 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.
## Raw data vs aggregated
If you use the heatmap with regular time series data (not pre-bucketed). Then it's important to keep in mind that your data
is often already aggregated by your time series backend. Most time series queries do not return raw sample data
but include a group by time interval or maxDataPoints limit coupled with an aggregation function (usually average).
This all depends on the time range of your query of course. But the important point is to know that the Histogram bucketing
that Grafana performs may be done on already aggregated and averaged data. To get more accurate heatmaps it is better
to do the bucketing during metric collection or store the data in Elasticsearch, or in the other data source which
supports doing Histogram bucketing on the raw data.
If you remove or lower the group by time (or raise maxDataPoints) in your query to return more data points your heatmap will be
more accurate but this can also be very CPU and Memory taxing for your browser and could cause hangs and crashes if the number of
data points becomes unreasonably large.
docs/sources/features/panels/logs.md
-38
View File
@@ -1,38 +0,0 @@
+++
title = "Logs Panel"
keywords = ["grafana", "dashboard", "documentation", "panels", "logs panel"]
type = "docs"
aliases = ["/docs/grafana/latest/reference/logs/"]
[menu.docs]
name = "Logs"
parent = "panels"
weight = 4
+++
# Logs Panel
<img class="screenshot" src="/img/docs/v64/logs-panel.png">
> Logs panel is only available in Grafana v6.4+
The logs panel shows log lines from datasources that support logs, e.g., Elastic, Influx, and Loki.
Typically you would use this panel next to a graph panel to display the log output of a related process.
## Querying Data
The logs panel will show the result of queries that are specified in the **Queries** tab.
The results of multiple queries will be merged and sorted by time.
Note that you can scroll inside the panel in case the datasource returns more lines than can be displayed at any one time.
### Query Options
To limit the number of lines rendered, you can use the queries-wide **Max data points** setting. If it is not set, the datasource will usually enforce a limit.
## Visualization options
1. **Time**: Show/hide the time column. This is the timestamp associated with the log line as reported from the data source.
2. **Order**: Set to **Ascending** to show the oldest log lines first.
3. **Wrap lines**: The wrapped-line option is set as a default, unwrapped setting results in horizontal scrolling.
4. **Unique labels**: Show/hide the unique labels column which includes only non-common labels.
<div class="clearfix"></div>
docs/sources/features/panels/panels.md
-46
View File
@@ -1,46 +0,0 @@
+++
title = "Panel overview"
keywords = ["grafana", "panel", "documentation", "guide"]
type = "docs"
[menu.docs]
name = "Panels"
parent = "panels"
weight = 1
+++
# Panel overview
The *panel* is the basic visualization building block in Grafana. Each panel has a Query Editor specific to the data source selected in the panel. The query editor allows you to extract the perfect visualization to display on the panel.
There are a wide variety of styling and formatting options for each panel. Panels can be dragged and dropped and rearranged on the Dashboard. They can also be resized.
Panels like the [Graph]({{< relref "graph.md" >}}) panel allow you to graph as many metrics and series as you want. Other panels like [Singlestat]({{< relref "singlestat.md" >}}) require a reduction of a single query into a single number.
Panels can be made more dynamic with [Dashboard Templating]({{< relref "../../variables/templates-and-variables.md" >}}) variable strings within the panel configuration. The template can include queries to your data source configured in the Query Editor.
Panels can be [shared]({{< relref "../../reference/share_panel.md" >}}) easily in a variety of ways.
## Adding and editing graphs and panels
![](/img/docs/v45/metrics_tab.png)
1. You add panels by clicking the Add panel icon on the top menu.
1. To edit the graph you click on the graph title to open the panel menu, then `Edit`.
1. This should take you to the `Metrics` tab. In this tab you should see the editor for your default data source.
When you click the `Metrics` tab, you are presented with a Query Editor that is specific to the Panel Data Source. Use the Query Editor to build your queries and Grafana will visualize them in real time.
## Move panels
You can drag and drop panels by clicking and holding the panel title, then dragging it to its new location. You can also easily resize panels by clicking the (-) and (+) icons.
![](/img/docs/animated_gifs/drag_drop.gif)
## Tips and shortcuts
* Click the graph title and in the dropdown menu quickly change span or duplicate the panel.
* Click the Save icon in the menu to save the dashboard with a new name.
* Click the Save icon in the menu and then advanced to export the dashboard to json file, or set it as your default dashboard.
* Click the colored icon in the legend to select series color.
* Click series name in the legend to hide series.
* Ctrl/Shift/Meta + click legend name to hide other series.
docs/sources/features/panels/singlestat.md
-101
View File
@@ -1,101 +0,0 @@
+++
title = "Singlestat Panel"
keywords = ["grafana", "dashboard", "documentation", "panels", "singlestat"]
type = "docs"
aliases = ["/docs/grafana/latest/reference/singlestat/"]
[menu.docs]
name = "Singlestat"
parent = "panels"
weight = 4
+++
# Singlestat Panel
{{< docs-imagebox img="/img/docs/v45/singlestat-panel.png" class="docs-image--no-shadow" max-width="900px" >}}
The Singlestat Panel allows you to show the one main summary stat of a SINGLE series. It reduces the series into a single number (by looking at the max, min, average, or sum of values in the series). Singlestat also provides thresholds to color the stat or the Panel background. It can also translate the single number into a text value, and show a sparkline summary of the series.
### Singlestat Panel Configuration
The singlestat panel has a normal query editor to allow you define your exact metric queries like many other Panels. In the Options tab, you can access the Singlestat-specific functionality.
{{< docs-imagebox img="/img/docs/v45/singlestat-value-options.png" class="docs-image--no-shadow" max-width="900px" >}}
1. **Stats**: The Stats field let you set the function (min, max, average, current, total, first, delta, range) that your entire query is reduced into a single value with. This reduces the entire query into a single summary value that is displayed.
* **min** - The smallest value in the series
* **max** - The largest value in the series
* **avg** - The average of all the non-null values in the series
* **current** - The last value in the series. If the series ends on null the previous value will be used.
* **total** - The sum of all the non-null values in the series
* **first** - The first value in the series
* **delta** - The total incremental increase (of a counter) in the series. An attempt is made to account for counter resets, but this will only be accurate for single instance metrics. Used to show total counter increase in time series.
* **diff** - The difference between 'current' (last value) and 'first'.
* **range** - The difference between 'min' and 'max'. Useful to show the range of change for a gauge.
2. **Prefix/Postfix**: The Prefix/Postfix fields let you define a custom label to appear *before/after* the value. The `$__name` variable can be used here to use the series name or alias from the metric query.
3. **Units**: Units are appended to the Singlestat within the panel, and will respect the color and threshold settings for the value.
4. **Decimals**: The Decimal field allows you to override the automatic decimal precision, and set it explicitly.
5. **Font Size**: You can use this section to select the font size of the different texts in the Singlestat Panel, i.e. prefix, value and postfix.
### Coloring
The coloring options of the Singlestat Panel config allow you to dynamically change the colors based on the Singlestat value.
{{< docs-imagebox img="/img/docs/v45/singlestat-color-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}}
1. **Background**: This checkbox applies the configured thresholds and colors to the entirety of the Singlestat Panel background.
2. **Thresholds**: Change the background and value colors dynamically within the panel, depending on the Singlestat value. The threshold field accepts **2 comma-separated** values which represent 3 ranges that correspond to the three colors directly to the right. For example: if the thresholds are 70, 90 then the first color represents < 70, the second color represents between 70 and 90 and the third color represents > 90.
3. **Colors**: Select a color and opacity
4. **Value**: This checkbox applies the configured thresholds and colors to the summary stat.
5. **Invert order**: This link toggles the threshold color order.</br>For example: Green, Orange, Red (<img class="no-shadow" src="/img/docs/v1/gyr.png">) will become Red, Orange, Green (<img class="no-shadow" src="/img/docs/v1/ryg.png">).
### Spark Lines
Sparklines are a great way of seeing the historical data related to the summary stat, providing valuable context at a glance. Sparklines act differently than traditional Graph Panels and do not include x or y axis, coordinates, a legend, or ability to interact with the graph.
{{< docs-imagebox img="/img/docs/v45/singlestat-spark-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}}
1. **Show**: The show checkbox will toggle whether the spark line is shown in the Panel. When unselected, only the Singlestat value will appear.
2. **Full Height**: Check if you want the sparklines to take up the full panel height, or uncheck if they should be below the main Singlestat value.
3. **Y-Min**: The minimum Y value. (default auto)
4. **Y-Max**: The maximum Y value. (default auto)
5. **Line Color**: This color selection applies to the color of the sparkline itself.
6. **Fill Color**: This color selection applies to the area below the sparkline.
<div class="clearfix"></div>
> ***Pro-tip:*** Reduce the opacity on fill colors for nice looking panels.
### Value/Range to text mapping
{{< docs-imagebox img="/img/docs/v45/singlestat-value-mapping.png" class="docs-image--right docs-image--no-shadow">}}
Value/Range to text mapping allows you to translate the value of the summary stat into explicit text. The text will respect all styling, thresholds and customization defined for the value. This can be useful to translate the number of the main Singlestat value into a context-specific human-readable word or message.
If you want to replace the default "No data" text being displayed when no data is available, add a `value to text mapping` from `null` to your preferred custom text value.
<div class="clearfix"></div>
## Troubleshooting
### Multiple Series Error
{{< docs-imagebox img="/img/docs/v45/singelstat-multiple-series-error.png" class="docs-image--right docs-image--no-shadow">}}
Grafana 2.5 introduced stricter checking for multiple-series on singlestat panels. In previous versions, the panel logic did not verify that only a single series was used, and instead, displayed the first series encountered. Depending on your data source, this could have lead to inconsistent data being shown and/or a general confusion about which metric was being displayed.
To fix your singlestat panel:
- Edit your panel by clicking the Panel Title and selecting *Edit*.
- Do you have multiple queries in the metrics tab?
- Solution: Select a single query to visualize. You can toggle whether a query is visualized by clicking the eye icon on each line. If the error persists, continue to the next solution.
- Do you have one query?
- Solution: This likely means your query is returning multiple series. You will want to reduce this down to a single series. This can be accomplished in many ways, depending on your data source. Some common practices include summing the series, averaging or any number of other functions. Consult the documentation for your data source for additional information.
### Gauge
The Gauge feature in this panel is deprecated, please use the new [Gauge panel]({{< relref
"../../features/panels/gauge.md" >}}) instead.
docs/sources/features/panels/stat.md
-79
View File
@@ -1,79 +0,0 @@
+++
draft = "false"
date = "2020-02-19"
title = "Stat panel"
description = "Stat panel documentation"
keywords = ["grafana", "docs", "stat panel"]
type = "docs"
+++
# Stat panel
{{< docs-imagebox img="/img/docs/v66/stat_panel_dark3.png" max-width="1025px" caption="Stat panel" >}}
The stat panel is designed to show a big single stat value with an optional graph sparkline. You can control
background or value color using thresholds.
## Display options
* Show
* `Calculation` - Show a calculated value like min or max based on all rows.
* `All values` - Show a separate stat for every row.
* Calc
* Specify calculation / reducer function. Since this panel is designed to only show a single value Grafana needs to
know how to reduce a field's many values to a single value.
* Orientation
* If your query returns multiple series or you have set **Show** to `All values` then the visualization will repeat for every series or row. This orientation option will control in what direction it will repeat.
* Color
* `Value` - Color the value and graph area only.
* `Background` - Color the background.
* Graph
* `None` - Disable the graph / sparkline
* `Area graph` - Show area graph below value. This requires that your query returns a time column.
* Justify
* `Auto` - If only a single value is shown (no repeat) the value is centered. If multiple series or rows the value is
* left aligned.
* `Center` - Force center alignment.
### Auto layout
The panel will try to auto adjust layout depending on width & height. The graph will also hide if the panel becomes
too small.
Example of stacked layout where graph is automatically hidden due to each stat being too small:
{{< docs-imagebox img="/img/docs/v66/stat_panel_stacked.png" max-width="405px" caption="Stat panel" >}}
### Color mode
Example of value color mode:
{{< docs-imagebox img="/img/docs/v66/stat_panel_dark4.png" max-width="900px" caption="Stat panel" >}}
### Field
* `Title` - When multiple stats are shown this field controls the title in each stat. By default this is the series name
and field name. You can use expressions like `${__series.name}` or `${__field.name}` to use only series name or field
name in title or `${__cell_2}` to refer to other fields (2 being field/column with index 2).
* `Min` - The minimum value, leave blank for auto calculation based on all series & fields. Used by graph/sparkline
* (when enabled) to set y-axis min.
* `Max` - The maximum value, leave blank for auto calculation based on all series & fields. Used by graph/sparkline
* (when enabled) to set y-axis max.
* `Decimals` - Number of decimals to render value with. Leave empty for Grafana to automatically figure out the best
number of decimals to use.
### Thresholds
Define thresholds that will set the color of either the value or the background depending on your `Color` display option. The
thresholds are automatically sorted from lowest value to highest. The `Base` value represents minus infinity.
### Value mappings
Map a number or a range of numbers to a text value.
### Data links
Data links allow you add dynamic URL links to your visualizations, [read more on data links]({{< relref "../../reference/datalinks.md" >}}).
docs/sources/features/panels/table_panel.md
-152
View File
@@ -1,152 +0,0 @@
+++
title = "Table Panel"
keywords = ["grafana", "dashboard", "documentation", "panels", "table panel"]
type = "docs"
aliases = ["/docs/grafana/latest/reference/table/"]
[menu.docs]
name = "Table"
parent = "panels"
weight = 4
+++
# Table Panel
<img class="screenshot" src="/assets/img/features/table-panel.png">
The table panel is very flexible, supporting both multiple modes for time series as well as for
table, annotation and raw JSON data. It also provides date formatting and value formatting and coloring options.
To view table panels in action and test different configurations with sample data, check out the [Table Panel Showcase in the Grafana Playground](https://play.grafana.org/dashboard/db/table-panel-showcase).
## Querying Data
The table panel displays the results of a query specified in the **Metrics** tab.
The result being displayed depends on the data source and the query, but generally there is one row per datapoint, with extra columns for associated keys and values, as well as one column for the numeric value of the datapoint.
You can change the behavior in the section **Data to Table** below.
### Merge Multiple Queries per Table
> Only available in Grafana v5.0+.
Sometimes it is useful to display the results of multiple queries in the same table on corresponding rows, e.g., when comparing capacity and actual usage of resources.
In this example usage and capacity are metrics that will have corresponding datapoints, while their associated keys and values can be used to match them.
(This matching is only available with the **Table Transform** set to **Table**.)
In its simplest case, both queries return time-series data with a numeric value and a timestamp.
If the timestamps are the same, datapoints will be matched and rendered on the same row.
Some data sources return keys and values (labels, tags) associated with the datapoint.
These are being matched as well if they are present in both results and have the same value.
The following datapoints will end up on the same row with one time column, two label columns ("host" and "job") and two value columns:
```
Datapoint for query A: {time: 1, host: "node-2", job: "job-8", value: 3}
Datapoint for query B: {time: 1, host: "node-2", value: 4}
```
The following two results cannot be matched and will be rendered on separate rows:
```
Different time
Datapoint for query A: {time: 1, host: "node-2", job: "job-8", value: 3}
Datapoint for query B: {time: 2, host: "node-2", value: 4}
Different label "host"
Datapoint for query A: {time: 1, host: "node-2", job: "job-8", value: 3}
Datapoint for query B: {time: 1, host: "node-9", value: 4}
```
You can still merge both of the above cases by changing the conflicting column's **Type** to **hidden** in the **Column Styles**.
Note that if each datapoint of your query results have multiple value fields like max, min, mean, etc., they will likely have different values and therefore will not match and render on separate rows.
If you intend for rows to be merged but see them rendered on separate rows, check the query results in the **Query Inspector** for field values being identical across datapoints that should be merged into a row.
## Options overview
The table panel has many ways to manipulate your data for optimal presentation.
{{< docs-imagebox img="/img/docs/v45/table_options.png" class="docs-image--no-shadow" max-width= "500px" >}}
1. **Data**: Control how your query is transformed into a table.
2. **Paging**: Table display options.
## Data to Table
{{< docs-imagebox img="/img/docs/v45/table_data_options.png" max-width="500px" class="docs-image--right">}}
The data section contains the **To Table Transform (1)**. This is the primary option for how your data/metric
query should be transformed into a table format. The **Columns (2)** option allows you to select what columns
you want in the table. Only applicable for some transforms.
<div class="clearfix"></div>
### Time series to rows
{{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png" >}}
In the most simple mode you can turn time series to rows. This means you get a **Time**, **Metric** and a **Value** column. Where **Metric** is the name of the time series.
### Time series to columns
{{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" >}}
This transform allows you to take multiple time series and group them by time. Which will result in the primary column being **Time** and a column for each time series.
### Time series aggregations
{{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" >}}
This table transformation will lay out your table into rows by metric, allowing columns of **Avg**, **Min**, **Max**, **Total**, **Current** and **Count**. More than one column can be added.
### Annotations
{{< docs-imagebox img="/img/docs/v45/table_annotations.png" >}}
If you have annotations enabled in the dashboard you can have the table show them. If you configure this
mode then any queries you have in the metrics tab will be ignored.
### JSON Data
{{< docs-imagebox img="/img/docs/v45/table_json_data.png" max-width="500px" >}}
If you have an Elasticsearch **Raw Document** query or an Elasticsearch query without a **date histogram** use this
transform mode and pick the columns using the **Columns** section.
{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" >}}
## Table Display
{{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow docs-image--right" max-width="350px" >}}
1. **Rows Per Page**: The table display fields allow you to control how many rows per page there should be. For example, if your table had 95 records with a rows per page value of 10, your table would be split across 10 pages.
2. **Scroll**: The scroll bar checkbox toggles the ability to scroll within the panel, when unchecked, the panel height will grow to display all rows.
3. **Font Size**: The font size field allows you to increase or decrease the size for the panel, relative to the default font size.
## Column Styles
The column styles allow you control how dates and numbers are formatted.
{{< docs-imagebox img="/img/docs/v45/table_column_styles.png" class="docs-image--no-shadow" >}}
1. **Name or regex**: The Name or Regex field controls what columns the rule should be applied to. The regex or name filter will be matched against the column name not against column values.
2. **Column Header**: Title for the column, when using a Regex the title can include replacement strings like `$1`.
3. **Add column style rule**: Add new column rule.
4. **Thresholds and Coloring**: Specify color mode and thresholds limits.
5. **Type**: The three supported types of types are **Number**, **String** and **Date**. **Unit** and **Decimals**: Specify unit and decimal precision for numbers. **Format**: Specify date format for dates.
### String
#### Value/Range to text mapping
> Only available in Grafana v5.1+.
{{< docs-imagebox img="/img/docs/v51/table-value-mapping.png" class="docs-image--right docs-image--no-shadow">}}
Value/range to text mapping allows you to translate numeric values into explicit text. The text will respect all styling, thresholds and customization defined for the value. This can be useful to translate the numeric values into a context-specific human-readable word or message.
<div class="clearfix"></div>