Commit e1a86e63 by Patrick O'Carroll Committed by Torkel Ödegaard

some restyling (#9409)

parent dd83b67d
...@@ -56,44 +56,46 @@ options. ...@@ -56,44 +56,46 @@ options.
{{< docs-imagebox img="/img/docs/v43/graph_axes_grid_options.png" max-width= "900px" >}} {{< docs-imagebox img="/img/docs/v43/graph_axes_grid_options.png" max-width= "900px" >}}
The Axes tab controls the display of axes, grids and legend. The ``Left Y`` and ``Right Y`` can be customized using: The Axes tab controls the display of axes, grids and legend. The **Left Y** and **Right Y** can be customized using:
- ``Unit`` - The display unit for the Y value - **Unit** - The display unit for the Y value
- ``Grid Max`` - The maximum Y value. (default auto) - **Scale** -
- ``Grid Min`` - The minimum Y value. (default auto) - **Y-Min** - The minimum Y value. (default auto)
- ``Label`` - The Y axis label (default "") - **Y-Max** - The maximum Y value. (default auto)
- **Label** - The Y axis label (default "")
Axes can also be hidden by unchecking the appropriate box from `Show Axis`. Axes can also be hidden by unchecking the appropriate box from **Show**.
### X-Axis Mode ### X-Axis Mode
There are three options: 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 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. - 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/v45/graph-x-axis-mode-series.png" max-width="700px">}} {{< docs-imagebox img="/img/docs/v45/graph-x-axis-mode-series.png" max-width="700px">}}
- 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). - 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"> <img src="/img/docs/v43/heatmap_histogram.png" class="no-shadow">
### Legend ### Legend
The legend hand be hidden by checking the ``Show`` checkbox. If it's shown, it can be The legend hand be hidden by checking the **Show** checkbox. If it's shown, it can be
displayed as a table of values by checking the ``Table`` checkbox. Series with no displayed as a table of values by checking the **Table** checkbox. Series with no
values can be hidden from the legend using the ``Hide empty`` checkbox. values can be hidden from the legend using the **Hide empty** checkbox.
### Legend Values ### Legend Values
Additional values can be shown along-side the legend names: Additional values can be shown along-side the legend names:
- ``Total`` - Sum of all values returned from metric query
- ``Current`` - Last value returned from the metric query - **Total** - Sum of all values returned from metric query
- ``Min`` - Minimum of all values returned from metric query - **Current** - Last value returned from the metric query
- ``Max`` - Maximum of all values returned from the metric query - **Min** - Minimum of all values returned from metric query
- ``Avg`` - Average of all values returned from metric query - **Max** - Maximum of all values returned from the metric query
- ``Decimals`` - Controls how many decimals are displayed for legend values (and graph hover tooltips) - **Avg** - Average of all values returned from 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 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 aggregation or point consolidation your metric query is using. All the above legend values cannot
...@@ -115,23 +117,23 @@ the graph crosses a particular threshold. ...@@ -115,23 +117,23 @@ the graph crosses a particular threshold.
### Chart Options ### Chart Options
- ``Bar`` - Display values as a bar chart - **Bar** - Display values as a bar chart
- ``Lines`` - Display values as a line graph - **Lines** - Display values as a line graph
- ``Points`` - Display points for values - **Points** - Display points for values
### Line Options ### Line Options
- ``Line Fill`` - Amount of color fill for a series. 0 is none. - **Line Fill** - Amount of color fill for a series. 0 is none.
- ``Line Width`` - The width of the line for a series. - **Line Width** - The width of the line for a series.
- ``Null point mode`` - How null values are displayed - **Null point mode** - How null values are displayed
- ``Staircase line`` - Draws adjacent points as staircase - **Staircase line** - Draws adjacent points as staircase
### Multiple Series ### Multiple Series
If there are multiple series, they can be displayed as a group. If there are multiple series, they can be displayed as a group.
- ``Stack`` - Each series is stacked on top of another - **Stack** - Each series is stacked on top of another
- ``Percent`` - Each series is drawn as a percentage of the total of all series - **Percent** - Each series is drawn as a percentage of the total of all series
If you have stack enabled, you can select what the mouse hover feature should show. If you have stack enabled, you can select what the mouse hover feature should show.
...@@ -140,12 +142,12 @@ If you have stack enabled, you can select what the mouse hover feature should sh ...@@ -140,12 +142,12 @@ If you have stack enabled, you can select what the mouse hover feature should sh
### Rendering ### Rendering
- ``Flot`` - Render the graphs in the browser using Flot (default) - **Flot** - Render the graphs in the browser using Flot (default)
- ``Graphite PNG`` - Render the graph on the server using graphite's render API. - **Graphite PNG** - Render the graph on the server using graphite's render API.
### Tooltip ### Tooltip
- ``All series`` - Show all series on the same tooltip and a x crosshairs to help follow all series - **All series** - Show all series on the same tooltip and a x crosshairs to help follow all series
### Series Specific Overrides ### Series Specific Overrides
...@@ -158,12 +160,6 @@ There is an option under Series overrides to draw lines as dashes. Set Dashes to ...@@ -158,12 +160,6 @@ There is an option under Series overrides to draw lines as dashes. Set Dashes to
## Time Range ## Time Range
<<<<<<< HEAD
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. 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.
{{< docs-imagebox img="/img/docs/v45/graph-time-range.png" max-width= "900px" >}} {{< docs-imagebox img="/img/docs/v45/graph-time-range.png" max-width= "900px" >}}
||||||| merged common ancestors
![](/img/docs/v2/graph_time_range.png)
=======
<img src="/img/docs/v45/graph-time-range.png" class="no-shadow">
>>>>>>> 0a65100eaf64cd57b38110001bf614630821610c
...@@ -22,20 +22,20 @@ The singlestat panel has a normal query editor to allow you define your exact me ...@@ -22,20 +22,20 @@ The singlestat panel has a normal query editor to allow you define your exact me
{{< docs-imagebox img="/img/docs/v45/singlestat-value-options.png" class="docs-image--no-shadow" max-width="900px" >}} {{< 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. 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 * **min** - The smallest value in the series
* `max` - The largest value in the series * **max** - The largest value in the series
* `avg` - The average of all the non-null values 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. * **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 * **total** - The sum of all the non-null values in the series
* `first` - The first value 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. * **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 betwen 'current' (last value) and 'first'. * **diff** - The difference betwen 'current' (last value) and 'first'.
* `range` - The difference between 'min' and 'max'. Useful the show the range of change for a gauge. * **range** - The difference between 'min' and 'max'. Useful the 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. 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 the Singlestat within the panel, and will respect the color and threshold settings for the value. 3. **Units**: Units are appended to the 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. 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. 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 ### Coloring
...@@ -43,11 +43,11 @@ The coloring options of the Singlestat Panel config allow you to dynamically cha ...@@ -43,11 +43,11 @@ The coloring options of the Singlestat Panel config allow you to dynamically cha
{{< docs-imagebox img="/img/docs/v45/singlestat-color-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}} {{< 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. 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. 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 3. **Colors**: Select a color and opacity
4. `Value`: This checkbox applies the configured thresholds and colors to the summary stat. 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">). 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 ### Spark Lines
...@@ -55,10 +55,10 @@ Sparklines are a great way of seeing the historical data related to the summary ...@@ -55,10 +55,10 @@ Sparklines are a great way of seeing the historical data related to the summary
{{< docs-imagebox img="/img/docs/v45/singlestat-spark-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}} {{< 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. 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. 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. `Line Color`: This color selection applies to the color of the sparkline itself. 3. **Line Color**: This color selection applies to the color of the sparkline itself.
4. `Fill Color`: This color selection applies to the area below the sparkline. 4. **Fill Color**: This color selection applies to the area below the sparkline.
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -70,10 +70,10 @@ Gauges gives a clear picture of how high a value is in it's context. It's a grea ...@@ -70,10 +70,10 @@ Gauges gives a clear picture of how high a value is in it's context. It's a grea
{{< docs-imagebox img="/img/docs/v45/singlestat-gauge-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}} {{< docs-imagebox img="/img/docs/v45/singlestat-gauge-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}}
1. `Show`: The show checkbox will toggle wether the gauge is shown in the panel. When unselected, only the Singlestat value will appear. 1. **Show**: The show checkbox will toggle wether the gauge is shown in the panel. When unselected, only the Singlestat value will appear.
2. `Min/Max`: This sets the start and end point for the gauge. 2. **Min/Max**: This sets the start and end point for the gauge.
3. `Threshold Labels`: Check if you want to show the threshold labels. Thresholds are set in the color options. 3. **Threshold Labels**: Check if you want to show the threshold labels. Thresholds are set in the color options.
4. `Threshold Markers`: Check if you want to have a second meter showing the thresholds. 4. **Threshold Markers**: Check if you want to have a second meter showing the thresholds.
<div class="clearfix"></div> <div class="clearfix"></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