diff --git a/docs/sources/panels/visualizations/state-timeline.md b/docs/sources/panels/visualizations/state-timeline.md index 5d839118fed..a60937f108f 100644 --- a/docs/sources/panels/visualizations/state-timeline.md +++ b/docs/sources/panels/visualizations/state-timeline.md @@ -1,6 +1,6 @@ +++ title = "State timeline" -description = "Stat timeline visualization" +description = "State timeline visualization" keywords = ["grafana", "docs", "state timeline", "panel"] weight = 900 +++ @@ -21,7 +21,7 @@ Controls whether Grafana merges identical values if they are next to each other. ### Show values -Controls whether values are rendered inside the state regions. Auto will render values if there is room. +Controls whether values are rendered inside the state regions. Auto will render values if there is sufficient space. ### Align values @@ -47,7 +47,7 @@ To assign colors to boolean or string values, use the [Value mappings](< {{ refr ## Time series data with thresholds -The panel can be with time series data as well. In this case, the thresholds are used to turn the time series into discrete colored state regions. +The panel can be used with time series data as well. In this case, the thresholds are used to turn the time series into discrete colored state regions. {{< figure src="/static/img/docs/v8/state_timeline_time_series.png" max-width="1025px" caption="state timeline with time series" >}} diff --git a/docs/sources/panels/visualizations/status-history.md b/docs/sources/panels/visualizations/status-history.md new file mode 100644 index 00000000000..148aebc410f --- /dev/null +++ b/docs/sources/panels/visualizations/status-history.md @@ -0,0 +1,55 @@ ++++ +title = "Status history" +description = "Status history visualization" +keywords = ["grafana", "docs", "status history", "panel"] +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. + +{{< figure src="/static/img/docs/status-history-panel/status-history-example-v8-0.png" max-width="1025px" caption="Status history example" >}} + +## 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. + +## Display options + +Use these options to refine the visualization. + +### Show values + +Controls whether values are rendered inside the value boxes. Auto will render values if there is sufficient space. + +### Column width + +Controls the width of boxes. 1 = maximum space and 0 = minimum space. + +### Line width + +Controls line width of state regions. + +### Fill opacity + +Controls the opacity of state regions. + +## Value mappings + +To assign colors to boolean or string values, use the [Value mappings](< {{ refref "../value-mappings.md"}} >). + +{{< figure src="/static/img/docs/v8/value_mappings_side_editor.png" max-width="300px" caption="Value mappings side editor" >}} + +## Time series data with thresholds + +The panel can be used with time series data as well. In this case, the thresholds are used to color the boxes. You can also +use gradient color schemes to color values. + +{{< figure src="/static/img/docs/v8/state_timeline_time_series.png" max-width="1025px" caption="state timeline with time series" >}} + +## Legend options + +When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` option under [Standard options]({{< relref "../standard-options.md" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`. + +{{< docs/shared "visualizations/legend-mode.md" >}} diff --git a/docs/sources/whatsnew/whats-new-in-v8-0.md b/docs/sources/whatsnew/whats-new-in-v8-0.md index 4810d86cf9e..7b021c2dae5 100644 --- a/docs/sources/whatsnew/whats-new-in-v8-0.md +++ b/docs/sources/whatsnew/whats-new-in-v8-0.md @@ -73,7 +73,8 @@ For more information, refer to [State timeline visualization]({{< relref "../pan ### Status history visualization (beta) -A sister panel to the state timeline is the new Status history panel visualization. It can display periodic state in a grid. Works with both numerical, string or boolean state. +A sister panel to the state timeline is the new Status history panel visualization. It can display periodic states in a grid view. It supports both numerical, string, or boolean states. You can assign colors using value mappings, thresholds, or gradient color. For more information, refer to [Status history]({{< relref "../panels/visualizations/status-history.md" >}}). +schemes. ![Status grid visualization](/static/img/docs/status-grid/status-grid-8-0.png)