Dashboards & Visualizations

image overlay with single value panel changing in color

mdmaala
Communicator

hi! I've seen @niketnilay 's example of image overlay with single values, and I tried applying it on my own usecase. Successfully I was able to put put my own image and single value panel, however, what I want is for the panels to change based on my set conditions, but when I applied it the colors are not changing bit the it displays the correct value. below is my xml code:

0 Karma
1 Solution

niketnilay
Legend

@mdmaala I am taking first query as an example. Does not seem like you are using any existing field or token from search which can be used as color for visualization. So you need to create the same first.

          <search id="M1">
              <query>|savedsearch rename1  
 |sort 1 -_time Machine1 
 |streamstats window=1 current=f last(_time) as prevTime last(Green) as RUN last(Yellow) as IDLE last(Red) as STOP by Username
 |eval clock = time()
 |eval rDUR = round((clock-_time)/60)
 |eval RunTime = case(Green=1,rDUR,Yellow=1,rDUR,Red=1,rDUR,1=1,0)
 |eval range= case(Green=1,"low", Yellow=1,"elevated", Red=1,"severe"),
           color= case(Green=1,"green", Yellow=1,"yellow", Red=1,"red"),
 |table RunTime range color</query>
              <earliest>$earliest$</earliest>
              <latest>$latest$</latest>
              <progress>
                <set token="M1">$result.RunTime$</set>
                <set token="M1Color">$result.color$</set>
              </progress>
          </search>

On similar lines change M2 search and create token M2Color.
Finally set the color in the HTML div using background color for font color. I have listed examples of each of these below. Use as per your need.

              <div class="singleValue" style="background:$M1Color$;color:white;" id="M1">$M1$</div>
              <div class="singleValue" style="color:$M2Color$" id="M2">$M2$</div>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketnilay
Legend

@mdmaala I am taking first query as an example. Does not seem like you are using any existing field or token from search which can be used as color for visualization. So you need to create the same first.

          <search id="M1">
              <query>|savedsearch rename1  
 |sort 1 -_time Machine1 
 |streamstats window=1 current=f last(_time) as prevTime last(Green) as RUN last(Yellow) as IDLE last(Red) as STOP by Username
 |eval clock = time()
 |eval rDUR = round((clock-_time)/60)
 |eval RunTime = case(Green=1,rDUR,Yellow=1,rDUR,Red=1,rDUR,1=1,0)
 |eval range= case(Green=1,"low", Yellow=1,"elevated", Red=1,"severe"),
           color= case(Green=1,"green", Yellow=1,"yellow", Red=1,"red"),
 |table RunTime range color</query>
              <earliest>$earliest$</earliest>
              <latest>$latest$</latest>
              <progress>
                <set token="M1">$result.RunTime$</set>
                <set token="M1Color">$result.color$</set>
              </progress>
          </search>

On similar lines change M2 search and create token M2Color.
Finally set the color in the HTML div using background color for font color. I have listed examples of each of these below. Use as per your need.

              <div class="singleValue" style="background:$M1Color$;color:white;" id="M1">$M1$</div>
              <div class="singleValue" style="color:$M2Color$" id="M2">$M2$</div>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

mdmaala
Communicator

thank you so much @niketnilay ! i think this already works for me 🙂

0 Karma

niketnilay
Legend

Awesome 🙂 Yay!!!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

mdmaala
Communicator
<dashboard stylesheet="overlay.css">
 <label>Machines</label>
<fieldset autoRun="true" submitButton="false">
   <input type="time" searchWhenChanged="true">
     <default>
       <earliest>-24h@h</earliest>
       <latest>now</latest>
     </default>
   </input>
 </fieldset>
 <row>
     <panel id="image_overlay_panel">
         <search id="M1">
             <query>|savedsearch rename1  
|sort 1 -_time Machine1 
|streamstats window=1 current=f last(_time) as prevTime last(Green) as RUN last(Yellow) as IDLE last(Red) as STOP by Username
|eval clock = time()
|eval rDUR = round((clock-_time)/60)
|eval RunTime = case(Green=1,rDUR,Yellow=1,rDUR,Red=1,rDUR,1=1,0)
|eval range= case(Green=1,"low", Yellow=1,"elevated", Red=1,"severe")
|table RunTime range</query>
             <earliest>$earliest$</earliest>
             <latest>$latest$</latest>
             <progress>
               <set token="M1">$result.RunTime$</set>
             </progress>
         </search>
         <search id="M2">
             <query>|savedsearch rename2  
|sort 1 -_time Machine1 
|streamstats window=1 current=f last(_time) as prevTime last(Green) as RUN last(Yellow) as IDLE last(Red) as STOP by Username
|eval clock = time()
|eval rDUR = round((clock-_time)/60)
|eval RunTime = case(Green=1,rDUR,Yellow=1,rDUR,Red=1,rDUR,1=1,0)
|eval range= case(Green=1,"low", Yellow=1,"elevated", Red=1,"severe")
|table RunTime range</query>
             <earliest>$earliest$</earliest>
             <latest>$latest$</latest>
             <progress>
               <set token="M2">$result.RunTime$</set>
             </progress>
         </search>
         <html>
             <div class="ingestion_pipeline">
                 <div class="image"></div>
                 <div class="singleValue" id="M1">$M1$</div>
                 <div class="singleValue" id="M2">$M2$</div>
             </div>
         </html>
     </panel>
 </row>
</dashboard>
0 Karma

niketnilay
Legend

Converted code to comment so that question is not marked as answered.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

niketnilay
Legend

@mdmaala while posting code on Splunk Answers use the Code Button (101010 or shortcut Ctrl+K) so that special characters do not escape.

A screenshot of what you currently have and what you expect would also help. Please mock/anonymize and sensitive information in your code/data shared.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

mdmaala
Communicator

I now posted below my xml code

0 Karma

mdmaala
Communicator

hi at @niketnilay sure I will repost my code here. however I will not be able to post a screenshot of my codes, since I do not have enough points.

0 Karma

niketnilay
Legend

@mdmaala you can always post the image on any image sharing site like imgur and then use the Image button <img> or shortcut Ctrl+G to post the image using the image URL. Ensure that you mask/anonymize any sensitive information before posting the same.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

mdmaala
Communicator

i'll take note of this for the next time! 🙂

0 Karma
Get Updates on the Splunk Community!

Improve Your Security Posture

Watch NowImprove Your Security PostureCustomers are at the center of everything we do at Splunk and security ...

Maximize the Value from Microsoft Defender with Splunk

 Watch NowJoin Splunk and Sens Consulting for this Security Edition Tech TalkWho should attend:  Security ...

This Week's Community Digest - Splunk Community Happenings [6.27.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...