topic Re: image overlay with single value panel changing in color in Dashboards & Visualizations

image overlay with single value panel changing in color

mdmaala — Mon, 29 Apr 2019 08:32:51 GMT

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:

Re: image overlay with single value panel changing in color

niketn — Mon, 29 Apr 2019 12:46:18 GMT

@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.

Re: image overlay with single value panel changing in color

mdmaala — Mon, 29 Apr 2019 16:53:49 GMT

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.

Re: image overlay with single value panel changing in color

mdmaala — Mon, 29 Apr 2019 17:03:15 GMT

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

Re: image overlay with single value panel changing in color

mdmaala — Mon, 29 Apr 2019 17:04:21 GMT

I now posted below my xml code

Re: image overlay with single value panel changing in color

niketn — Mon, 29 Apr 2019 17:15:42 GMT

@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.

Re: image overlay with single value panel changing in color

niketn — Mon, 29 Apr 2019 17:17:20 GMT

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

Re: image overlay with single value panel changing in color

niketn — Mon, 29 Apr 2019 17:24:30 GMT

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

Re: image overlay with single value panel changing in color

mdmaala — Mon, 29 Apr 2019 18:03:46 GMT

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

Re: image overlay with single value panel changing in color

mdmaala — Mon, 29 Apr 2019 18:04:50 GMT

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

Re: image overlay with single value panel changing in color

niketn — Tue, 30 Apr 2019 06:42:23 GMT

Awesome 🙂 Yay!!!