How to shift image inside an image in Splunk on the basis of thresholds?

[220757]

I want to shift image according to the changing volume of payment. For instance we want to change a pointer inside a row of blocks which moves to another block according to some thresholds.

[niketn]

[Updated Answer]

Added Image Overlay Example as per mock screenshot provided ( I have avoided JavaScript for Simplicity, however JavaScript will be efficient and require less coding. You can even include Canvas/SVG directly in JavaScript even id you do not want to build Custom Visualization). Also while this is a quick option for your visualization, you should actually be utilizing svg/canvas for Images/Icons using either Simple XML JavaScript Extension or else building your own Custom Visualization using Splunk Custom Visualization API as stated earlier:

Following are various screenshots with test range (I have considered percent for Simplicity, you can change to actual volume)

Following is the run anywhere Simple XML Dashboard code:

<form>
  <label>Shift Image inside Base Image Overlay</label>
  <search>
    <query>| makeresults
| eval payment_percent=round($tokPaymentPercent$,0)
| table payment_percent
    </query>
    <progress>
      <condition match="$result.payment_percent$&lt;=0">
        <set token="tokGreyValue">o</set>
        <set token="tokGreenValue"></set>
        <set token="tokYellowValue"></set>
        <set token="tokAmberValue"></set>
        <set token="tokRedValue"></set>
        <set token="tokGreyClass">pointer</set>
        <set token="tokGreenClass"></set>
        <set token="tokYellowClass"></set>
        <set token="tokAmberClass"></set>
        <set token="tokRedClass"></set>
      </condition>
      <condition match="$result.payment_percent$&gt;0 AND $result.payment_percent$&lt;=40">
        <set token="tokGreyValue"></set>
        <set token="tokGreenValue">&gt;</set>
        <set token="tokYellowValue"></set>
        <set token="tokAmberValue"></set>
        <set token="tokRedValue"></set>
        <set token="tokGreyClass"></set>
        <set token="tokGreenClass">pointer</set>
        <set token="tokYellowClass"></set>
        <set token="tokAmberClass"></set>
        <set token="tokRedClass"></set>
      </condition>
      <condition match="$result.payment_percent$&gt;40 AND $result.payment_percent$&lt;=60">
        <set token="tokGreyValue"></set>
        <set token="tokGreenValue"></set>
        <set token="tokYellowValue">&gt;</set>
        <set token="tokAmberValue"></set>
        <set token="tokRedValue"></set>
        <set token="tokGreyClass"></set>
        <set token="tokGreenClass"></set>
        <set token="tokYellowClass">pointer</set>
        <set token="tokAmberClass"></set>
        <set token="tokRedClass"></set>
      </condition>
      <condition match="$result.payment_percent$&gt;60 AND $result.payment_percent$&lt;=80">
        <set token="tokGreyValue"></set>
        <set token="tokGreenValue"></set>
        <set token="tokYellowValue"></set>
        <set token="tokAmberValue">&gt;</set>
        <set token="tokRedValue"></set>
        <set token="tokGreyClass"></set>
        <set token="tokGreenClass"></set>
        <set token="tokYellowClass"></set>
        <set token="tokAmberClass">pointer</set>
        <set token="tokRedClass"></set>
      </condition>
      <condition match="$result.payment_percent$&gt;80">
        <set token="tokGreyValue"></set>
        <set token="tokGreenValue"></set>
        <set token="tokYellowValue"></set>
        <set token="tokAmberValue"></set>
        <set token="tokRedValue">&gt;</set>
        <set token="tokGreyClass"></set>
        <set token="tokGreenClass"></set>
        <set token="tokYellowClass"></set>
        <set token="tokAmberClass"></set>
        <set token="tokRedClass">pointer</set>
      </condition>
    </progress>
  </search>
  <fieldset submitButton="false">
    <input type="text" token="tokPaymentPercent" searchWhenChanged="true">
      <label>Payment Percent (Test Data - 0 - 100)</label>
      <default>0</default>
    </input>
  </fieldset>
  <row>
    <panel id="image_overlay_panel">
      <html>
        <style>
          .payment_rangemap {
              position: relative;
              width: 500px;
              height: 150px;
          }
          #image_overlay_panel .image{
              background: transparent 50% 50% no-repeat url('/static/app/$env:app$/base_image.png');
              position:absolute;
              top: 0px;
              left: 0px;
              width: inherit;
              height: inherit;
          }
          .pointer {
              text-align: center;
              font-size: 6em;
              font-weight: bold;
              color: black;
          }
          #image_overlay_panel #grey {
             position: absolute;
             top: 40%;
             left: 30px;
          }
          #image_overlay_panel #green {
             position: absolute;
             top: 40%;
             left: 130px;
          }
          #image_overlay_panel #yellow {
             position: absolute;
             top: 40%;
             left: 230px;
          }
          #image_overlay_panel #amber {
             position: absolute;
             top: 40%;
             left: 330px;
          }
          #image_overlay_panel #red {
             position: absolute;
             top: 40%;
             left: 430px;
          }
        </style>
        <div class="payment_rangemap">
            <div class="image"/>
            <div class="singleValue $tokGreyClass$" id="grey">$tokGreyValue$</div>
            <div class="singleValue $tokGreenClass$" id="green">$tokGreenValue$</div>
            <div class="singleValue $tokYellowClass$" id="yellow">$tokYellowValue$</div>
            <div class="singleValue $tokAmberClass$" id="amber">$tokAmberValue$</div>
            <div class="singleValue $tokRedClass$" id="red">$tokRedValue$</div>
        </div>
        <div class="rangeLegend" style="background-color:black;">
          <h3 class="legendTitle" style="color:white;">Percent Range (Legend)</h3>
          <ul>
            <li style="color:grey;">&lt;=0 : Grey</li>
            <li style="color:green;">1-40 : Green</li>
            <li style="color:yellow;">41-60 : Yellow</li>
            <li style="color:orange;">61-80 : Amber</li>
            <li style="color:red;">&gt;81 : Red</li>
          </ul>
        </div>
      </html>
    </panel>
  </row>
