PackageJson: Prettify markdown/mdx on commit with lint-staged (#37616)
* Format md,mdx files with prettier on lint-staged * Manually run prettier on docs/sources
This commit is contained in:
Connor Lindsey
@@ -5,34 +5,35 @@ weight = 420
|
||||
|
||||
# Visualization panels
|
||||
|
||||
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 panels, their options and typical usage.
|
||||
|
||||
* Graphs & charts
|
||||
* [Time series]({{< relref "./time-series/_index.md" >}}) is the default and main Graph visualization.
|
||||
* [State timeline]({{< relref "./state-timeline.md" >}}) for state changes over time.
|
||||
* [Status history]({{< relref "./status-history.md" >}}) for periodic state over time.
|
||||
* [Bar chart]({{< relref "./bar-chart.md" >}}) shows any categorical data.
|
||||
* [Histogram]({{< relref "./histogram.md" >}}) calculates and shows value distribution in a bar chart.
|
||||
* [Heatmap]({{< relref "./heatmap.md" >}}).
|
||||
* [Pie chart]({{< relref "./pie-chart-panel.md" >}}).
|
||||
* Stats & numbers
|
||||
* [Stat]({{< relref "./stat-panel.md" >}}) for big stats and optional sparkline.
|
||||
* [Gauge]({{< relref "./gauge-panel.md" >}}) is a normal radial gauge.
|
||||
* [Bar gauge]({{< relref "./bar-gauge-panel.md" >}}) is a horizontal or vertical bar gauge.
|
||||
* Misc
|
||||
* [Table]({{< relref "./table/_index.md" >}}) is the main and only table visualization.
|
||||
* [Logs]({{< relref "./logs-panel.md" >}}) is the main visualization for logs.
|
||||
* [Node Graph]({{< relref "./node-graph.md" >}}) for directed graphs or networks.
|
||||
* Widgets
|
||||
* [Dashboard list]({{< relref "./dashboard-list-panel.md" >}}) can list dashboards.
|
||||
* [Alert list]({{< relref "./alert-list-panel.md" >}}) can list alerts.
|
||||
* [Text panel]({{< relref "./alert-list-panel.md" >}}) can show markdown and html.
|
||||
* [News panel]({{< relref "./news-panel.md" >}}) can show RSS feeds.
|
||||
- Graphs & charts
|
||||
- [Time series]({{< relref "./time-series/_index.md" >}}) is the default and main Graph visualization.
|
||||
- [State timeline]({{< relref "./state-timeline.md" >}}) for state changes over time.
|
||||
- [Status history]({{< relref "./status-history.md" >}}) for periodic state over time.
|
||||
- [Bar chart]({{< relref "./bar-chart.md" >}}) shows any categorical data.
|
||||
- [Histogram]({{< relref "./histogram.md" >}}) calculates and shows value distribution in a bar chart.
|
||||
- [Heatmap]({{< relref "./heatmap.md" >}}).
|
||||
- [Pie chart]({{< relref "./pie-chart-panel.md" >}}).
|
||||
- Stats & numbers
|
||||
- [Stat]({{< relref "./stat-panel.md" >}}) for big stats and optional sparkline.
|
||||
- [Gauge]({{< relref "./gauge-panel.md" >}}) is a normal radial gauge.
|
||||
- [Bar gauge]({{< relref "./bar-gauge-panel.md" >}}) is a horizontal or vertical bar gauge.
|
||||
- Misc
|
||||
- [Table]({{< relref "./table/_index.md" >}}) is the main and only table visualization.
|
||||
- [Logs]({{< relref "./logs-panel.md" >}}) is the main visualization for logs.
|
||||
- [Node Graph]({{< relref "./node-graph.md" >}}) for directed graphs or networks.
|
||||
- Widgets
|
||||
- [Dashboard list]({{< relref "./dashboard-list-panel.md" >}}) can list dashboards.
|
||||
- [Alert list]({{< relref "./alert-list-panel.md" >}}) can list alerts.
|
||||
- [Text panel]({{< relref "./alert-list-panel.md" >}}) can show markdown and html.
|
||||
- [News panel]({{< relref "./news-panel.md" >}}) can show RSS feeds.
|
||||
|
||||
## Get more
|
||||
## Get more
|
||||
|
||||
You can add more visualization types by installing panel [panel plugins](https://grafana.com/grafana/plugins/?type=panel).
|
||||
## Examples
|
||||
|
||||
## Examples
|
||||
|
||||
Below you can find some good examples for how all the visualizations in Grafana can be configured. You can also explore [play.grafana.org](https://play.grafana.org) which has a large set of demo dashboards that showcase all the different visualizations.
|
||||
|
||||
@@ -42,7 +43,7 @@ For time based line, area and bar charts we recommend the default [Time series](
|
||||
|
||||
{{< 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.md" >}}) visualization.
|
||||
For categorical data use the [Bar chart]({{< relref "./bar-chart.md" >}}) visualization.
|
||||
|
||||
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="700px" caption="Bar chart" >}}
|
||||
|
||||
@@ -52,23 +53,23 @@ The [Stat](stat-panel/) visualization shows one large stat value with an optiona
|
||||
|
||||
{{< figure src="/static/img/docs/v66/stat_panel_dark3.png" max-width="1025px" caption="Stat panel" >}}
|
||||
|
||||
### Gauge
|
||||
### 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-panel.md" >}}) 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-panel.md" >}}) with three different distinct display modes.
|
||||
Secondly Grafana also has a horizontal or vertical [Bar gauge]({{< relref "./bar-gauge-panel.md" >}}) with three different distinct display modes.
|
||||
|
||||
{{< figure src="/static/img/docs/v66/bar_gauge_lcd.png" max-width="700px" >}}
|
||||
|
||||
### Table
|
||||
### Table
|
||||
|
||||
To show data in a table layout, use the [Table]({{< relref "./table/_index.md" >}}) visualization.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/table_visualization.png" max-width="700px" lightbox="true" caption="Table visualization" >}}
|
||||
|
||||
### Pie chart
|
||||
### Pie chart
|
||||
|
||||
Grafana now ships with an included [Pie chart]({{< relref "./pie-chart-panel.md" >}}) visualization.
|
||||
|
||||
@@ -84,4 +85,4 @@ To show value distribution over, time use the [heatmap]({{< relref "./heatmap.md
|
||||
|
||||
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" >}}
|
||||
{{< figure src="/static/img/docs/v8/state_timeline_strings.png" max-width="700px" caption="state timeline with string states" >}}
|
||||
|
||||
@@ -40,6 +40,7 @@ These options allow you to limit alerts shown to only those that match the query
|
||||
## State filter
|
||||
|
||||
Choose which alert states to display in this panel.
|
||||
|
||||
- Ok
|
||||
- Paused
|
||||
- No data
|
||||
|
||||
@@ -6,31 +6,31 @@ aliases =["/docs/grafana/latest/features/panels/anotations/"]
|
||||
weight = 600
|
||||
+++
|
||||
|
||||
# Annotations
|
||||
# Annotations
|
||||
|
||||
The Annotations panel shows a list of available annotations you can use to view annotated data. Various options are available to filter the list based on tags and on the current dashboard.
|
||||
|
||||
## Annotation query
|
||||
|
||||
The following options control the source query for the list of annotations.
|
||||
The following options control the source query for the list of annotations.
|
||||
|
||||
### Query Filter
|
||||
|
||||
Use the query filter to create a list of annotations from all dashboards in your organization or the current dashboard in which this panel is located. It has the following options:
|
||||
|
||||
* All dashboards - List annotations from all dashboards in the current organization.
|
||||
* This dashboard - Limit the list to the annotations on the current dashboard.
|
||||
- All dashboards - List annotations from all dashboards in the current organization.
|
||||
- This dashboard - Limit the list to the annotations on the current dashboard.
|
||||
|
||||
### Time Range
|
||||
|
||||
Use the time range option to specify whether the list should be limited to the current time range. It has the following options:
|
||||
|
||||
* None - no time range limit for the annotations query.
|
||||
* This dashboard - Limit the list to the time range of the dashboard where the annotation list panel is available.
|
||||
- None - no time range limit for the annotations query.
|
||||
- This dashboard - Limit the list to the time range of the dashboard where the annotation list panel is available.
|
||||
|
||||
### Tags
|
||||
|
||||
Use the tags option to filter the annotations by tags. You can add multiple tags in order to refine the list.
|
||||
Use the tags option to filter the annotations by tags. You can add multiple tags in order to refine the list.
|
||||
|
||||
> **Note:** Optionally, leave the tag list empty and filter on the fly by selecting tags that are listed as part of the results on the panel itself.
|
||||
|
||||
@@ -40,11 +40,11 @@ Use the limit option to limit the number of results returned.
|
||||
|
||||
## Display
|
||||
|
||||
These options control additional meta-data included in the annotations panel display.
|
||||
These options control additional meta-data included in the annotations panel display.
|
||||
|
||||
### Show user
|
||||
|
||||
Use this option to show or hide which user created the annotation.
|
||||
Use this option to show or hide which user created the annotation.
|
||||
|
||||
### Show time
|
||||
|
||||
@@ -52,7 +52,7 @@ Use this option to show or hide the time the annotation creation time.
|
||||
|
||||
### Show Tags
|
||||
|
||||
Use this option to show or hide the tags associated with an annotation. *NB*: You can use the tags to live-filter the annotation list on the panel itself.
|
||||
Use this option to show or hide the tags associated with an annotation. _NB_: You can use the tags to live-filter the annotation list on the panel itself.
|
||||
|
||||
## Link behavior
|
||||
|
||||
@@ -60,12 +60,12 @@ Use this option to show or hide the tags associated with an annotation. *NB*: Yo
|
||||
|
||||
Use this option to chose how to view the annotated data. It has the following options.
|
||||
|
||||
* Panel - This option will take you directly to a full-screen view of the panel with the corresponding annotation
|
||||
* Dashboard - This option will focus the annotation in the context of a complete dashboard
|
||||
- Panel - This option will take you directly to a full-screen view of the panel with the corresponding annotation
|
||||
- Dashboard - This option will focus the annotation in the context of a complete dashboard
|
||||
|
||||
### Time before
|
||||
|
||||
Use this option to set the time range before the annotation. Use duration string values like "1h" = 1 hour, "10m" = 10 minutes, etc.
|
||||
Use this option to set the time range before the annotation. Use duration string values like "1h" = 1 hour, "10m" = 10 minutes, etc.
|
||||
|
||||
### Time after
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ weight = 170
|
||||
This panel visualization allows you to graph categorical data.
|
||||
|
||||
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="1000px" caption="Bar chart" >}}
|
||||
|
||||
## Supported data formats
|
||||
|
||||
Only one data frame is supported and it needs to have at least one string field that will be used as the category for an X or Y axis and one or more numerical fields.
|
||||
@@ -25,8 +26,8 @@ If you have more than one numerical field the panel will show grouped bars.
|
||||
|
||||
### Visualizing time series or multiple result sets
|
||||
|
||||
If you have multiple time series or tables you first need to join them using a join or reduce transform. For example if you
|
||||
have multiple time series and you want to compare their last and max value add the **Reduce** transform and specify **Max** and **Last** as options under **Calculations**.
|
||||
If you have multiple time series or tables you first need to join them using a join or reduce transform. For example if you
|
||||
have multiple time series and you want to compare their last and max value add the **Reduce** transform and specify **Max** and **Last** as options under **Calculations**.
|
||||
|
||||
{{< figure src="/static/img/docs/bar-chart-panel/bar-chart-time-series-v8-0.png" max-width="1025px" caption="Bar chart time series example" >}}
|
||||
|
||||
@@ -46,7 +47,7 @@ This controls whether values are shown on top or to the left of bars.
|
||||
|
||||
- **Auto** Values will be shown if there is space
|
||||
- **Always** Always show values.
|
||||
- **Never** Never show values.
|
||||
- **Never** Never show values.
|
||||
|
||||
### Group width
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ Use the following options to refine how your visualization displays the value:
|
||||
### Show
|
||||
|
||||
Choose how Grafana displays your data.
|
||||
|
||||
|
||||
#### Calculate
|
||||
|
||||
Show a calculated value based on all rows.
|
||||
|
||||
@@ -29,6 +29,6 @@ These options only apply if the **Search** option is selected.
|
||||
|
||||
- **Query -** Enter the query you want to search by. Queries are case-insensitive, and partial values are accepted.
|
||||
- **Folder -** Select the dashboard folders that you want to display.
|
||||
- **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.
|
||||
- **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.
|
||||
|
||||
@@ -19,7 +19,7 @@ Use the following options to refine how your visualization displays the value:
|
||||
### Show
|
||||
|
||||
Choose how Grafana displays your data.
|
||||
|
||||
|
||||
#### Calculate
|
||||
|
||||
Show a calculated value based on all rows.
|
||||
@@ -46,4 +46,4 @@ Adjust how the gauge is displayed.
|
||||
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.
|
||||
- **Value -** Enter a numeric value for the gauge value size.
|
||||
|
||||
@@ -24,7 +24,7 @@ You can configure the default base map using config files with Grafana’s provi
|
||||
|
||||
Use the JSON configuration option `default_baselayer_config` to define the default base map. There are currently four base map options to choose from: `carto`, `esri-xyz`, `osm-standard`, `xyz`. Here are some provisioning examples for each base map option.
|
||||
|
||||
- **carto** loads the CartoDB tile server. You can choose from `auto`, `dark`, and `light` theme for the base map and can be set as shown below. The `showLabels` tag determines whether or not Grafana shows the Country details on top of the map. Here is an example:
|
||||
- **carto** loads the CartoDB tile server. You can choose from `auto`, `dark`, and `light` theme for the base map and can be set as shown below. The `showLabels` tag determines whether or not Grafana shows the Country details on top of the map. Here is an example:
|
||||
|
||||
```ini
|
||||
geomap_default_baselayer = `{
|
||||
@@ -48,7 +48,7 @@ geomap_default_baselayer = `{
|
||||
```
|
||||
|
||||
```ini
|
||||
geomap_default_baselayer = `{
|
||||
geomap_default_baselayer = `{
|
||||
"type": "esri-xyz",
|
||||
"config": {
|
||||
"server": "custom",
|
||||
@@ -67,7 +67,7 @@ default_baselayer_config = `{
|
||||
}`
|
||||
```
|
||||
|
||||
- **xyz** loads a custom tile server defined by the user. Set a valid tile server `url`, with {z}/{x}/{y} for this option in order to properly load a default base map. Here is an example:
|
||||
- **xyz** loads a custom tile server defined by the user. Set a valid tile server `url`, with {z}/{x}/{y} for this option in order to properly load a default base map. Here is an example:
|
||||
|
||||
```ini
|
||||
default_baselayer_config = `{
|
||||
@@ -86,6 +86,7 @@ default_baselayer_config = `{
|
||||
The data layer in the Geomap plugin determines how you visualize geospatial data on top of the base map.
|
||||
|
||||
### Location
|
||||
|
||||
The Geomap panel needs a source of geographical data. This data comes from a database query, and there are four mapping options for your data.
|
||||
|
||||
- **Auto** automatically searches for location data. Use this option when your query is based on one of the following names for data fields.
|
||||
@@ -107,7 +108,7 @@ The markers layer allows you to display data points as different marker shapes s
|
||||
|
||||
- **Marker Color** configures the color of the marker. The default `Fixed size` keeps all points a single color. There is an alternate option to have multiple colors depending on the data point values and the threshold set at the `Thresholds` section.
|
||||
- **Marker Size** configures the size of the marker. Default is `Fixed size`, making all marker size the same regardless of the data points. However, there is also an option to scale the circles to the corresponding data points. `Min` and `Max` marker size has to be set such that the Marker layer can scale within these range.
|
||||
- **Marker Shape** provides you with the flexibility to visualize the data points differently.
|
||||
- **Marker Shape** provides you with the flexibility to visualize the data points differently.
|
||||
- Circle
|
||||
- Square
|
||||
- Triangle
|
||||
@@ -118,7 +119,7 @@ The markers layer allows you to display data points as different marker shapes s
|
||||
|
||||
### Heatmap layer
|
||||
|
||||
The heatmap layer clusters various data points to visualize locations with different densities.
|
||||
The heatmap layer clusters various data points to visualize locations with different densities.
|
||||
To add a heatmap layer:
|
||||
|
||||
Click on the drop down menu under Data Layer and choose `Heatmap`.
|
||||
@@ -131,4 +132,4 @@ Similar to `Markers`, you are prompted with various options to determine which d
|
||||
|
||||
- **Weight values** configures the intensity of the heatmap clusters. `Fixed value` keeps a constant weight value throughout all data points. This value should be in the range of 0~1. Similar to Markers, there is an alternate option in the drop down to automatically scale the weight values depending on data values.
|
||||
- **Radius** configures the size of the heatmap clusters.
|
||||
- **Blur** configures the amount of blur on each cluster.
|
||||
- **Blur** configures the amount of blur on each cluster.
|
||||
|
||||
@@ -41,7 +41,7 @@ Use these settings to refine your visualization.
|
||||
- **Null value -** How null values are displayed. _This is a very important setting._ See note below.
|
||||
- **connected -** If there is a gap in the series, meaning a null value or values, then the line will skip the gap and connect to the next non-null value.
|
||||
- **null -** (default) If there is a gap in the series, meaning a null value, then the line in the graph will be broken and show the gap.
|
||||
- **null as zero -** If there is a gap in the series, meaning a null value, then it will be displayed as a zero value in the graph panel.
|
||||
- **null as zero -** If there is a gap in the series, meaning a null value, then it will be displayed as a zero value in the graph panel.
|
||||
|
||||
> **Note:** If you are monitoring a server's CPU load and the load reaches 100%, then the server will lock up and the agent sending statistics will not be able to collect the load statistic. This leads to a gap in the metrics and having the default as _null_ means Grafana will show the gaps and indicate that something is wrong. If this is set to _connected_, then it would be easy to miss this signal.
|
||||
|
||||
@@ -68,30 +68,31 @@ You can add multiple series overrides.
|
||||
1. Click **Add series override**.
|
||||
1. In **Alias or regex** Type or select a series. Click in the field to see a list of available series.
|
||||
|
||||
**Example:** `/Network.*/` would match two series named `Network out` and `Network in`.
|
||||
**Example:** `/Network.*/` would match two series named `Network out` and `Network in`.
|
||||
|
||||
1. Click **+** and then select a style to apply to the series. You can add multiple styles to each entry.
|
||||
- **Bars -** Show series as a bar graph.
|
||||
- **Lines -** Show series as line graph.
|
||||
- **Line fill -** Show line graph with area fill.
|
||||
- **Fill gradient -** Area fill gradient amount.
|
||||
- **Line width -** Set line width.
|
||||
- **Null point mode -** Option to ignore null values or replace with zero. Important if you want to ignore gaps in your data.
|
||||
- **Fill below to -** Fill area between two series.
|
||||
- **Staircase line -** Show series as a staircase line.
|
||||
- **Dashes -** Show line with dashes.
|
||||
- **Hidden Series -** Hide the series.
|
||||
- **Dash Length -** Dashed line length.
|
||||
- **Dash Space -** Dashed line spacing.
|
||||
- **Points -** Show series as separate points.
|
||||
- **Point Radius -** Radius for point rendering.
|
||||
- **Stack -** Set stack group for series.
|
||||
- **Color -** Set series color.
|
||||
- **Y-axis -** Set series y-axis.
|
||||
- **Z-index -** Set series z-index (rendering order). Important when overlaying different styles (bar charts, area charts).
|
||||
- **Transform -** Transform value to negative to render below the y-axis.
|
||||
- **Legend -** Control if a series is shown in legend.
|
||||
- **Hide in tooltip -** Control if a series is shown in graph tooltip.
|
||||
|
||||
- **Bars -** Show series as a bar graph.
|
||||
- **Lines -** Show series as line graph.
|
||||
- **Line fill -** Show line graph with area fill.
|
||||
- **Fill gradient -** Area fill gradient amount.
|
||||
- **Line width -** Set line width.
|
||||
- **Null point mode -** Option to ignore null values or replace with zero. Important if you want to ignore gaps in your data.
|
||||
- **Fill below to -** Fill area between two series.
|
||||
- **Staircase line -** Show series as a staircase line.
|
||||
- **Dashes -** Show line with dashes.
|
||||
- **Hidden Series -** Hide the series.
|
||||
- **Dash Length -** Dashed line length.
|
||||
- **Dash Space -** Dashed line spacing.
|
||||
- **Points -** Show series as separate points.
|
||||
- **Point Radius -** Radius for point rendering.
|
||||
- **Stack -** Set stack group for series.
|
||||
- **Color -** Set series color.
|
||||
- **Y-axis -** Set series y-axis.
|
||||
- **Z-index -** Set series z-index (rendering order). Important when overlaying different styles (bar charts, area charts).
|
||||
- **Transform -** Transform value to negative to render below the y-axis.
|
||||
- **Legend -** Control if a series is shown in legend.
|
||||
- **Hide in tooltip -** Control if a series is shown in graph tooltip.
|
||||
|
||||
## Axes
|
||||
|
||||
@@ -110,6 +111,7 @@ Options are identical for both Y-axes.
|
||||
- **Label -** The Y axis label. (default “")
|
||||
|
||||
### Y-Axes
|
||||
|
||||
- **Align -** Select to align left and right Y-axes by value. (default unchecked/false)
|
||||
- **Level -** Available when **Align** is selected. Value to use for alignment of left and right Y-axes, starting from Y=0. (default 0)
|
||||
|
||||
@@ -117,12 +119,14 @@ Options are identical for both Y-axes.
|
||||
|
||||
- **Show -** Click to show or hide the axis.
|
||||
- **Mode -** The display mode completely changes the visualization of the graph panel. It's like three panels in one. The main mode is the time series mode with time on the X-axis. The other two modes are a basic bar chart mode with series on the X-axis instead of time and a histogram mode.
|
||||
|
||||
- **Time -** (default) The X-axis represents time and that the data is grouped by time (for example, by hour, or by minute).
|
||||
- **Series -** The data is grouped by series and not by time. The Y-axis still represents the value.
|
||||
- **Value -** The aggregation type to use for the values. The default is total (summing the values together).
|
||||
- **Value -** The aggregation type to use for the values. The default is total (summing the values together).
|
||||
- **Histogram -** 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.
|
||||
|
||||
For more information about histograms, refer to [Introduction to histograms and heatmaps]({{< relref "../../basics/intro-histograms.md" >}}).
|
||||
|
||||
- **Buckets -** The number of buckets to group the values by. If left empty, then Grafana tries to calculate a suitable number of buckets.
|
||||
- **X-Min -** Filters out values from the histogram that are under this minimum limit.
|
||||
- **X-Max -** Filters out values that are greater than this maximum limit.
|
||||
|
||||
@@ -50,6 +50,7 @@ The Bucket count and size options are used by Grafana to calculate how big each
|
||||
#### Data format
|
||||
|
||||
Choose an option in the **Format** list.
|
||||
|
||||
- **Time series -** Grafana does the bucketing by going through all time series values. The bucket sizes and intervals are set in 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.
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ weight = 850
|
||||
|
||||
The _Node graph_ can visualize directed graphs or networks. It uses a directed force layout to effectively position the nodes, so it can display complex infrastructure maps, hierarchies, or execution diagrams.
|
||||
|
||||
|
||||
|
||||
|
||||
## Data requirements
|
||||
|
||||
@@ -31,7 +31,7 @@ Usually, nodes show two statistical values inside the node and two identifiers j
|
||||
|
||||
For example, you can have the percentage of errors represented by a red portion of the circle. Additional details can be displayed in a context menu which is displayed when you click on the node. There also can be additional links in the context menu that can target either other parts of Grafana or any external link.
|
||||
|
||||
|
||||
|
||||
|
||||
### Edges
|
||||
|
||||
@@ -55,21 +55,21 @@ Use the buttons in the upper left corner or use the mouse wheel, touchpad scroll
|
||||
|
||||
The number of nodes shown at a given time is limited to maintain a reasonable visualization performance. Nodes that are not currently visible are hidden behind clickable markers that show an approximate number of hidden nodes that are connected by a particular edge. You can click on the marker to expand the graph around that node.
|
||||
|
||||
|
||||
|
||||
|
||||
### Grid view
|
||||
|
||||
You can switch to the grid view to have a better overview of the most interesting nodes in the graph. Grid view shows nodes in a grid without edges and can be sorted by stats shown inside the node or by stats represented by the a colored border of the nodes.
|
||||
|
||||
|
||||
|
||||
|
||||
To sort the nodes, click on the stats inside the legend. The marker next to the stat name shows which stat is currently used for sorting and sorting direction.
|
||||
|
||||
|
||||
|
||||
|
||||
Click on the node and select "Show in Graph layout" option to switch back to graph layout and focus on the selected node, to show it in context of the full graph.
|
||||
|
||||
|
||||
|
||||
|
||||
## Data API
|
||||
|
||||
@@ -81,35 +81,35 @@ Data source needs to return two data frames, one for nodes and one for edges, an
|
||||
|
||||
Required fields:
|
||||
|
||||
| Field name | Type | Description |
|
||||
|------------|---------|-------------|
|
||||
| id | string | Unique identifier of the node. This ID is referenced by edge in it's source and target field. |
|
||||
| Field name | Type | Description |
|
||||
| ---------- | ------ | --------------------------------------------------------------------------------------------- |
|
||||
| id | string | Unique identifier of the node. This ID is referenced by edge in it's source and target field. |
|
||||
|
||||
Optional fields:
|
||||
|
||||
| Field name | Type | Description |
|
||||
|------------|---------|-------------|
|
||||
| title | string | Name of the node visible in just under the node. |
|
||||
| subTitle | string | Additional, name, type or other identifier that will be shown right under the title. |
|
||||
| mainStat | string/number | First stat shown inside the node itself. Can be either string in which case the value will be shown as it is or it can be a number in which case any unit associated with that field will be also shown. |
|
||||
| secondaryStat | string/number | Same as mainStat but shown right under it inside the node. |
|
||||
| arc__* | number | Any field prefixed with `arc__` will be used to create the color circle around the node. All values in these fields should add up to 1. You can specify color using `config.color.fixedColor`. |
|
||||
| detail__* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the node. Use `config.displayName` for more human readable label. |
|
||||
| Field name | Type | Description |
|
||||
| ------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| title | string | Name of the node visible in just under the node. |
|
||||
| subTitle | string | Additional, name, type or other identifier that will be shown right under the title. |
|
||||
| mainStat | string/number | First stat shown inside the node itself. Can be either string in which case the value will be shown as it is or it can be a number in which case any unit associated with that field will be also shown. |
|
||||
| secondaryStat | string/number | Same as mainStat but shown right under it inside the node. |
|
||||
| arc\_\_\* | number | Any field prefixed with `arc__` will be used to create the color circle around the node. All values in these fields should add up to 1. You can specify color using `config.color.fixedColor`. |
|
||||
| detail\_\_\* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the node. Use `config.displayName` for more human readable label. |
|
||||
|
||||
### Edge parameters
|
||||
|
||||
Required fields:
|
||||
|
||||
| Field name | Type | Description |
|
||||
|------------|---------|-------------|
|
||||
| id | string | Unique identifier of the edge. |
|
||||
| source | string | Id of the source node. |
|
||||
| target | string | Id of the target. |
|
||||
| Field name | Type | Description |
|
||||
| ---------- | ------ | ------------------------------ |
|
||||
| id | string | Unique identifier of the edge. |
|
||||
| source | string | Id of the source node. |
|
||||
| target | string | Id of the target. |
|
||||
|
||||
Optional fields:
|
||||
|
||||
| Field name | Type | Description |
|
||||
|------------|---------|-------------|
|
||||
| mainStat | string/number | First stat shown in the overlay when hovering over the edge. Can be either string in which case the value will be shown as it is or it can be a number in which case any unit associated with that field will be also shown |
|
||||
| secondaryStat | string/number | Same as mainStat but shown right under it. |
|
||||
| detail__* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the edge. Use `config.displayName` for more human readable label. |
|
||||
| Field name | Type | Description |
|
||||
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| mainStat | string/number | First stat shown in the overlay when hovering over the edge. Can be either string in which case the value will be shown as it is or it can be a number in which case any unit associated with that field will be also shown |
|
||||
| secondaryStat | string/number | Same as mainStat but shown right under it. |
|
||||
| detail\_\_\* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the edge. Use `config.displayName` for more human readable label. |
|
||||
|
||||
@@ -36,7 +36,7 @@ Use the following options to refine how your visualization displays the value:
|
||||
### Show
|
||||
|
||||
Choose how Grafana displays your data.
|
||||
|
||||
|
||||
#### Calculate
|
||||
|
||||
Show a calculated value based on all rows.
|
||||
|
||||
@@ -7,13 +7,13 @@ weight = 900
|
||||
|
||||
# Status history
|
||||
|
||||
The Status history visualization shows periodic states over time. Each field or series is rendered as a horizontal row. Boxes are rendered and centered around each value.
|
||||
The Status history visualization shows periodic states over time. Each field or series is rendered as a horizontal row. Boxes are rendered and centered around each value.
|
||||
|
||||
{{< figure src="/static/img/docs/status-history-panel/status-history-example-v8-0.png" max-width="1025px" caption="Status history example" >}}
|
||||
|
||||
## Supported data
|
||||
## Supported data
|
||||
|
||||
Status history visualization works with string, boolean and numerical fields or time series. A time field is required. You can use value mappings to color strings or assign text values to numerical ranges.
|
||||
Status history visualization works with string, boolean and numerical fields or time series. A time field is required. You can use value mappings to color strings or assign text values to numerical ranges.
|
||||
|
||||
## Display options
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ Annotations are not currently supported in the new table panel. This might be ad
|
||||
|
||||
Click a column title to change the sort order from default to descending to ascending. Each time you click, the sort order changes to the next option in the cycle. You can only sort by one column at a time.
|
||||
|
||||
|
||||
|
||||
|
||||
## Table options
|
||||
|
||||
|
||||
@@ -34,4 +34,4 @@ Columns with filters applied have a blue funnel displayed next to the title.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/filtered-column.png" max-width="500px" caption="Filtered column" class="docs-image--no-shadow" >}}
|
||||
|
||||
To remove the filter, click the blue funnel icon and then click **Clear filter**.
|
||||
To remove the filter, click the blue funnel icon and then click **Clear filter**.
|
||||
|
||||
@@ -10,7 +10,7 @@ weight = 1200
|
||||
|
||||
Time series visualization is the default and primary way to visualize time series data. It can render as a line, a path of dots, or a series of bars. It is versatile enough to display almost any time-series data. [ 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.
|
||||
|
||||
> **Note:** You can migrate Graph panel visualizations to Time series visualizations. To migrate, open the panel and then select the **Time series** visualization. Grafana transfers all applicable settings.
|
||||
> **Note:** You can migrate Graph panel visualizations to Time series visualizations. To migrate, open the panel and then select the **Time series** visualization. Grafana transfers all applicable settings.
|
||||
|
||||
## Common time series options
|
||||
|
||||
|
||||
@@ -17,13 +17,13 @@ This section explains how to create annotations in the Time series panel. To rea
|
||||
|
||||
1. Click save.
|
||||
|
||||
Alternatively, to add an annotation, Ctrl/Cmd+Click on the Time series panel and the Add annotation popover will appear
|
||||
Alternatively, to add an annotation, Ctrl/Cmd+Click on the Time series panel and the Add annotation popover will appear
|
||||
|
||||
## Add region annotation
|
||||
|
||||
1. In the dashboard Ctrl/Cmd+click and drag on the Time series panel.
|
||||
|
||||
1. Add an annotation description and tags(optional).
|
||||
1. Add an annotation description and tags(optional).
|
||||
1. Click save.
|
||||
|
||||
## Edit annotation
|
||||
@@ -39,10 +39,3 @@ Alternatively, to add an annotation, Ctrl/Cmd+Click on the Time series panel and
|
||||
1. In the dashboard hover over an annotation indicator on the Time series panel.
|
||||
|
||||
1. Click on the trash icon in the annotation tooltip.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -6,31 +6,31 @@ weight = 400
|
||||
|
||||
{{< figure src="/static/img/docs/v73/color_scheme_dropdown.png" max-width="350px" caption="Color scheme" class="pull-right" >}}
|
||||
|
||||
# Graph and color schemes
|
||||
# Graph and color schemes
|
||||
|
||||
Under [Standard options]({{< relref "../../standard-options.md" >}}) you find the [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. This option controls series are assigned their color.
|
||||
Under [Standard options]({{< relref "../../standard-options.md" >}}) you find the [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. This option controls series are assigned their color.
|
||||
|
||||
## Classic palette
|
||||
## Classic palette
|
||||
|
||||
The most common setup is to use the **Classic palette** for graphs. This scheme will automatically assign a color for each field or series based on it's order. So if the order of a field change in your query the color will also change. You can manually configure a color for a specific field using an override rule.
|
||||
The most common setup is to use the **Classic palette** for graphs. This scheme will automatically assign a color for each field or series based on it's order. So if the order of a field change in your query the color will also change. You can manually configure a color for a specific field using an override rule.
|
||||
|
||||
## Single color
|
||||
|
||||
Use this mode to set a specific color. You can also click the colored line icon next to each series in the Legend to open the color picker. This will automatically create new override that sets the color scheme to single color and the selected color.
|
||||
Use this mode to set a specific color. You can also click the colored line icon next to each series in the Legend to open the color picker. This will automatically create new override that sets the color scheme to single color and the selected color.
|
||||
|
||||
## By value color schemes
|
||||
## By value color schemes
|
||||
|
||||
> **Note:** Starting in v8.1 the Time series panel now supports by value color schemes like **From thresholds** of the gradient color schemes.
|
||||
> **Note:** Starting in v8.1 the Time series panel now supports by value color schemes like **From thresholds** of the gradient color schemes.
|
||||
|
||||
If you select a by value color scheme like **From thresholds (by value)** or **Green-Yellow-Red (by value)** another option named **Color series by** will show up. This option control what value (Last, Min, Max) to use to assign the series its color.
|
||||
If you select a by value color scheme like **From thresholds (by value)** or **Green-Yellow-Red (by value)** another option named **Color series by** will show up. This option control what value (Last, Min, Max) to use to assign the series its color.
|
||||
|
||||
## Scheme gradient mode
|
||||
|
||||
The **Gradient mode** option located under the **Graph styles** has a mode named **Scheme**. When this mode is enabled the whole line or bar gets a gradient color defined from the selected **Color scheme**.
|
||||
The **Gradient mode** option located under the **Graph styles** has a mode named **Scheme**. When this mode is enabled the whole line or bar gets a gradient color defined from the selected **Color scheme**.
|
||||
|
||||
### From thresholds
|
||||
### From thresholds
|
||||
|
||||
If the **Color scheme** is set to **From thresholds (by value)** and **Gradient mode** is set to **Scheme** then the line or bar color will change as they cross the thresholds defined.
|
||||
If the **Color scheme** is set to **From thresholds (by value)** and **Gradient mode** is set to **Scheme** then the line or bar color will change as they cross the thresholds defined.
|
||||
|
||||
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_thresholds_line.png" max-width="1200px" caption="Colors scheme: From thresholds" >}}
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@ Gradient color is generated based on the hue of the line color.
|
||||
|
||||
|
||||
|
||||
#### Scheme
|
||||
#### Scheme
|
||||
|
||||
In this mode the whole bar will use a color gradient defined by your [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
|
||||
|
||||
|
||||
@@ -104,7 +104,7 @@ Gradient color is generated based on the hue of the line color.
|
||||
|
||||
|
||||
|
||||
#### Scheme
|
||||
#### Scheme
|
||||
|
||||
In this mode the whole line will use a color gradient defined by your [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
|
||||
|
||||
@@ -152,7 +152,7 @@ Dot spacing set to 0, 30:
|
||||
|
||||
### Connect null values
|
||||
|
||||
Choose how null values (gaps in the data) are displayed on the graph. Null values can be connected to form a continuous line or, optionally, set a threshold above which gaps in the data should no longer be connected.
|
||||
Choose how null values (gaps in the data) are displayed on the graph. Null values can be connected to form a continuous line or, optionally, set a threshold above which gaps in the data should no longer be connected.
|
||||
|
||||
|
||||
|
||||
@@ -166,7 +166,7 @@ Time series data points with gaps in the the data are always connected.
|
||||
|
||||
#### Threshold
|
||||
|
||||
A threshold can be set above which gaps in the data should no longer be connected. This can be useful when the connected gaps in the data are of a known size and/or within a known range and gaps outside this range should no longer be connected.
|
||||
A threshold can be set above which gaps in the data should no longer be connected. This can be useful when the connected gaps in the data are of a known size and/or within a known range and gaps outside this range should no longer be connected.
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user