Merge pull request #11367 from grafana/graph_51_docs

Update graph panel documentation

docs/sources/features/panels/graph.md

@@ -22,15 +22,18 @@ options for the panel.
 
 
 ## General
 ## General
 
 
-{{< docs-imagebox img="/img/docs/v43/graph_general.png"  max-width= "900px" >}}
+{{< docs-imagebox img="/img/docs/v51/graph_general.png"  max-width= "800px" >}}
 
 
 The general tab allows customization of a panel's appearance and menu options.
 The general tab allows customization of a panel's appearance and menu options.
 
 
-### General Options
+### Info
 
 
-- **Title** - The panel title on the dashboard
-- **Span** - The panel width in columns
-- **Height** - The panel contents height in pixels
+- **Title** - The panel title of the dashboard, displayed at the top.
+- **Description** - The panel description, displayed on hover of info icon in the upper left corner of the panel.
+- **Transparent** - If checked, removes the solid background of the panel (default not checked).
+
+### Repeat
+Repeat a panel for each value of a variable.  Repeating panels are described in more detail [here]({{< relref "reference/templating.md#repeating-panels" >}}).
 
 
 ### Drilldown / detail link
 ### Drilldown / detail link
 
 
@@ -54,47 +57,65 @@ options.
 
 
 ## Axes
 ## Axes
 
 
-{{< docs-imagebox img="/img/docs/v43/graph_axes_grid_options.png"  max-width= "900px" >}}
+{{< docs-imagebox img="/img/docs/v51/graph_axes_grid_options.png"  max-width= "800px" >}}
+
+The Axes tab controls the display of axes.
+
+### Left Y/Right Y
 
 
-The Axes tab controls the display of axes, grids and legend.  The **Left Y** and **Right Y** can be customized using:
+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
-- **Scale** -
+- **Scale** - The scale to use for the Y value, linear or logarithmic. (default linear)
 - **Y-Min** - The minimum Y value. (default auto)
 - **Y-Min** - The minimum Y value. (default auto)
 - **Y-Max** - The maximum Y value. (default auto)
 - **Y-Max** - The maximum Y value. (default auto)
+- **Decimals** - Controls how many decimals are displayed for Y value (default auto)
 - **Label** - The Y axis label (default "")
 - **Label** - The Y axis label (default "")
 
 
 Axes can also be hidden by unchecking the appropriate box from **Show**.
 Axes can also be hidden by unchecking the appropriate box from **Show**.
 
 
-### X-Axis Mode
+### X-Axis
 
 
-There are three options:
+Axis can be hidden by unchecking **Show**.
+
+For **Mode** 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/v51/graph-x-axis-mode-series.png" max-width="800px">}}
 
 
 - 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
 
 
-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
-values can be hidden from the legend using the **Hide empty** checkbox.
+### Y-Axes
+
+- **Align** - Check to align left and right Y-axes by value (default unchecked/false)
+- **Level** - Available when *Align* is checked. Value to use for alignment of left and right Y-axes, starting from Y=0 (default 0)
+
+## Legend
+
+{{< docs-imagebox img="/img/docs/v51/graph-legend.png" max-width= "800px" >}}
+
+### Options
+
+- **Show** - Uncheck to hide the legend (default checked/true)
+- **Table** - Check to display legend in table (default unchecked/false)
+- **To the right** - Check to display legend to the right (default unchecked/false)
+- **Width** - Available when *To the right* is checked. Value to control the minimum width for the legend (default 0)
 
 
-### Legend Values
+### 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
 - **Min** - Minimum of all values returned from metric query
 - **Min** - Minimum of all values returned from metric query
 - **Max** - Maximum of all values returned from the metric query
 - **Max** - Maximum of all values returned from the metric query
 - **Avg** - Average of all values returned from metric query
 - **Avg** - Average of all values returned from metric query
+- **Current** - Last value returned from the metric query
+- **Total** - Sum of all values returned from metric query
 - **Decimals** - Controls how many decimals are displayed for legend values (and graph hover tooltips)
 - **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
@@ -103,63 +124,72 @@ be correct at the same time. For example if you plot a rate like requests/second
 using average as aggregator, then the Total in the legend will not represent the total number of requests.
 using average as aggregator, then the Total in the legend will not represent the total number of requests.
 It is just the sum of all data points received by Grafana.
 It is just the sum of all data points received by Grafana.
 
 
