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!

Introducing Splunk Enterprise 9.2

WATCH HERE! Watch this Tech Talk to learn about the latest features and enhancements shipped in the new Splunk ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...