Hiding a series in the new "Time Series (beta)" panel (Grafana 7.5.6)

andypellew · September 8, 2021, 4:35pm

We’re running 7.5.6 viewing using Chrome browser
What are you trying to achieve?
I am looking to upgrade an existing dashboard replacing the existing “Graph” visualisation with the new “Time Series (beta)”.

We use two specific features; the ability for an entire series to be hidden if all the values are zero

The ability of a user to move a specific series to display in the y-axis.

How are you trying to achieve it?
Swapped Visualisation in the editor … from “Graph” to “Time Series (beta)”
What happened?
The Legend contains all the available columns. We have 8/9 assets per site, with 4/5 measurement points per asset and then with 20+ different types of measurement (temperature, humidity, etc).

The user has picked the specific asset, measurement point, and measurement they wish to see so (in the legend) those series have values and they are displayed on the graph but all of the other series come back as null and so while they don’t have a line on the graph they are still appearing in the legend.

What did you expect to happen?
If an entire series is null it should not appear on either the graph or the legend.
Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.
No.
Did you follow any online instructions? If so, what is the URL?
No

I can post an example to duplicate the issue but that will take some time to put together (as I can’t use actual data). I just wanted to check that I’m not doing something silly (i.e. missing a checkbox!) before putting in all the effort to put an example together!

mattabrams · September 18, 2021, 12:50am

Could you share the panel JSON, @andypellew? That shouldn’t expose too much sensitive info other than queries and value names etc.

To troubleshoot, I would first maybe try changing this panel to graph, save it, and then use inspect to inspect the panel JSON, and save that to a file. Then I would change the panel to time series, save the panel, grab and save the updated panel json, and then diff the two versions. I’d be curious to see how much changed, and if that gives you any clues. Sorta hard to know for sure without more details

andypellew · September 22, 2021, 10:44am

Thanks for responding - I have a work-around for the first of the issues (null values).

I’ve created a dashboard below that you can use for testing.

This uses a Postgres database but can probably be adapted to any data.

How it works is you select values in the “Display” variable and then below you have two sets of graphs. The old “graph” panel is set to hide a series if every value is null (“three” is always null) and the SQL will act in two different ways depending on whether or not the variable is selected.