</form>

The static file base image (base_image.png) to be placed under your Splunk App's appserver/static folder (i.e. $SPLUNK_HOME/etc/apps/<YourAppName>/appserver/static) is:

PS: This example uses static image file hence you might require refresh/reboot/bump of Splunk and also clearing your internet browser history.

---

@493669, are you trying to create your own visualization?

Ideally you should be using Marker Gauge for faster turnaround time with this requirement: http://docs.splunk.com/Documentation/Splunk/latest/Viz/CreateGauges#Marker_gauge

If you are looking to come up with exact visualization like above,
1) You should create your own visualization using Splunk Custom Visualization API and draw visual elements using SVG or Canvas as per your preference.
2) Create an Image overlay with base image as the boxes that you have and overlaid with pointer/s based on value. Following is my Splunk Wiki Talk link for the same topic: https://wiki.splunk.com/User_talk:Niketnilay#Topic_1:_Image_Overlay_with_Icons_Example:_Extends_Imag...

[220757]

Gauge will show a single value in relation to customized ranges. But i need something like above image. Apart from gauge visualisation what else can be used to show image based on which static value field difference is dominant.

[niketn]

I would say Option 2 is quick but dirty way to do it. Ideally you should use option 1 to create your own scalable visualization based on SVG.

@220757, I have updated my answer with Image Overlay Example. By the way following attachment contains Marker Gauge with Horizontal Orientation which gives similar appeal. Please try out and confirm.

Following is Simple XML for Marker Gauge:

  <row>
    <panel>
      <title>Using Marker Gauge with Horizontal Orientation</title>
      <chart>
        <search base="baseSearch">
          <query>| makeresults
| eval payment_percent=55
| table payment_percent<query/>
        </search>
        <option name="charting.chart">markerGauge</option>
        <option name="charting.chart.orientation">x</option>
        <option name="charting.chart.rangeValues">[-1,0,40,60,80,100]</option>
        <option name="charting.gaugeColors">["0xF3F3F3","0x008000","0xebe42d","0xf7912c","0xd13b3b"]</option>
      </chart>
    </panel>
  </row>

[493669]

Please see mock Screen shot to navigate icon as per threshold value changes w.r.t. Time

[niketn]

@220757 can you please add mock screenshots of what you need? There could be several ways of doing it depending on what exactly you need.

Following is one of the ways to perform Image Overlay with another image using CSS: https://wiki.splunk.com/User_talk:Niketnilay#Topic_1:_Image_Overlay_with_Icons_Example:_Extends_Imag...