Splunk Search

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

AdrianH
Explorer

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!

 

 

 

Labels (1)
Tags (1)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust

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

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

View solution in original post

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

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>
0 Karma

AdrianH
Explorer

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!!

 

 

 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

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

 <done>
        <condition match="'result.AvgMemUsed'&gt;80">
                <set token="backgroundcolour">red</set>
        </condition>
        <condition>
                <set token="backgroundcolour">green</set>
        </condition>
</done>
0 Karma

AdrianH
Explorer

That worked!!    Thank you very much, sir!

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...