IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Graph panel: Move Stacking and null values before Hover tooltip options (#26037)

Browse Source
This commit is contained in:
Josh Soref 2020-07-03 03:14:44 -04:00 committed by GitHub
parent 8b46655361
commit dec76b4556
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/sources/panels/visualizations/graph-panel.md
View File

@ -32,6 +32,17 @@ Use these settings to refine your visualization.
- **Points -** Display points for values.
- **Point radius -** Controls how large the points are.
### Stacking and null value
- **Stack -** Each series is stacked on top of another.
- **Percent -** Available when **Stack** is selected. Each series is drawn as a percentage of the total of all series.
- **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.
> **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.
### Hover tooltip
Use these settings to change the appearance of the tooltip that appears when you hover your cursor over the graph visualization.
@ -44,17 +55,6 @@ Use these settings to change the appearance of the tooltip that appears when you
- **Increasing -** The series in the hover tooltip are sorted by value and in increasing order, with the lowest value at the top of the list.
- **Decreasing -** The series in the hover tooltip are sorted by value and in decreasing order, with the highest value at the top of the list.
### Stacking and null value
- **Stack -** Each series is stacked on top of another.
- **Percent -** Available when **Stack** is selected. Each series is drawn as a percentage of the total of all series.
- **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.
> **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.
## Series overrides
Series overrides allow a series in a graph panel to be rendered differently from the others. You can customize display options on a per-series bases or by using regex rules. For example, one series can have a thicker line width to make it stand out or be moved to the right Y-axis.

64
public/app/plugins/panel/graph/tab_display.html
View File

@ -81,6 +81,38 @@
</div>
</div>
<div class="gf-form-group">
<h5 class="section-heading">Stacking and null value</h5>
<gf-form-switch
class="gf-form"
label="Stack"
label-class="width-7"
checked="ctrl.panel.stack"
on-change="ctrl.render()"
>
</gf-form-switch>
<gf-form-switch
class="gf-form"
ng-show="ctrl.panel.stack"
label="Percent"
label-class="width-7"
checked="ctrl.panel.percentage"
on-change="ctrl.render()"
>
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-7">Null value</label>
<div class="gf-form-select-wrapper">
<select
class="gf-form-input max-width-9"
ng-model="ctrl.panel.nullPointMode"
ng-options="f for f in ['connected', 'null', 'null as zero']"
ng-change="ctrl.render()"
></select>
</div>
</div>
</div>
<div class="gf-form-group">
<h5 class="section-heading">Hover tooltip</h5>
<div class="gf-form">
@ -117,35 +149,3 @@
</div>
</div>
</div>
<div class="gf-form-group">
<h5 class="section-heading">Stacking and null value</h5>
<gf-form-switch
class="gf-form"
label="Stack"
label-class="width-7"
checked="ctrl.panel.stack"
on-change="ctrl.render()"
>
</gf-form-switch>
<gf-form-switch
class="gf-form"
ng-show="ctrl.panel.stack"
label="Percent"
label-class="width-7"
checked="ctrl.panel.percentage"
on-change="ctrl.render()"
>
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-7">Null value</label>
<div class="gf-form-select-wrapper">
<select
class="gf-form-input max-width-9"
ng-model="ctrl.panel.nullPointMode"
ng-options="f for f in ['connected', 'null', 'null as zero']"
ng-change="ctrl.render()"
></select>
</div>
</div>
</div>