topic Dynamically Change panel background color based on returned value (no js possible) in Splunk Search

Dynamically Change panel background color based on returned value (no js possible)

AdrianH — Fri, 23 Jul 2021 21:21:35 GMT

Hi.

First, I've been using this forum for a few months now as I'm new to Splunk. Thanks to all the contributors on here!!

So here's what I'm trying to figure out. I have a dashboard with 3 line charts. Each line chart is in it's own unique panel (each panel has it's own unique Id). I'd like to change the panel background when a returned query value is above a certain number but green when below that number.

This is the sample code I'm using to hardcode the 3 panels to either red or green.

<row>
<panel>
<html>
<style>
#A .dashboard-panel {
background: #5AAF71 !important;
}

#B .dashboard-panel {
background: #E35033 !important;
}

#C .dashboard-panel {
background: #5AAF71 !important;
}
</style>

</html>
</panel>
</row>

But I'm looking for a way to dynamically change the panel background colors based on the query returning value.

Also, I am not an admin and we don't have permissions to load javascript / CSS files so all of my coding will have to be set into the Dashboard XML.

I have used the range before to change colors in the Singles. Just not sure if it's possible with a panel background that the line chart sits in.

thanks in advance!

Re: Dynamically Change panel background color based on returned value (no js possible)

ITWhisperer — Fri, 23 Jul 2021 23:10:58 GMT

You can use token in the CSS stylesheet

#A .dashboard-element-header { background: $backgroundcolour$ !important; }

which you could set in the done handler of the search

<done> <set token="backgroundcolour">green</set> </done>

Re: Dynamically Change panel background color based on returned value (no js possible)

AdrianH — Sat, 24 Jul 2021 14:25:15 GMT

I've been playing around with this since last night but no luck. The concept of event handling is making more sense based on your suggestion + reading more about them last night.

But I'm still not able to get this working. And I'm guessing it's because I need a condition tag?

So Instead of this in the <search>:
<done>
<set token="backgroundcolour">green</set>
</done>

To set the background to red if value > 80, else default to green, then maybe something like this added to the search tag?

<done>
<condition match="result.AvgMemUsed>80">
<set token="backgroundcolour">red</set>
</condition>
<condition>
<set token="backgroundcolour">green</set>
</condition>
</done>

Where the 2nd condition (if i'm understanding the syntax is right) is the default if the other condition is not true.

I've been trying the 2nd solution (as well as many other things) but no luck so far.

thanks!!

Re: Dynamically Change panel background color based on returned value (no js possible)

ITWhisperer — Sat, 24 Jul 2021 14:58:59 GMT

You need to put the field name in single quotes and you have to encode the greater than sign

<done> <condition match="'result.AvgMemUsed'>80"> <set token="backgroundcolour">red</set> </condition> <condition> <set token="backgroundcolour">green</set> </condition> </done>

Re: Dynamically Change panel background color based on returned value (no js possible)

AdrianH — Sat, 24 Jul 2021 22:58:23 GMT

That worked!! Thank you very much, sir!