cleanup shortcodes, asset paths (#34826) (#34900)

(cherry picked from commit 327fa124a4)
This commit is contained in:
Robby Milo
2021-05-28 16:43:49 +02:00
committed by GitHub
parent e1eebdcf75
commit 5f4379a24d
133 changed files with 563 additions and 563 deletions
@@ -9,7 +9,7 @@ weight = 100
The Alert list panel allows you to display your dashboards alerts. You can configure the list to show current state or recent state changes. You can read more about alerts in [Alerts overview]({{< relref "../../alerting/_index.md" >}}).
{{< docs-imagebox img="/img/docs/v45/alert-list-panel.png" max-width="850px" >}}
{{< figure src="/static/img/docs/v45/alert-list-panel.png" max-width="850px" >}}
Use these settings to refine your visualization.
@@ -12,7 +12,7 @@ The bar gauge simplifies your data by reducing every field to a single value. Yo
This panel can show one or more bar gauges depending on how many series, rows, or columns your query returns.
{{< docs-imagebox img="/img/docs/v66/bar_gauge_cover.png" max-width="1025px" caption="Stat panel" >}}
{{< figure src="/static/img/docs/v66/bar_gauge_cover.png" max-width="1025px" caption="Stat panel" >}}
## Data and field options
@@ -9,7 +9,7 @@ weight = 300
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 dashboard tags.
{{< docs-imagebox img="/img/docs/v45/dashboard-list-panels.png" max-width="850px">}}
{{< figure src="/static/img/docs/v45/dashboard-list-panels.png" max-width="850px">}}
On each dashboard load, this panel queries the dashboard list, always providing the most up-to-date results.
@@ -10,7 +10,7 @@ weight = 400
Gauge is a single value panel that can repeat a gauge for every series, column or row.
{{< docs-imagebox img="/img/docs/v66/gauge_panel_cover.png" max-width="1025px" >}}
{{< figure src="/static/img/docs/v66/gauge_panel_cover.png" max-width="1025px" >}}
## Data and field options
@@ -10,7 +10,7 @@ weight = 600
The Heatmap panel visualization allows you to view histograms over time. For more information about histograms, refer to [Introduction to histograms and heatmaps]({{< relref "../../basics/intro-histograms.md" >}}).
![](/img/docs/v43/heatmap_panel_cover.jpg)
![](/static/img/docs/v43/heatmap_panel_cover.jpg)
## Axes options
@@ -11,7 +11,7 @@ The logs panel visualization shows log lines from data sources that support logs
> **Note:** The Logs panel is only available in Grafana v6.4+.
<img class="screenshot" src="/img/docs/v64/logs-panel.png">
<img class="screenshot" src="/static/img/docs/v64/logs-panel.png">
The logs panel shows the result of queries that were entered in the Query tab. The results of multiple queries are merged and sorted by time. You can scroll inside the panel if the data source returns more lines than can be displayed at any one time.
@@ -10,11 +10,11 @@ weight = 850
The _Node graph_ can visualize directed graphs or networks. It uses directed force layout to effectively position the nodes so it can help with displaying complex infrastructure maps, hierarchies or execution diagrams.
![Node graph panel](/img/docs/node-graph/node-graph-7-4.png "Node graph")
![Node graph panel](/static/img/docs/node-graph/node-graph-7-4.png "Node graph")
## Data requirements
The Node graph panel requires specific shape of the data to be able to display it's nodes and edges. This means not every data source or query can be visualized in this panel. If you want to use this as a data source developer see the section about data API.
The Node graph panel requires specific shape of the data to be able to display it's nodes and edges. This means not every data source or query can be visualized in this panel. If you want to use this as a data source developer see the section about data API.
The Node graph visualization consists of _nodes_ and _edges_.
@@ -31,7 +31,7 @@ Usually, nodes show two statistical values inside the node and two identifiers j
For example you can have percentage of errors represented by red portion of the circle. Additional details can be displayed in a context menu when 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.
![Node graph navigation](/img/docs/node-graph/node-graph-navigation-7-4.gif "Node graph navigation")
![Node graph navigation](/static/img/docs/node-graph/node-graph-navigation-7-4.gif "Node graph navigation")
### Edges
@@ -61,13 +61,13 @@ Data source needs to return two data frames, one for nodes and one for edges and
Required fields:
| Field name | Type | Description |
| 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 |
| 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. |
@@ -80,7 +80,7 @@ Optional fields:
Required fields:
| Field name | Type | Description |
| Field name | Type | Description |
|------------|---------|-------------|
| id | string | Unique identifier of the edge. |
| source | string | Id of the source node. |
@@ -88,7 +88,7 @@ Required fields:
Optional fields:
| Field name | Type | Description |
| 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. |
@@ -8,7 +8,7 @@ weight = 850
The pie chart displays reduced series, or values in a series, from one or more queries, as they relate to each other, in the form of slices of a pie. The arc length, area and central angle of a slice are all proportional to the slices value, as it relates to the sum of all values. This type of chart is best used when you want a quick comparison of a small set of values in an aesthetically pleasing form.
![Pie chart panel](/img/docs/pie-chart-panel/pie-chart-panel-7-5.png)
![Pie chart panel](/static/img/docs/pie-chart-panel/pie-chart-panel-7-5.png)
## Data and field options
@@ -51,11 +51,11 @@ Select the pie chart display style.
#### Pie
![Pie type chart](/img/docs/pie-chart-panel/pie-type-chart-7-5.png)
![Pie type chart](/static/img/docs/pie-chart-panel/pie-type-chart-7-5.png)
#### Donut
![Donut type chart](/img/docs/pie-chart-panel/donut-type-chart-7-5.png)
![Donut type chart](/static/img/docs/pie-chart-panel/donut-type-chart-7-5.png)
### Labels
@@ -69,7 +69,7 @@ Labels are displayed in white over the body of the chart. You might need to sele
The following example shows a pie chart with **Name** and **Percent** labels displayed.
![Pie chart labels](/img/docs/pie-chart-panel/pie-chart-labels-7-5.png)
![Pie chart labels](/static/img/docs/pie-chart-panel/pie-chart-labels-7-5.png)
{{< docs/shared "visualizations/tooltip-mode.md" >}}
@@ -10,7 +10,7 @@ weight = 900
The Stat panel shows a one large stat value with an optional graph sparkline. You can control the background or value color using thresholds.
{{< docs-imagebox img="/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 panel" >}}
> **Note:** This panel replaces the Singlestat panel, which was deprecated in Grafana 7.0.
@@ -24,7 +24,7 @@ You can use the **Text mode** to control whether the text is displayed or not.
Example screenshot:
{{< docs-imagebox img="/img/docs/v71/stat-panel-text-modes.png" max-width="1025px" caption="Stat panel" >}}
{{< figure src="/static/img/docs/v71/stat-panel-text-modes.png" max-width="1025px" caption="Stat panel" >}}
## Data and field options
@@ -9,7 +9,7 @@ weight = 1000
The table panel is very flexible, supporting multiple modes for time series and for tables, annotation, and raw JSON data. This panel also provides date formatting, value formatting, and coloring options.
{{< docs-imagebox img="/img/docs/tables/table_visualization.png" max-width="1200px" lightbox="true" caption="Table visualization" >}}
{{< figure src="/static/img/docs/tables/table_visualization.png" max-width="1200px" lightbox="true" caption="Table visualization" >}}
## Data and field options
@@ -26,7 +26,7 @@ Table visualizations allow you to apply:
- **Show header -** Show or hide column names imported from your data source.
- **Sort ascending/descending -** 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.
![Sort descending](/img/docs/tables/sort-descending.png "Sort descending")
![Sort descending](/static/img/docs/tables/sort-descending.png "Sort descending")
- [Table field options]({{< relref "table-field-options.md" >}}) allow you to change [field options]({{< relref "../../field-options/_index.md" >}}) such as column width, alignment, and cell display mode.
- [Filter table columns]({{< relref "filter-table-columns.md" >}}) - You can temporarily change how column data is displayed. For example, you can order values from highest to lowest or hide specific values.
@@ -19,13 +19,13 @@ If you turn on the **Column filter** in [Table options]({{< relref "table-field-
A filter icon appears next to each column title.
{{< docs-imagebox img="/img/docs/tables/column-filter-with-icon.png" max-width="500px" caption="Column filtering turned on" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/column-filter-with-icon.png" max-width="500px" caption="Column filtering turned on" class="docs-image--no-shadow" >}}
## Filter column values
To filter column values, click the filter (funnel) icon next to a column title. Grafana displays the filter options for that column.
{{< docs-imagebox img="/img/docs/tables/filter-column-values.png" max-width="500px" caption="Filter column values" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/filter-column-values.png" max-width="500px" caption="Filter column values" class="docs-image--no-shadow" >}}
Click the check box next to the values that you want to display. Enter text in the search field at the top to show those values in the display so that you can select them rather than scroll to find them.
@@ -33,6 +33,6 @@ Click the check box next to the values that you want to display. Enter text in t
Columns with filters applied have a blue funnel displayed next to the title.
{{< docs-imagebox img="/img/docs/tables/filtered-column.png" max-width="500px" caption="Filtered column" class="docs-image--no-shadow" >}}
{{< 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**.
@@ -40,39 +40,39 @@ By default, Grafana automatically chooses display settings. You can override the
If thresholds are set, then the field text is displayed in the appropriate threshold color.
{{< docs-imagebox img="/img/docs/tables/color-text.png" max-width="500px" caption="Color text" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/color-text.png" max-width="500px" caption="Color text" class="docs-image--no-shadow" >}}
### Color background (gradient or solid)
If thresholds are set, then the field background is displayed in the appropriate threshold color.
If thresholds are set, then the field background is displayed in the appropriate threshold color.
{{< docs-imagebox img="/img/docs/tables/color-background.png" max-width="500px" caption="Color background" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/color-background.png" max-width="500px" caption="Color background" class="docs-image--no-shadow" >}}
### Gradient gauge
The threshold levels define a gradient.
{{< docs-imagebox img="/img/docs/tables/gradient-gauge.png" max-width="500px" caption="Gradient gauge" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/gradient-gauge.png" max-width="500px" caption="Gradient gauge" class="docs-image--no-shadow" >}}
### LCD gauge
The gauge is split up in small cells that are lit or unlit.
{{< docs-imagebox img="/img/docs/tables/lcd-gauge.png" max-width="500px" caption="LCD gauge" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/lcd-gauge.png" max-width="500px" caption="LCD gauge" class="docs-image--no-shadow" >}}
### JSON view
Shows value formatted as code. If a value is an object the JSON view allowing browsing the JSON object will appear on hover.
{{< docs-imagebox img="/img/docs/tables/json-view.png" max-width="500px" caption="JSON view" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/json-view.png" max-width="500px" caption="JSON view" class="docs-image--no-shadow" >}}
### Image
### Image
> Only available in Grafana 7.3+
If you have a field value that is an image URL or a base64 encoded image you can configure the table to display it as an image.
{{< figure src="/img/docs/v73/table_hover.gif" max-width="900px" caption="Table hover" >}}
{{< figure src="/static/img/docs/v73/table_hover.gif" max-width="900px" caption="Table hover" >}}
## Column filter
@@ -31,25 +31,25 @@ Grafana automatically assigns Y-axis to the series. When there are two or more s
Display all Y-axes on the left side.
![Left Y-axis example](/img/docs/time-series-panel/axis-placement-left-7-4.png)
![Left Y-axis example](/static/img/docs/time-series-panel/axis-placement-left-7-4.png)
### Right
Display all Y-axes on the right side.
![Right Y-axis example](/img/docs/time-series-panel/axis-placement-right-7-4.png)
![Right Y-axis example](/static/img/docs/time-series-panel/axis-placement-right-7-4.png)
### Hidden
Hide the Y-axes.
![Hidden Y-axis example](/img/docs/time-series-panel/axis-placement-hidden-7-4.png)
![Hidden Y-axis example](/static/img/docs/time-series-panel/axis-placement-hidden-7-4.png)
## Label
Set a Y-axis text label.
![Label example](/img/docs/time-series-panel/label-example-7-4.png)
![Label example](/static/img/docs/time-series-panel/label-example-7-4.png)
If you have more than one Y-axis, then you can give assign different labels in the Override tab.
@@ -67,7 +67,7 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard field options]({{< relref "../../standard-options.md#max" >}}).
![Label example](/img/docs/time-series-panel/axis-soft-min-max-7-4.png)
![Label example](/static/img/docs/time-series-panel/axis-soft-min-max-7-4.png)
## Scale
@@ -33,27 +33,27 @@ Set the position of the bar relative to a data point. In the examples below, **S
#### Before
![Bar alignment before icon](/img/docs/time-series-panel/bar-alignment-icon-before-7-4.png)
![Bar alignment before icon](/static/img/docs/time-series-panel/bar-alignment-icon-before-7-4.png)
The bar is drawn before the point. The point is placed on the trailing corner of the bar.
![Bar alignment before example](/img/docs/time-series-panel/bar-alignment-before-7-4.png)
![Bar alignment before example](/static/img/docs/time-series-panel/bar-alignment-before-7-4.png)
#### Center
![Bar alignment center icon](/img/docs/time-series-panel/bar-alignment-icon-center-7-4.png)
![Bar alignment center icon](/static/img/docs/time-series-panel/bar-alignment-icon-center-7-4.png)
The bar is drawn around the point. The point is placed in the center of the bar. This is the default.
![Bar alignment center](/img/docs/time-series-panel/bar-alignment-center-7-4.png)
![Bar alignment center](/static/img/docs/time-series-panel/bar-alignment-center-7-4.png)
#### After
![Bar alignment after icon](/img/docs/time-series-panel/bar-alignment-icon-after-7-4.png)
![Bar alignment after icon](/static/img/docs/time-series-panel/bar-alignment-icon-after-7-4.png)
The bar is drawn after the point. The point is placed on the leading corner of the bar.
![Bar alignment after](/img/docs/time-series-panel/bar-alignment-after-7-4.png)
![Bar alignment after](/static/img/docs/time-series-panel/bar-alignment-after-7-4.png)
### Line width
@@ -61,11 +61,11 @@ Set the thickness of the lines bar outlines, from 0 to 10 pixels. **Fill opacity
Line thickness set to 1:
![Line thickness 1 example](/img/docs/time-series-panel/bar-graph-thickness-1-7-4.png)
![Line thickness 1 example](/static/img/docs/time-series-panel/bar-graph-thickness-1-7-4.png)
Line thickness set to 7:
![Line thickness 7 example](/img/docs/time-series-panel/bar-graph-thickness-7-7-4.png)
![Line thickness 7 example](/static/img/docs/time-series-panel/bar-graph-thickness-7-7-4.png)
### Fill opacity
@@ -73,11 +73,11 @@ Set the opacity of the bar fill, from 0 to 100 percent. In the examples below, t
Fill opacity set to 20:
![Fill opacity 20 example](/img/docs/time-series-panel/bar-graph-opacity-20-7-4.png)
![Fill opacity 20 example](/static/img/docs/time-series-panel/bar-graph-opacity-20-7-4.png)
Fill opacity set to 95:
![Fill opacity 95 example](/img/docs/time-series-panel/bar-graph-opacity-95-7-4.png)
![Fill opacity 95 example](/static/img/docs/time-series-panel/bar-graph-opacity-95-7-4.png)
### Gradient mode
@@ -89,19 +89,19 @@ Gradient appearance is influenced by the **Fill opacity** setting. In the screen
No gradient fill. This is the default setting.
![Gradient mode none example](/img/docs/time-series-panel/bar-graph-gradient-none-7-4.png)
![Gradient mode none example](/static/img/docs/time-series-panel/bar-graph-gradient-none-7-4.png)
#### Opacity
Transparency of the gradient is calculated based on the values on the y-axis. Opacity of the fill is increasing with the values on the Y-axis.
![Gradient mode opacity example](/img/docs/time-series-panel/bar-graph-gradient-opacity-7-4.png)
![Gradient mode opacity example](/static/img/docs/time-series-panel/bar-graph-gradient-opacity-7-4.png)
#### Hue
Gradient color is generated based on the hue of the line color.
![Gradient mode hue example](/img/docs/time-series-panel/bar-graph-gradient-hue-7-4.png)
![Gradient mode hue example](/static/img/docs/time-series-panel/bar-graph-gradient-hue-7-4.png)
### Show points
@@ -121,17 +121,17 @@ Set the size of the points, from 1 to 40 pixels in diameter.
Point size set to 6:
![Show points point size 6 example](/img/docs/time-series-panel/bar-graph-show-points-6-7-4.png)
![Show points point size 6 example](/static/img/docs/time-series-panel/bar-graph-show-points-6-7-4.png)
Point size set to 20:
![Show points point size 20 example](/img/docs/time-series-panel/bar-graph-show-points-20-7-4.png)
![Show points point size 20 example](/static/img/docs/time-series-panel/bar-graph-show-points-20-7-4.png)
#### Never
Never show the points.
![Show points point never example](/img/docs/time-series-panel/bar-graph-show-points-never-7-4.png)
![Show points point never example](/static/img/docs/time-series-panel/bar-graph-show-points-never-7-4.png)
{{< docs/shared "visualizations/stack-series-link.md" >}}
@@ -143,4 +143,4 @@ Below are some bar graph examples to give you ideas.
### Hue gradient
![Bars with hue gradient example](/img/docs/time-series-panel/bars-with-hue-gradient-7-4.png)
![Bars with hue gradient example](/static/img/docs/time-series-panel/bars-with-hue-gradient-7-4.png)
@@ -33,35 +33,35 @@ Choose how Grafana interpolates the series line. The screenshots below show the
#### Linear
![Linear interpolation icon](/img/docs/time-series-panel/interpolation-icon-linear-7-4.png)
![Linear interpolation icon](/static/img/docs/time-series-panel/interpolation-icon-linear-7-4.png)
Points are joined by straight lines.
![Linear interpolation example](/img/docs/time-series-panel/interpolation-linear-7-4.png)
![Linear interpolation example](/static/img/docs/time-series-panel/interpolation-linear-7-4.png)
#### Smooth
![Smooth interpolation icon](/img/docs/time-series-panel/interpolation-icon-smooth-7-4.png)
![Smooth interpolation icon](/static/img/docs/time-series-panel/interpolation-icon-smooth-7-4.png)
Points are joined by curved lines resulting in smooth transitions between points.
![Smooth interpolation example](/img/docs/time-series-panel/interpolation-smooth-7-4.png)
![Smooth interpolation example](/static/img/docs/time-series-panel/interpolation-smooth-7-4.png)
#### Step before
![Step before interpolation icon](/img/docs/time-series-panel/interpolation-icon-step-before-7-4.png)
![Step before interpolation icon](/static/img/docs/time-series-panel/interpolation-icon-step-before-7-4.png)
The line is displayed as steps between points. Points are rendered at the end of the step.
![Step before interpolation example](/img/docs/time-series-panel/interpolation-step-before-7-4.png)
![Step before interpolation example](/static/img/docs/time-series-panel/interpolation-step-before-7-4.png)
#### Step after
![Step after interpolation icon](/img/docs/time-series-panel/interpolation-icon-step-after-7-4.png)
![Step after interpolation icon](/static/img/docs/time-series-panel/interpolation-icon-step-after-7-4.png)
Line is displayed as steps between points. Points are rendered at the beginning of the step.
![Step after interpolation example](/img/docs/time-series-panel/interpolation-step-after-7-4.png)
![Step after interpolation example](/static/img/docs/time-series-panel/interpolation-step-after-7-4.png)
### Line width
@@ -69,11 +69,11 @@ Set the thickness of the series line, from 0 to 10 pixels.
Line thickness set to 1:
![Line thickness 1 example](/img/docs/time-series-panel/line-graph-thickness-1-7-4.png)
![Line thickness 1 example](/static/img/docs/time-series-panel/line-graph-thickness-1-7-4.png)
Line thickness set to 7:
![Line thickness 7 example](/img/docs/time-series-panel/line-graph-thickness-7-7-4.png)
![Line thickness 7 example](/static/img/docs/time-series-panel/line-graph-thickness-7-7-4.png)
### Fill opacity
@@ -81,11 +81,11 @@ Set the opacity of the series fill, from 0 to 100 percent.
Fill opacity set to 20:
![Fill opacity 20 example](/img/docs/time-series-panel/line-graph-opacity-20-7-4.png)
![Fill opacity 20 example](/static/img/docs/time-series-panel/line-graph-opacity-20-7-4.png)
Fill opacity set to 95:
![Fill opacity 95 example](/img/docs/time-series-panel/line-graph-opacity-95-7-4.png)
![Fill opacity 95 example](/static/img/docs/time-series-panel/line-graph-opacity-95-7-4.png)
### Gradient mode
@@ -97,19 +97,19 @@ Gradient appearance is influenced by the **Fill opacity** setting. In the screen
No gradient fill. This is the default setting.
![Gradient mode none example](/img/docs/time-series-panel/line-graph-gradient-none-7-4.png)
![Gradient mode none example](/static/img/docs/time-series-panel/line-graph-gradient-none-7-4.png)
#### Opacity
Transparency of the gradient is calculated based on the values on the y-axis. Opacity of the fill is increasing with the values on the Y-axis.
![Gradient mode opacity example](/img/docs/time-series-panel/line-graph-gradient-opacity-7-4.png)
![Gradient mode opacity example](/static/img/docs/time-series-panel/line-graph-gradient-opacity-7-4.png)
#### Hue
Gradient color is generated based on the hue of the line color.
![Gradient mode hue example](/img/docs/time-series-panel/line-graph-gradient-hue-7-4.png)
![Gradient mode hue example](/static/img/docs/time-series-panel/line-graph-gradient-hue-7-4.png)
### Line style
@@ -121,7 +121,7 @@ Line style appearance is influenced by the **Line width** and **Fill opacity** s
Display solid line. This is the default setting.
![Line style solid example](/img/docs/time-series-panel/line-graph-line-style-solid-7-4.png)
![Line style solid example](/static/img/docs/time-series-panel/line-graph-line-style-solid-7-4.png)
#### Dash
@@ -129,15 +129,15 @@ Display a dashed line. When you choose this option, a list appears so that you c
Dash spacing set to 10, 10 (default):
![Line style dashed 10, 10 example](/img/docs/time-series-panel/line-graph-line-style-dashed-10-10-7-4.png)
![Line style dashed 10, 10 example](/static/img/docs/time-series-panel/line-graph-line-style-dashed-10-10-7-4.png)
Dash spacing set to 10, 30:
![Line style dashed 10, 30 example](/img/docs/time-series-panel/line-graph-line-style-dashed-10-30-7-4.png)
![Line style dashed 10, 30 example](/static/img/docs/time-series-panel/line-graph-line-style-dashed-10-30-7-4.png)
Dash spacing set to 40, 10:
![Line style dashed 40, 10 example](/img/docs/time-series-panel/line-graph-line-style-dashed-40-10-7-4.png)
![Line style dashed 40, 10 example](/static/img/docs/time-series-panel/line-graph-line-style-dashed-40-10-7-4.png)
#### Dots
@@ -145,11 +145,11 @@ Display dotted lines. When you choose this option, a list appears so that you ca
Dot spacing set to 0, 10 (default):
![Line style dots 0, 10 example](/img/docs/time-series-panel/line-graph-line-style-dots-0-10-7-4.png)
![Line style dots 0, 10 example](/static/img/docs/time-series-panel/line-graph-line-style-dots-0-10-7-4.png)
Dot spacing set to 0, 30:
![Line style dots 0, 30 example](/img/docs/time-series-panel/line-graph-line-style-dots-0-30-7-4.png)
![Line style dots 0, 30 example](/static/img/docs/time-series-panel/line-graph-line-style-dots-0-30-7-4.png)
### Null values
@@ -159,13 +159,13 @@ Choose how null values (gaps in the data) are displayed on the graph.
If there is a gap in the series, the line in the graph will be broken and show the gap.
![Null values gaps example](/img/docs/time-series-panel/line-graph-null-gaps-7-4.png)
![Null values gaps example](/static/img/docs/time-series-panel/line-graph-null-gaps-7-4.png)
#### Connected
If there is a gap in the series, the line will skip the gap and connect to the next non-null value.
![Null values connected example](/img/docs/time-series-panel/line-graph-null-connected-7-4.png)
![Null values connected example](/static/img/docs/time-series-panel/line-graph-null-connected-7-4.png)
### Show points
@@ -185,17 +185,17 @@ Set the size of the points, from 1 to 40 pixels in diameter.
Point size set to 4:
![Show points point size 4 example](/img/docs/time-series-panel/line-graph-show-points-4-7-4.png)
![Show points point size 4 example](/static/img/docs/time-series-panel/line-graph-show-points-4-7-4.png)
Point size set to 10:
![Show points point size 10 example](/img/docs/time-series-panel/line-graph-show-points-10-7-4.png)
![Show points point size 10 example](/static/img/docs/time-series-panel/line-graph-show-points-10-7-4.png)
#### Never
Never show the points.
![Show points point never example](/img/docs/time-series-panel/line-graph-show-points-never-7-4.png)
![Show points point never example](/static/img/docs/time-series-panel/line-graph-show-points-never-7-4.png)
{{< docs/shared "visualizations/stack-series-link.md" >}}
@@ -213,7 +213,7 @@ Fill the area between two series. On the Overrides tab:
A-series filled below to B-series:
![Fill below to example](/img/docs/time-series-panel/line-graph-fill-below-to-7-4.png)
![Fill below to example](/static/img/docs/time-series-panel/line-graph-fill-below-to-7-4.png)
## Line graph examples
@@ -223,14 +223,14 @@ Below are some line graph examples to give you ideas.
This is a graph with different line styles and colors applied to each series and zero fill.
![Various line styles example](/img/docs/time-series-panel/various-line-styles-7-4.png)
![Various line styles example](/static/img/docs/time-series-panel/various-line-styles-7-4.png)
### Interpolation modes examples
![Interpolation modes example](/img/docs/time-series-panel/interpolation-modes-examples-7-4.png)
![Interpolation modes example](/static/img/docs/time-series-panel/interpolation-modes-examples-7-4.png)
### Fill below example
This graph shows three series: Min, Max, and Value. The Min and Max series have **Line width** set to 0. Max has a **Fill below to** override set to Min, which fills the area between Max and Min with the Max line color.
![Fill below example](/img/docs/time-series-panel/fill-below-to-7-4.png)
![Fill below example](/static/img/docs/time-series-panel/fill-below-to-7-4.png)
@@ -33,15 +33,15 @@ Set the size of the points, from 1 to 40 pixels in diameter.
Point size set to 6:
![Show points point size 6 example](/img/docs/time-series-panel/points-graph-show-points-6-7-4.png)
![Show points point size 6 example](/static/img/docs/time-series-panel/points-graph-show-points-6-7-4.png)
Point size set to 20:
![Show points point size 20 example](/img/docs/time-series-panel/points-graph-show-points-20-7-4.png)
![Show points point size 20 example](/static/img/docs/time-series-panel/points-graph-show-points-20-7-4.png)
Point size set to 35:
![Show points point size 35 example](/img/docs/time-series-panel/points-graph-show-points-35-7-4.png)
![Show points point size 35 example](/static/img/docs/time-series-panel/points-graph-show-points-35-7-4.png)
{{< docs/shared "visualizations/stack-series-link.md" >}}
@@ -25,37 +25,37 @@ Some field options will not affect the visualization until you click outside of
Turn series stacking on or off.
![Stack series editor](/img/docs/time-series-panel/stack-series-editor-8-0.png)
![Stack series editor](/static/img/docs/time-series-panel/stack-series-editor-8-0.png)
### Off
Turn off series stacking. A series will share the same space in the visualization.
![No series stacking example](/img/docs/time-series-panel/stacking-off-8-0.png)
![No series stacking example](/static/img/docs/time-series-panel/stacking-off-8-0.png)
### Normal
Enable stacking series on top of each other.
![Normal series stacking example](/img/docs/time-series-panel/stacking-normal-8-0.png)
![Normal series stacking example](/static/img/docs/time-series-panel/stacking-normal-8-0.png)
## Stack series in groups
The stacking group option is only available as an override.
For more information about creating field overrides, refer to [Add a field override]({{< relref "../../field-options/configure-specific-fields.md#add-a-field-override" >}})
For more information about creating field overrides, refer to [Add a field override]({{< relref "../../field-options/configure-specific-fields.md#add-a-field-override" >}})
Stack series in the same group. In the Overrides section:
1. Create a field override for **Stack series** option.
![Stack series override](/img/docs/time-series-panel/stacking-override-default-8-0.png)
![Stack series override](/static/img/docs/time-series-panel/stacking-override-default-8-0.png)
1. Click on **Normal** stacking mode.
1. Click on **Normal** stacking mode.
1. Name the stacking group you want the series to appear in. The stacking group name option is only available when creating an override.
![Stack series override](/img/docs/time-series-panel/stack-series-override-editor-8-0)
![Stack series override](/static/img/docs/time-series-panel/stack-series-override-editor-8-0)
A-series and B-series stacked in group A, C-series, and D-series stacked in group B:
![Stacking groups example](/img/docs/time-series-panel/stack-series-groups-8-0.png)
![Stacking groups example](/static/img/docs/time-series-panel/stack-series-groups-8-0.png)