Dashboards & Visualizations

Single value panel colour trend using Java Script and to refer value from lookup file

DataOrg
Builder

I have a single value panel which displays a numeric value and i want to color the panel background based on the number range.

The range will be changed periodically so i want to get the value from input-look to apply the color on the panel.. is that possible?

@niketnilay pls help

0 Karma

niketn
Legend

@premranjithj If you want to apply Single Value background color based on inputlookup search result value you can try the following run anywhere example.

The run anywhere example used seconds value to return color value (if current time has seconds between 0-19 then green, 20-39 then amber and >40 then red). But you can use inputlookup instead. PS: color text value is used only to apply CSS background-color for example.

Based on the token tokColor set in the independent search (you would need to have inputlookup instead), you would need to have following Single Value Simple XML configuration:

     <option name="rangeColors">["$tokColor$","$tokColor$"]</option>
     <option name="rangeValues">[0]</option>

alt text

Following is the Simple XML dashboard code:

<dashboard>
  <label>Single Value Background Color based on value</label>
  <!-- Independent search to apply color token. Replace run anywhere dummy query with inputlookup -->
  <!-- Dummy Search applies following range colors: -->
  <!-- 0-19: Green (0x53a051) -->
  <!-- 20-39: Green (0xf8be34) -->
  <!-- 40+: Green (0xdc4e41) -->
  <search>
    <query>| makeresults
| eval seconds=strftime(_time,"%S")
| eval randomColorBasedOnTime=case(seconds>=0 AND seconds<20,"0x53a051",seconds>=20 AND seconds<40,"0xf8be34",true(),"0xdc4e41")
| eval randomColorTextForCSSDemo=case(seconds>=0 AND seconds<20,"green",seconds>=20 AND seconds<40,"orange",true(),"red")
    </query>
    <done>
      <set token="tokTime">$result.seconds$</set>
      <set token="tokColor">$result.randomColorBasedOnTime$</set>
      <set token="tokColorText">$result.randomColorTextForCSSDemo$</set>
    </done>
  </search>
  <row>
    <panel>
      <html>
        <style>
          .dynamic-color{
            color: white;
            font-weight:bold;
            background-color:$tokColorText$;
          }
        </style>
        <div style="text-align:center">
          <div>Seconds: $tokTime$</div>
          <div class="dynamic-color">Color: $tokColor$</div>
        </div>
        <div style="float:right">
          <div>0-19: Green (0x53a051)</div>
          <div>20-39: Yellow (0xf8be34)</div>
          <div>40+: Red (0xdc4e41)</div>
        </div>
      </html>
    </panel>
    <panel>
      <single>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=ERROR
| timechart count as ERROR</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <!-- Token from independent search is used to apply trendcolor -->
        <option name="colorBy">value</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["$tokColor$","$tokColor$"]</option>
        <option name="rangeValues">[0]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

DataOrg
Builder

@niketnilay . if the value is string. the background panels color is not reflecting. if its a number its works.
pls let me know how to apply color irrespective of value in the single panel.
but the color deciding value is number only

0 Karma

niketn
Legend

By string and number do you mean color name and its hex code?

It has to be hex code that needs to be passed as Simple XML chart configuration. So either update existing lookup or create a new lookup for one to one mapping of color name and corresponding hex code.

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

DataOrg
Builder

@niketnilay color code populating value is number (i.e 1= red, 2=yellow,3=red) and the displaying value in panels is string i.e "12.3.45". so color not getting populated in panel.
if i use panel value as 12.3 it works but if i use the value as 12.3.4 its not working

<dashboard>
  <label>Single Value Background Color based on value</label>
  <!-- Independent search to apply color token. Replace run anywhere dummy query with inputlookup -->
  <!-- Dummy Search applies following range colors: -->
  <!-- 0-19: Green (0x53a051) -->
  <!-- 20-39: Green (0xf8be34) -->
  <!-- 40+: Green (0xdc4e41) -->
  <search>
    <query>|inputlookup singlevalue.csv
  | eval randomColorBasedOnTime=case(seconds=1,"0x53a051",seconds=2,"0xf8be34",true(),"0xdc4e41")
 | eval randomColorTextForCSSDemo=case(seconds=2 AND seconds=2,"green",seconds=3,"orange",true(),"red")</query>
    <done>
      <set token="tokTime">$result.seconds$</set>
      <set token="tokColor">$result.randomColorBasedOnTime$</set>
      <set token="tokColorText">$result.randomColorTextForCSSDemo$</set>
    </done>
  </search>
  <row>
    <panel>
      <html>
         <style>
           .dynamic-color{
             color: white;
             font-weight:bold;
             background-color:$tokColorText$;
           }
         </style>
         <div style="text-align:center">
           <div>Seconds: $tokTime$</div>
           <div class="dynamic-color">Color: $tokColor$</div>
         </div>
         <div style="float:right">
           <div>0-19: Green (0x53a051)</div>
           <div>20-39: Yellow (0xf8be34)</div>
           <div>40+: Red (0xdc4e41)</div>
         </div>
       </html>
    </panel>
    <panel>
      <single>
        <search>
          <query>|makeresults|eval version="12.1.3.4"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <!-- Token from independent search is used to apply trendcolor -->
        <option name="colorBy">value</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0.000</option>
        <option name="rangeColors">["0x$tokColor$","$tokColor$"]</option>
        <option name="rangeValues">[0]</option>
        <option name="showSparkline">0</option>
        <option name="showTrendIndicator">0</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">before</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults|eval seconds="50"</query>
          <earliest>0</earliest>
          <latest></latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <!-- Token from independent search is used to apply trendcolor -->
        <option name="colorBy">value</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["$tokColor$","$tokColor$"]</option>
        <option name="rangeValues">[0]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>

</dashboard>
0 Karma

niketn
Legend

@premranjithj, sorry I had been keeping a bit busy with some personal work. Could you please add a little bit more details around what is the data to be displayed in the Single Value Panel also what is the data in the lookup and criteria of range color to be applied?

Following are couple of older answers where Color by Range and Color By Trend are kept different using Simple XML JS Extension. You can check out the answer to apply a logic as per your needs:

https://answers.splunk.com/answers/583539/can-we-set-two-different-colors-for-single-value-a.html
https://answers.splunk.com/answers/659702/how-to-configure-single-value-dashboard-color-base.html

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

DataOrg
Builder

@niketnilay i want to apply color to the background of the single panel and not to the value.

background color should be keep on changing based on the value but value color should be constant.

this is similar but i want color change in background.... https://answers.splunk.com/answers/659702/how-to-configure-single-value-dashboard-color-base.html

0 Karma

niketn
Legend

@premranjithj if one of the answers above has helped you please accept to mark this question as answered!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...