Grafana: Show Panel Based on Variable

Hey everyone! So, you’re diving into Grafana, trying to make your dashboards super dynamic, and you’ve hit a common snag: how do you show a panel only when a certain variable is selected? It’s a totally valid question, and honestly, it’s one of those features that can make your dashboards go from ‘meh’ to ‘whoa!’ really fast. We’re going to break down how to use Grafana’s templating variables to control panel visibility. This isn’t just about making things look pretty, guys; it’s about creating more intuitive and efficient dashboards that serve up the right information at the right time, without overwhelming your users. Imagine a scenario where you have a complex dashboard with tons of panels, and you only want to see the relevant ones based on, say, the environment you’re monitoring (like ‘dev’, ‘staging’, or ‘prod’). That’s exactly what we’re going to achieve. So, buckle up, and let’s get this Grafana magic happening!

Understanding Grafana Templating Variables

Before we jump into making panels appear and disappear, let’s get a solid grip on Grafana templating variables . These bad boys are the heart and soul of dynamic dashboards. Think of them as placeholders that can be dynamically updated, typically from a query to your data source. You can create variables for things like server names, regions, application names, or, as in our case, specific states or options that will control other elements on your dashboard. The power here is immense. When a user selects a value from a variable dropdown, Grafana can automatically update queries in your panels, refresh the dashboard, and, most importantly for this discussion, control the visibility of entire panels. There are different types of variables you can create: Query, Custom, Constant, Datasource, and Interval. For showing or hiding panels, we’re usually going to be working with variables that have a set of predefined options, or ones that query for specific values like ‘enabled’ or ‘disabled’, or maybe ‘production’ versus ‘testing’. The key is that these variables provide a way to filter or select data and, by extension, the visualization of that data. When you set up a variable, you define its name, type, and how it gets its values. Then, in your panel configurations or even other variables, you can reference this variable using the $<variable_name> syntax. This is crucial because it’s how we’ll tell Grafana to conditionally render panels. So, familiarize yourselves with creating and using variables; it’s the foundational skill for unlocking advanced dashboard features in Grafana. Without variables, your dashboards are static, but with them, they become interactive powerhouses.

Creating a Conditional Variable

Alright, let’s get our hands dirty with creating a variable that will help us control panel visibility. This is where the magic really begins. The most common way to achieve conditional panel display is by using a variable that has a specific value when you want the panel to show, and perhaps a different value (or no value) when you want it hidden. For our example, let’s say we want to show a detailed ‘Production Metrics’ panel only when the user selects ‘Production’ from a ‘Environment’ variable. So, first things first, you need to go to your Grafana dashboard, click the gear icon (dashboard settings), and then navigate to the ‘Variables’ section. Here, you’ll click ‘Add variable’.

For the ‘Name’, let’s call it showProdPanel . We’ll set the ‘Type’ to ‘Custom’. Why custom? Because we want to define the exact values that will trigger our panel. In the ‘Values separated by’ field, we’ll enter || . Then, in the ‘Values’ field, we’ll enter true . Now, the crucial part: enable the ‘Include All’ option . This is a neat trick. When ‘All’ is selected, Grafana will effectively use all possible values that your variable could have. However, when you only have one value defined ( true in this case), selecting ‘All’ will also evaluate to true . This setup allows us to toggle the panel on and off using a single variable. You’ll see an option for ‘Selection Options’. Make sure ‘Multi-value’ is disabled and ‘Include All’ is enabled . This simplifies the logic for our conditional display. The final variable configuration should look something like this: Name: showProdPanel , Type: Custom , Values: true , Include All: Enabled , Multi-value: Disabled . Once you’ve set this up, click ‘Add’ or ‘Update’. This showProdPanel variable will now be available in your dashboard, and its value will be true when you select ‘All’ (or if we had more options, the specific ‘true’ option if we configured it that way), and potentially something else if we were to add more complex logic later. For now, focusing on this simple true value is key to making our panel appear.

Advanced Variable Types and Use Cases

