Join the Conversation
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Re: image overlay with single value panel changing...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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:
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
thank you so much @niketnilay ! i think this already works for me 🙂
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Awesome 🙂 Yay!!!
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
<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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Converted code to comment so that question is not marked as answered.
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I now posted below my xml code
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
i'll take note of this for the next time! 🙂
Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!
Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.
[Puzzles] Solve, Learn, Repeat: Matching cron expressions
Design, Compete, Win: Submit Your Best Splunk Dashboards for a .conf26 Pass
May 2026 Splunk Expert Sessions: Security & Observability