{
  "__inputs": [],
  "__requires": [
    {
      "type": "grafana",
      "id": "grafana",
      "name": "Grafana",
      "version": "7.5.6"
    },
    {
      "type": "panel",
      "id": "graph",
      "name": "Graph",
      "version": ""
    },
    {
      "type": "panel",
      "id": "timeseries",
      "name": "Time series",
      "version": ""
    }
  ],
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": "-- Grafana --",
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "gnetId": null,
  "graphTooltip": 0,
  "id": null,
  "iteration": 1632304610512,
  "links": [],
  "panels": [
    {
      "datasource": null,
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "palette-classic"
          },
          "custom": {
            "axisLabel": "",
            "axisPlacement": "auto",
            "barAlignment": 0,
            "drawStyle": "line",
            "fillOpacity": 10,
            "gradientMode": "none",
            "hideFrom": {
              "graph": false,
              "legend": false,
              "tooltip": false
            },
            "lineInterpolation": "linear",
            "lineWidth": 1,
            "pointSize": 5,
            "scaleDistribution": {
              "type": "linear"
            },
            "showPoints": "never",
            "spanNulls": false
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          },
          "unit": "short"
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 9,
        "x": 0,
        "y": 0
      },
      "id": 4,
      "options": {
        "graph": {},
        "legend": {
          "calcs": [],
          "displayMode": "list",
          "placement": "bottom"
        },
        "tooltipOptions": {
          "mode": "single"
        }
      },
      "pluginVersion": "7.5.6",
      "targets": [
        {
          "format": "time_series",
          "group": [],
          "metricColumn": "none",
          "rawQuery": true,
          "rawSql": "SELECT $__unixEpochFrom() As time, 'one' AS metric, 1 AS value WHERE 'one' = ANY(ARRAY[${varDisplay}])\nUNION SELECT $__unixEpochTo(), 'one', 1 WHERE 'one' = ANY(ARRAY[${varDisplay}])\nUNION SELECT $__unixEpochFrom() As time, 'two' AS metric, 2 AS value WHERE 'two' = ANY(ARRAY[${varDisplay}])\nUNION SELECT $__unixEpochTo(), 'two', 2 WHERE 'two' = ANY(ARRAY[${varDisplay}])\nUNION SELECT $__unixEpochFrom() As time, 'three' AS metric, null AS value WHERE 'three' = ANY(ARRAY[${varDisplay}])\nUNION SELECT $__unixEpochTo(), 'three', null WHERE 'three' = ANY(ARRAY[${varDisplay}])\n",
          "refId": "A",
          "select": [
            [
              {
                "params": [
                  "value_float"
                ],
                "type": "column"
              }
            ]
          ],
          "table": "reporting_settings",
          "timeColumn": "value_date",
          "timeColumnType": "timestamp",
          "where": [
            {
              "name": "$__timeFilter",
              "params": [],
              "type": "macro"
            }
          ]
        }
      ],
      "title": "Time Series Visualization 1",
      "type": "timeseries"
    },
    {
      "datasource": null,
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "palette-classic"
          },
          "custom": {
            "axisLabel": "",
            "axisPlacement": "auto",
            "barAlignment": 0,
            "drawStyle": "line",
            "fillOpacity": 10,
            "gradientMode": "none",
            "hideFrom": {
              "graph": false,
              "legend": false,
              "tooltip": false
            },
            "lineInterpolation": "linear",
            "lineWidth": 1,
            "pointSize": 5,
            "scaleDistribution": {
              "type": "linear"
            },
            "showPoints": "never",
            "spanNulls": false
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          },
          "unit": "short"
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 9,
        "x": 9,
        "y": 0
      },
      "id": 5,
      "options": {
        "graph": {},
        "legend": {
          "calcs": [],
          "displayMode": "list",
          "placement": "bottom"
        },
        "tooltipOptions": {
          "mode": "single"
        }
      },
      "pluginVersion": "7.5.6",
      "targets": [
        {
          "format": "time_series",
          "group": [],
          "metricColumn": "none",
          "rawQuery": true,
          "rawSql": "SELECT $__unixEpochFrom() As time, \n  CASE WHEN 'one' = ANY(ARRAY[${varDisplay}]) THEN 1 END \"one\",\n  CASE WHEN 'two' = ANY(ARRAY[${varDisplay}]) THEN 2 END \"two\",\n  CASE WHEN 'three' = ANY(ARRAY[${varDisplay}]) THEN null::numeric END \"three\"\nUNION \nSELECT $__unixEpochTo() As time, \n  CASE WHEN 'one' = ANY(ARRAY[${varDisplay}]) THEN 1 END \"one\",\n  CASE WHEN 'two' = ANY(ARRAY[${varDisplay}]) THEN 2 END \"two\",\n  CASE WHEN 'three' = ANY(ARRAY[${varDisplay}]) THEN null::numeric END \"three\"\n",
          "refId": "A",
          "select": [
            [
              {
                "params": [
                  "value_float"
                ],
                "type": "column"
              }
            ]
          ],
          "table": "reporting_settings",
          "timeColumn": "value_date",
          "timeColumnType": "timestamp",
          "where": [
            {
              "name": "$__timeFilter",
              "params": [],
              "type": "macro"
            }
          ]
        }
      ],
      "title": "Time Series Visualization 2",
      "type": "timeseries"
    },
    {
      "aliasColors": {},
      "bars": false,
      "dashLength": 10,
      "dashes": false,
      "datasource": null,
      "fieldConfig": {
        "defaults": {},
        "overrides": []
      },
      "fill": 1,
      "fillGradient": 0,
      "gridPos": {
        "h": 9,
        "w": 9,
        "x": 0,
        "y": 8
      },
      "hiddenSeries": false,
      "id": 2,
      "legend": {
        "avg": false,
        "current": false,
        "hideEmpty": true,
        "max": false,
        "min": false,
        "show": true,
        "total": false,
        "values": false
      },
      "lines": true,
      "linewidth": 1,
      "nullPointMode": "null",
      "options": {
        "alertThreshold": true
      },
      "percentage": false,
      "pluginVersion": "7.5.6",
      "pointradius": 2,
      "points": false,
      "renderer": "flot",
      "seriesOverrides": [],
      "spaceLength": 10,
      "stack": false,
      "steppedLine": false,
      "targets": [
        {
          "format": "time_series",
          "group": [],
          "metricColumn": "none",
          "rawQuery": true,
          "rawSql": "SELECT $__unixEpochFrom() As time, 'one' AS metric, 1 AS value WHERE 'one' = ANY(ARRAY[${varDisplay}])\nUNION SELECT $__unixEpochTo(), 'one', 1 WHERE 'one' = ANY(ARRAY[${varDisplay}])\nUNION SELECT $__unixEpochFrom() As time, 'two' AS metric, 2 AS value WHERE 'two' = ANY(ARRAY[${varDisplay}])\nUNION SELECT $__unixEpochTo(), 'two', 2 WHERE 'two' = ANY(ARRAY[${varDisplay}])\nUNION SELECT $__unixEpochFrom() As time, 'three' AS metric, null AS value WHERE 'three' = ANY(ARRAY[${varDisplay}])\nUNION SELECT $__unixEpochTo(), 'three', null WHERE 'three' = ANY(ARRAY[${varDisplay}])\n",
          "refId": "A",
          "select": [
            [
              {
                "params": [
                  "value_float"
                ],
                "type": "column"
              }
            ]
          ],
          "table": "reporting_settings",
          "timeColumn": "value_date",
          "timeColumnType": "timestamp",
          "where": [
            {
              "name": "$__timeFilter",
              "params": [],
              "type": "macro"
            }
          ]
        }
      ],
      "thresholds": [],
      "timeFrom": null,
      "timeRegions": [],
      "timeShift": null,
      "title": "Graph Visualization 1",
      "tooltip": {
        "shared": true,
        "sort": 0,
        "value_type": "individual"
      },
      "type": "graph",
      "xaxis": {
        "buckets": null,
        "mode": "time",
        "name": null,
        "show": true,
        "values": []
      },
      "yaxes": [
        {
          "$$hashKey": "object:271",
          "format": "short",
          "label": null,
          "logBase": 1,
          "max": null,
          "min": null,
          "show": true
        },
        {
          "$$hashKey": "object:272",
          "format": "short",
          "label": null,
          "logBase": 1,
          "max": null,
          "min": null,
          "show": true
        }
      ],
      "yaxis": {
        "align": false,
        "alignLevel": null
      }
    },
    {
      "aliasColors": {},
      "bars": false,
      "dashLength": 10,
      "dashes": false,
      "datasource": null,
      "fieldConfig": {
        "defaults": {},
        "overrides": []
      },
      "fill": 1,
      "fillGradient": 0,
      "gridPos": {
        "h": 9,
        "w": 9,
        "x": 9,
        "y": 8
      },
      "hiddenSeries": false,
      "id": 6,
      "legend": {
        "avg": false,
        "current": false,
        "hideEmpty": true,
        "max": false,
        "min": false,
        "show": true,
        "total": false,
        "values": false
      },
      "lines": true,
      "linewidth": 1,
      "nullPointMode": "null",
      "options": {
        "alertThreshold": true
      },
      "percentage": false,
      "pluginVersion": "7.5.6",
      "pointradius": 2,
      "points": false,
      "renderer": "flot",
      "seriesOverrides": [],
      "spaceLength": 10,
      "stack": false,
      "steppedLine": false,
      "targets": [
        {
          "format": "time_series",
          "group": [],
          "metricColumn": "none",
          "rawQuery": true,
          "rawSql": "SELECT $__unixEpochFrom() As time, \n  CASE WHEN 'one' = ANY(ARRAY[${varDisplay}]) THEN 1 END \"one\",\n  CASE WHEN 'two' = ANY(ARRAY[${varDisplay}]) THEN 2 END \"two\",\n  CASE WHEN 'three' = ANY(ARRAY[${varDisplay}]) THEN null::numeric END \"three\"\nUNION \nSELECT $__unixEpochTo() As time, \n  CASE WHEN 'one' = ANY(ARRAY[${varDisplay}]) THEN 1 END \"one\",\n  CASE WHEN 'two' = ANY(ARRAY[${varDisplay}]) THEN 2 END \"two\",\n  CASE WHEN 'three' = ANY(ARRAY[${varDisplay}]) THEN null::numeric END \"three\"\n",
          "refId": "A",
          "select": [
            [
              {
                "params": [
                  "value_float"
                ],
                "type": "column"
              }
            ]
          ],
          "table": "reporting_settings",
          "timeColumn": "value_date",
          "timeColumnType": "timestamp",
          "where": [
            {
              "name": "$__timeFilter",
              "params": [],
              "type": "macro"
            }
          ]
        }
      ],
      "thresholds": [],
      "timeFrom": null,
      "timeRegions": [],
      "timeShift": null,
      "title": "Graph Visualization 2",
      "tooltip": {
        "shared": true,
        "sort": 0,
        "value_type": "individual"
      },
      "type": "graph",
      "xaxis": {
        "buckets": null,
        "mode": "time",
        "name": null,
        "show": true,
        "values": []
      },
      "yaxes": [
        {
          "$$hashKey": "object:271",
          "format": "short",
          "label": null,
          "logBase": 1,
          "max": null,
          "min": null,
          "show": true
        },
        {
          "$$hashKey": "object:272",
          "format": "short",
          "label": null,
          "logBase": 1,
          "max": null,
          "min": null,
          "show": true
        }
      ],
      "yaxis": {
        "align": false,
        "alignLevel": null
      }
    }
  ],
  "schemaVersion": 27,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": [
      {
        "allValue": null,
        "current": {
          "selected": true,
          "tags": [],
          "text": [
            "one",
            "three"
          ],
          "value": [
            "one",
            "three"
          ]
        },
        "description": null,
        "error": null,
        "hide": 0,
        "includeAll": false,
        "label": "Display",
        "multi": true,
        "name": "varDisplay",
        "options": [
          {
            "selected": true,
            "text": "one",
            "value": "one"
          },
          {
            "selected": false,
            "text": "two",
            "value": "two"
          },
          {
            "selected": true,
            "text": "three",
            "value": "three"
          }
        ],
        "query": "one,two,three",
        "queryValue": "",
        "skipUrlSync": false,
        "type": "custom"
      }
    ]
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "Time Series vs Graph Visualization Test",
  "uid": "JCWwVDHnk",
  "version": 4
}

andypellew · September 22, 2021, 10:52am

Here’s the screenshot. You can see that in the Graph panels - by setting to hide a series which is all null - values do not appear in the legend whereas in the Time Series panels they still do UNLESS you use metrics and UNIONS.

The reason that isn’t an acceptable solution for us is that our data format is produced by sensors that are sampling every hour. You can view a year’s worth of data for 20 sensors at a time. We can record about 30 measurements at each time (temperature, humidity, battery, variance, vrms, etc)

The data format is basically; sensor_id, time, measurements (JSON).

If we split the SQL per measurement then we hit the same set of records multiple times whereas some SQL like this;

SELECT $__unixEpochFrom() As time, 
  CASE WHEN 'one' = ANY(ARRAY[${varDisplay}]) THEN 1 END "one",
  CASE WHEN 'two' = ANY(ARRAY[${varDisplay}]) THEN 2 END "two",
  CASE WHEN 'three' = ANY(ARRAY[${varDisplay}]) THEN null::numeric END "three"

Means we will only hit each record once.

Hopefully, this makes sense. If not ask away!

mattabrams · September 23, 2021, 12:17am

@andypellew I’ve tagged this question for some of the squads to try and tackle.

In the meantime, have you tried upgrading to Grafana 8? Two reasons to do so:

