Commit dec76b45 by Josh Soref Committed by GitHub

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

parent 8b466553
......@@ -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.
......
......@@ -82,6 +82,38 @@
</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">
<label class="gf-form-label width-9">Mode</label>
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment