Docs: Time series panel (#30690)

* Create _index.md

* Update standard-field-options.md

* added content

* added content

* Update create-line-graphs.md

* Update create-line-graphs.md

* Create create-bar-graphs.md

* Update create-line-graphs.md

* created scatter plot graphs topic

* Update create-scatter-plot-graphs.md

* Update create-bar-graphs.md

* Update create-scatter-plot-graphs.md

* Update create-line-graphs.md

* Update create-bar-graphs.md

* Update create-scatter-plot-graphs.md

* added links and content

* added links

* Update change-axis-display.md

* renamed files

* Update whats-new-in-v7-4.md

* Update graph-time-series-as-lines.md

* Updated names and verbiage

* Update _index.md

* Update _index.md

* Update docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update docs/sources/panels/visualizations/time-series/graph-time-series-as-lines.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update docs/sources/panels/visualizations/time-series/graph-time-series-as-points.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update docs/sources/panels/visualizations/time-series/graph-time-series-as-points.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update graph-time-series-as-bars.md

* Update graph-time-series-as-lines.md

* Update graph-time-series-as-points.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

docs/sources/panels/visualizations/table/table-field-options.md

@@ -11,6 +11,7 @@ This section explains all available table field options. They are listed in the
 Most field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.
 
 For more information about applying these options, refer to:
+
 - [Configure all fields]({{< relref "../../field-options/configure-all-fields.md" >}})
 - [Configure specific fields]({{< relref "../../field-options/configure-specific-fields.md" >}})
 

docs/sources/panels/visualizations/time-series/_index.md

++++
+title = "Time series panel"
+keywords = ["grafana", "graph panel", "time series panel", "documentation", "guide", "graph"]
+weight = 1200
++++
+
+# Time series panel
+
+> **Note:** This is a beta feature. Time series panel is going to replace the Graph panel in the future releases.
+
+Time series panel is a robust visualization to plot time series data. It can render as a line, a path of dots, or a series of bars. This type of graph is versatile enough to display almost any time-series data.
+
+For Time series panel examples, refer to the Grafana Play dashboard [New Features in v7.4](https://play.grafana.org/d/nP8rcffGk/new-features-in-v7-4?orgId=1).
+
+## Data and field options
+
+Time series visualizations allow you to apply:
+
+- [Data transformations]({{< relref "../../transformations/_index.md" >}})
+- [Field options and overrides]({{< relref "../../field-options/_index.md" >}})
+- [Thresholds]({{< relref "../../thresholds.md" >}})
+
+You can also use field options to create different types of graphs or adjust your axes:
+
+- [Graph time series as lines]({{< relref "graph-time-series-as-lines.md" >}})
+- [Graph time series as bars]({{< relref "graph-time-series-as-bars.md" >}})
+- [Graph time series as points]({{< relref "graph-time-series-as-points.md" >}})
+- [Change axis display]({{< relref "change-axis-display.md" >}})
+
+## Display options
+
+> **Note:** You can migrate Graph panel visualizations to Time series visualizations. To migrate, on the Panel tab, click **Time series** visualization. Grafana transfers all applicable settings. (While in beta, migration is still being refined. It will get better as time goes on!)
+
+### Tooltip mode
+
+When you hover your cursor over the graph, Grafana can display tooltips. Choose how tooltips behave.
+
+- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the graph.
+- **All -** The hover tooltip shows all series in the graph. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip.
+- **Hidden -** Do not display the tooltip when you interact with the graph.
+
+> **Note:** Use an override to hide individual series from the tooltip.
+
+### Legend mode
+
+Use these settings to refine how the legend appears in your visualization.
+
+- **List -** Displays the legend as a list. This is a default display mode of the legend.
+- **Table -** Displays the legend as a table.
+- **Hidden -** Hides the legend.
+
+### Legend placement
+
+Choose where to display the legend.
+
+- **Bottom -** Below the graph.
+- **Right -** To the right of the graph.
+
+### Legend calculations
+
+Choose which of the [standard calculations]({{< relref "../../calculations-list.md">}}) to show in the legend. You can have more than one.
+
+## Legend options
+
+The Time series legend has additional features.
+
+### Toggle series
+
+Click on the series label in the legend to isolate the series in the visualization. All other series are hidden in the visualization. The data of the hidden series is still accessible.
+
+Cmd/Ctrl+click on the series label to hide the clicked series and remove the toggle.
+
+> **Note:** This option is persistent when you save the dashboard.
+
+This creates a system override that hides the other series. You can view this override in the Overrides tab. If you delete the override, then it removes the toggle.
+
+### Change series color
+
+Click on the series icon (colored line beside the series label) in the legend to change selected series color.

docs/sources/panels/visualizations/time-series/change-axis-display.md

++++
+title = "Change axis display"
+keywords = ["grafana", "time series panel", "documentation", "guide", "graph"]
+weight = 400
++++
+
+# Change axis display
+
+> **Note:** This is a beta feature. Time series panel is going to replace the Graph panel in the future releases.
+
+This section explains how to use Time series field options to control the display of axes in the visualization and illustrates what the axis options do.
+
+Use the following field settings to refine how your axes display.
+
+For more information about applying these options, refer to:
+
+- [Configure all fields]({{< relref "../../field-options/configure-all-fields.md" >}})
+- [Configure specific fields]({{< relref "../../field-options/configure-specific-fields.md" >}})
+
+Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.
+
+## Placement
+
+Select the placement of the Y-axis.
+
+### Auto
+
+Grafana automatically assigns Y-axis to the series. When there are two or more series with different units, then Grafana assigns the left axis to the first unit and right to the following units.
+
+### Left
+
+Display all Y-axes on the left side.
+
+![Left Y-axis example](/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)
+
+### Hidden
+
+Hide the Y-axes.
+
+![Hidden Y-axis example](/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)
+
+If you have more than one Y-axis, then you can give assign different labels in the Override tab.
+
+## Width
+
+Set a fixed width of the axis. By default, Grafana dynamically calculates the width of an axis.
+
+By setting the width of the axis, data whose axes types are different can share the same display proportions. This makes it easier to compare more than one graph’s worth of data because the axes are not shifted or stretched within visual proximity of each other.
+
+## Soft min and soft max
+
+Set a **Soft min** or **soft max** option for better control of Y-axis limits. By default, Grafana sets the range for the Y-axis automatically based on the dataset.
+
+**Soft min** and **soft max** settings can prevent blips from turning into mountains when the data is mostly flat, and hard min or max derived from standard min and max field options can prevent intermittent spikes from flattening useful detail by clipping the spikes past a defined point.
+
+You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard field options]({{< relref "../../field-options/standard-field-options.md#max" >}}).
+
+![Label example](/img/docs/time-series-panel/axis-soft-min-max-7-4.png)
+
+## Scale
+
+Set the scale to use for the Y-axis values.
+
+### Linear
+
+Use scale divided into equal parts.
+
+### Logarithmic
+
+Use a logarithmic scale. When this option is chosen, a list appears where you can choose binary (base 2) or common (base 10) logarithmic scale.
+
+## Axis examples
+
+For examples, refer to the Grafana Play dashboard [New Features in v7.4](https://play.grafana.org/d/nP8rcffGk/new-features-in-v7-4?orgId=1).

docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md

++++
+title = "Graph time series as bars"
+keywords = ["grafana", "time series panel", "documentation", "guide", "graph"]
+weight = 200
++++
+
+# Graph time series as bars
+
+> **Note:** This is a beta feature. Time series panel is going to replace the Graph panel in the future releases.
+
+This section explains how to use Time series field options to visualize time series data as bars and illustrates what the options do.
+
+## Create the panel
+
+1. [Add a panel](https://grafana.com/docs/grafana/latest/panels/add-a-panel/). Select the [Time series]({{< relref "_index.md" >}}) visualization.
+1. In the [Panel editor](https://grafana.com/docs/grafana/latest/panels/panel-editor/), click the **Field** tab.
+1. In Style, click **Bars**.
+
+## Style the bars
+
+Use the following field settings to refine your visualization.
+
+For more information about applying these options, refer to:
+
+- [Configure all fields]({{< relref "../../field-options/configure-all-fields.md" >}})
+- [Configure specific fields]({{< relref "../../field-options/configure-specific-fields.md" >}})
+
+Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.
+
+### Line width
+
+Set the thickness of the lines bar outlines, from 0 to 10 pixels. **Fill opacity** is set to 10 in the examples below.
+
+Line thickness set to 1:
+
+![Line thickness 1 example](/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)
+
+### Fill opacity
+
+Set the opacity of the bar fill, from 0 to 100 percent. In the examples below, the **Line width** is set to 1.
+
+Fill opacity set to 20:
+
+![Fill opacity 20 example](/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)
+
+### Gradient mode
+
+Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme](https://grafana.com/docs/grafana/latest/panels/field-options/standard-field-options/#color-scheme) field option.
+
+Gradient appearance is influenced by the **Fill opacity** setting. In the screenshots below, **Fill opacity** is set to 50.
+
+#### None
+
+No gradient fill. This is the default setting.
+
+![Gradient mode none example](/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)
+
+#### 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)
+
+### Show points
+
+Choose when the points should be shown on the graph
+
+#### Auto
+
+Grafana automatically decides whether or not to show the points depending on the density of the data. If the density is low, then points are shown.
+
+#### Always
+
+Show the points no matter how dense the data set is. This example uses a **Line width** of 1. If the line width is thicker than the point size, then the line obscures the points.
+
+##### Point size
+
+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)
+
+Point size set to 20:
+
+![Show points point size 20 example](/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)
+
+## Bar graph examples
+
+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)

docs/sources/panels/visualizations/time-series/graph-time-series-as-lines.md

++++
+title = "Graph time series as lines"
+keywords = ["grafana", "time series panel", "documentation", "guide", "graph"]
+weight = 100
++++
+
+# Graph time series as lines
+
+> **Note:** This is a beta feature. Time series panel is going to replace the Graph panel in the future releases.
+
+This section explains how to use Time series field options to visualize time series data as lines and illustrates what the options do.
+
+## Create the panel
+
+1. [Add a panel](https://grafana.com/docs/grafana/latest/panels/add-a-panel/). Select the [Time series]({{< relref "_index.md" >}}) visualization.
+1. In the [Panel editor](https://grafana.com/docs/grafana/latest/panels/panel-editor/), click the **Field** tab.
+1. In Style, click **Lines**.
+
+## Style the lines
+
+Use the following field settings to refine your visualization.
+
+For more information about applying these options, refer to:
+
+- [Configure all fields]({{< relref "../../field-options/configure-all-fields.md" >}})
+- [Configure specific fields]({{< relref "../../field-options/configure-specific-fields.md" >}})
+
+Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.
+
+### Line interpolation
+
+Choose how Grafana interpolates the series line. The screenshots below show the same data displayed with different line interpolations.
+
+#### Linear
+
+![Linear interpolation icon](/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)
+
+#### Smooth
+
+![Smooth interpolation icon](/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)
+
+#### Step before
+
+![Step before interpolation icon](/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 after
+
+![Step after interpolation icon](/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)
+
+### Line width
+
+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 set to 7:
+
+![Line thickness 7 example](/img/docs/time-series-panel/line-graph-thickness-7-7-4.png)
+
+### Fill opacity
+
+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 set to 95:
+
+![Fill opacity 95 example](/img/docs/time-series-panel/line-graph-opacity-95-7-4.png)
+
+### Gradient mode
+
+Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme](https://grafana.com/docs/grafana/latest/panels/field-options/standard-field-options/#color-scheme) field option.
+
+Gradient appearance is influenced by the **Fill opacity** setting. In the screenshots below, **Fill opacity** is set to 50.
+
+#### None
+
+No gradient fill. This is the default setting.
+
+![Gradient mode none example](/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)
+
+#### 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)
+
+### Line style
+
+Set the style of the line. To change the color, use the standard [color scheme](https://grafana.com/docs/grafana/latest/panels/field-options/standard-field-options/#color-scheme) field option.
+
+Line style appearance is influenced by the **Line width** and **Fill opacity** settings. In the screenshots below, **Line width** is set to 3 and **Fill opacity** is set to 20.
+
+#### Solid
+
+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)
+
+#### Dash
+
+Display a dashed line. When you choose this option, a list appears so that you can select the length and gap (length, gap) for the line dashes.
+
+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)
+
+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)
+
+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)
+
+#### Dots
+
+Display dotted lines. When you choose this option, a list appears so that you can select the gap (length = 0, gap) for the dot spacing.
+
+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)
+
+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)
+
+### Null values
+
+Choose how null values (gaps in the data) are displayed on the graph.
+
+#### Gaps
+
+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)
+
+#### 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)
+
+### Show points
+
+Choose when the points should be shown on the graph.
+
+#### Auto
+
+Grafana automatically decides whether or not to show the points depending on the density of the data. If the density is low, then points are shown.
+
+#### Always
+
+Show the points no matter how dense the data set is. This example uses a **Line width** of 1 and 50 data points. If the line width is thicker than the point size, then the line obscures the points.
+
+##### Point size
+
+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)
+
+Point size set to 10:
+
+![Show points point size 10 example](/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)
+
+## Fill below to
+
+This option is only available as in the Overrides tab.
+
+Fill the area between two series. On the Overrides tab:
+
+1. Select the fields to fill below.
+1. In **Add override property**, select **Fill below to**.
+1. Select the series that you want the fill to stop at.
+
+A-series filled below to B-series:
+
+![Fill below to example](/img/docs/time-series-panel/line-graph-fill-below-to-7-4.png)
+
+## Line graph examples
+
+Below are some line graph examples to give you ideas.
+
+### Various line styles
+
+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)
+
+### Interpolation modes examples
+
+![Interpolation modes example](/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)

docs/sources/panels/visualizations/time-series/graph-time-series-as-points.md

++++
+title = "Graph time series as points"
+keywords = ["grafana", "time series panel", "documentation", "guide", "graph"]
+weight = 300
++++
+
+# Graph time series as points
+
+> **Note:** This is a beta feature. Time series panel is going to replace the Graph panel in the future releases.
+
+This section explains how to use Time series field options to visualize time series data as points and illustrates what the options do.
+
+## Create the panel
+
+1. [Add a panel](https://grafana.com/docs/grafana/latest/panels/add-a-panel/). Select the [Time series]({{< relref "_index.md" >}}) visualization.
+1. In the [Panel editor](https://grafana.com/docs/grafana/latest/panels/panel-editor/), click the **Field** tab.
+1. In Style, click **Points**.
+
+## Style the points
+
+Use the following field settings to refine your visualization.
+
+For more information about applying these options, refer to:
+
+- [Configure all fields]({{< relref "../../field-options/configure-all-fields.md" >}})
+- [Configure specific fields]({{< relref "../../field-options/configure-specific-fields.md" >}})
+
+Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.
+
+### Point size
+
+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)
+
+Point size set to 20:
+
+![Show points point size 20 example](/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)

docs/sources/whatsnew/whats-new-in-v7-4.md

@@ -28,6 +28,14 @@ Apart from major performance improvements, the new Time series panel implements
 
 {{< figure src="/img/docs/v74/timeseries_panel.png" max-width="900px" caption="Time series panel" >}}
 
+The following documentation topics were added for this feature:
+
+- [Time series panel]({{< relref "../panels/visualizations/time-series/_index.md" >}})
+- [Graph time series as lines]({{< relref "../panels/visualizations/time-series/graph-time-series-as-lines.md" >}})
+- [Graph time series as bars]({{< relref "../panels/visualizations/time-series/graph-time-series-as-bars.md" >}})
+- [Graph time series as points]({{< relref "../panels/visualizations/time-series/graph-time-series-as-points" >}})
+- [Change axis display]({{< relref "../panels/visualizations/time-series/change-axis-display.md" >}})
+
 ### Node graph panel visualization (Beta)
 
 _Node graph_ is a new panel type that can visualize directed graphs or network in dashboards, but also in Explore. It uses directed force layout to effectively position the nodes so it can help with displaying complex infrastructure maps, hierarchies, or execution diagrams.