huge improvements and features for core Grafana
the SQL datasources went through a breaking change in v8.0.0. I don’t think that issues is related at all in this case, but I’d hate to see you invest too much time in 7.5 just to see some of your other dashboards break when you finally upgrade to v8…

andypellew · September 23, 2021, 8:09am

We run with Grafana 8 on our testing environment and Grafana 7.5.6 on live (at the moment). This issue was discovered while switching some of our dashboards from the old Graph panel to Time Series to get them ready for an eventual upgrade.

andypellew · September 23, 2021, 8:11am

In essence, the bit we need back is this;

Screenshot 2021-09-23 at 09.10.34

This appears under the “legend” properties of the Graph panel but is no longer present on Time Series (beta).

mattabrams · September 28, 2021, 12:11am

Hi @andypellew

sorry for the delay. This functionality did not disappear but moved into the overrides menu. This allows for even more granular customizations. Try clicking Overrides at the top of the panel editor. Then click add field override and choose a method for selecting your field / series. Then click add override property and scroll through the options until you reach Series > Hide in Area choose that and you should be able to toggle any series on/off from the tooltip, legend, or graph

andypellew · September 28, 2021, 8:02am

Thanks for responding, but the original functionality was data-aware (“hide the series if all the values are null”) whereas the new functionality does not seem to be (is that correct?).

It’s the data-aware functionality I need as I won’t know when designing the dashboard whether the series should be hidden.

mattabrams · September 28, 2021, 10:07pm

@andypellew thanks for pointing that out–def a different pattern, yes. I know there is still ongoing work to achieve full parity between the new time-series panel and old graph panel: let me see if I can find this on a roadmap. If not, it might make a very good feature request for the repo

system · September 8, 2022, 4:36pm

This topic was automatically closed after 365 days. New replies are no longer allowed.

Topic		Replies	Views
How to hide zero or null values in Legend in Grafana 8? Dashboards panel , dashboard	9	27651	October 7, 2022
Hide the legend and tooltip for all-null or all-zero series in panel from grafana Time Series Panel mysql , time-series-panel , legend	6	872	July 14, 2023
New Time Series panel - negative Y axis? Grafana	19	12184	February 20, 2022
Graph Panel with Values stacking works wrong Time Series Panel	3	3390	August 20, 2019
Show all series in TimeSeries by default Time Series Panel time-series-panel	0	282	September 27, 2022

Hiding a series in the new "Time Series (beta)" panel (Grafana 7.5.6)

Related topics