While a custom variable with a simple true value works wonders for basic toggling, guys, Grafana offers a universe of possibilities with other variable types that can also be leveraged for conditional logic. Let’s explore a couple of these advanced scenarios. First, consider using a Query variable . Imagine you have a service that can be either ‘active’ or ‘inactive’. You could create a query variable named serviceStatus that queries your monitoring system for the current status of a specific service. If the query returns ‘active’, the variable serviceStatus will hold the value ‘active’. You can then use this variable to show detailed metrics only when serviceStatus is ‘active’. The query might look something like SELECT status FROM service_table WHERE service_name='my_app' for a SQL data source, or a specific Prometheus query. The magic happens when you use this variable in your panel’s Hide condition (which we’ll cover next). Another powerful approach is using a Constant variable . Let’s say you have a specific threshold value that you only want to display warnings for. You could define a constant variable, say warningThreshold , with the value 90 . Then, in your panel’s query, you could use this variable, and also use it in the panel’s hide condition. This is less about dynamic selection by the user and more about hardcoding a value that affects display logic. What if you want to show a panel only if a specific option is selected from another variable? This is super common. Let’s say you have a main variable called environment with options ‘dev’, ‘staging’, ‘prod’. You want a specific ‘Production Load Balancer Metrics’ panel to show only when ‘prod’ is selected in the environment variable. In this case, you’d create a separate variable, maybe called isProductionSelected . This new variable could be a ‘Custom’ type, with Values: prod , and crucially, only the value prod defined. Then, you’d use isProductionSelected to control the visibility of the ‘Production Load Balancer Metrics’ panel. Alternatively, and more elegantly, you can achieve this directly within the panel’s hide condition without an extra variable. This brings us to the next major step: applying these variables to control panel visibility.

Applying Conditions to Panels

Now that we’ve got our variable set up, the next logical step is to tell Grafana when to show or hide a panel based on that variable’s value. This is where the ‘Hide’ condition comes into play within the panel editor. It’s a super handy feature that lets you create dynamic dashboards that adapt to user selections. Let’s dive into how you configure this.

When you’re editing a panel (either creating a new one or editing an existing one), scroll down in the panel settings to the ‘General’ section. You’ll find a setting called ‘Hide’. This is your gateway to conditional panel display. Click on the dropdown menu for ‘Hide’. You’ll see several options, but the one we’re interested in is ‘From conditions’.

Once you select ‘From conditions’, a new input field will appear, allowing you to write a JavaScript-like expression. This expression tells Grafana when to hide the panel. If the expression evaluates to true , the panel will be hidden. If it evaluates to false , the panel will be shown. This is the inverse of what you might intuitively think – true means hide , false means show . So, to show our panel when our showProdPanel variable is true , we need the condition to evaluate to false when showProdPanel is true . Therefore, the condition should be ${showProdPanel} == false . Remember, we set up showProdPanel to be true when we want to show the panel. So, if ${showProdPanel} is true , we want the panel to be visible. This means the condition ${showProdPanel} == false will evaluate to false (hiding the panel is false, meaning show it), which is exactly what we want. Conversely, if showProdPanel were somehow false (or not set, depending on your variable configuration), the condition ${showProdPanel} == false would evaluate to true , and the panel would be hidden.

Hiding Panels with Multiple Conditions

What if you need more complex logic? For instance, what if you want a panel to show only when both the ‘Environment’ variable is set to ‘Production’ and a specific ‘Feature Flag’ variable is enabled? Grafana’s condition editor is surprisingly flexible, allowing you to chain multiple conditions using standard logical operators like && (AND) and || (OR). Let’s say you have an environment variable (which can be ‘dev’, ‘staging’, ‘prod’) and a enableDetailedMetrics variable (which can be ‘true’ or ‘false’). You want to show a panel that displays detailed production metrics only when environment is ‘prod’ AND enableDetailedMetrics is ‘true’.

To achieve this, you’d set up your ‘Environment’ variable as a ‘Query’ or ‘Custom’ type, and your enableDetailedMetrics as a ‘Custom’ variable with values ‘true’ and ‘false’. Then, in the panel’s ‘Hide’ condition, you would write:

${environment} != "prod" || ${enableDetailedMetrics} == "false"

Let’s break this down: The expression ${environment} != "prod" means