-## Display styles
+### Hide series
 
 
-{{< docs-imagebox img="/img/docs/v43/graph_display_styles.png"  max-width= "900px" >}}
+Hide series when all values of a serie from a metric query are of a specific value:
 
 
-Display styles control visual properties of the graph.
+- **With only nulls** - Value=*null* (default unchecked)
+- **With only zeros** - Value=*zero* (default unchecked)
 
 
-### Thresholds
+## Display styles
 
 
-Thresholds allow you to add arbitrary lines or sections to the graph to make it easier to see when
-the graph crosses a particular threshold.
+{{< docs-imagebox img="/img/docs/v51/graph_display_styles.png" max-width= "800px" >}}
 
 
+Display styles control visual properties of the graph.
 
 
-### Chart Options
+### Draw Options
+
+#### Draw Modes
 
 
 - **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 Fill** - Amount of color fill for a series. 0 is none.
-- **Line Width** - The width of the line for a series.
-- **Null point mode** - How null values are displayed
-- **Staircase line** - Draws adjacent points as staircase
+#### Mode Options
 
 
-### Multiple Series
-
-If there are multiple series, they can be displayed as a group.
-
-- **Stack** - Each series is stacked on top of another
-- **Percent** - Each series is drawn as a percentage of the total of all series
+- **Fill** - Amount of color fill for a series (default 1). 0 is none.
+- **Line Width** - The width of the line for a series (default 1).
+- **Staircase** - Draws adjacent points as staircase
+- **Points Radius** - Adjust the size of points when *Points* are selected as *Draw Mode*.
 
 
-If you have stack enabled, you can select what the mouse hover feature should show.
+#### Hover tooltip
 
 
-- Cumulative - Sum of series below plus the series you hover over
-- Individual - Just the value for the series you hover over
+- **Mode** - Controls how many series to display in the tooltip when hover over a point in time, All series or single (default All series).
+- **Sort order** - Controls how series displayed in tooltip are sorted, None, Ascending or Descending (default None).
+- **Stacked value** - Available when *Stack* are checked and controls how stacked values are displayed in tooltip (default Individual).
+   - Individual: the value for the series you hover over
+   - Cumulative - sum of series below plus the series you hover over
 
 
-### Rendering
+#### Stacking & Null value
 
 
-- **Flot** - Render the graphs in the browser using Flot (default)
-- **Graphite PNG** - Render the graph on the server using graphite's render API.
+If there are multiple series, they can be displayed as a group.
 
 
-### Tooltip
+- **Stack** - Each series is stacked on top of another
+- **Percent** - Available when *Stack* are checked. Each series is drawn as a percentage of the total of all series
+- **Null value** - How null values are displayed
 
 
-- **All series** - Show all series on the same tooltip and a x crosshairs to help follow all series
+### Series overrides
 
 
-### Series Specific Overrides
+{{< docs-imagebox img="/img/docs/v51/graph_display_overrides.png" max-width= "800px" >}}
 
 
 The section allows a series to be rendered differently from the others. For example, one series can be given
 The section allows a series to be rendered differently from the others. For example, one series can be given
-a thicker line width to make it stand out.
+a thicker line width to make it stand out and/or be moved to the right Y-axis.
 
 
 #### Dashes Drawing Style
 #### Dashes Drawing Style
 
 
 There is an option under Series overrides to draw lines as dashes. Set Dashes to the value True to override the line draw setting for a specific series.
 There is an option under Series overrides to draw lines as dashes. Set Dashes to the value True to override the line draw setting for a specific series.
 
 
+### Thresholds
+
+{{< docs-imagebox img="/img/docs/v51/graph_display_thresholds.png" max-width= "800px" >}}
+
+Thresholds allow you to add arbitrary lines or sections to the graph to make it easier to see when
+the graph crosses a particular threshold.
+
 ## Time Range
 ## Time Range
 
 
-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/v51/graph-time-range.png"  max-width= "900px" >}}
 
 
-{{< docs-imagebox img="/img/docs/v45/graph-time-range.png"  max-width= "900px" >}}
+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.
+Panel time overrides & timeshift are described in more detail [here]({{< relref "reference/timerange.md#panel-time-overrides-timeshift" >}}).