Splunk Search

Change background color in Single Value Visual?

dfrench151
Explorer

Hello,

I'm trying to change the background color of a label I have created. I created the label by just running the following index=pingdom Name="jennycraig.com.au" | stats count | eval count="CatchPoint Statistics"
alt text

I want to be able to change the background color and font if possible, but I am unsure of how... I found an article that describes how to do this, but can't get it to work https://answers.splunk.com/answers/566897/how-do-you-change-background-color-for-trellis-vis.html

Here is my source code:

<row>
    <panel>
      <title>CatchPoint Label</title>
      <single>
        <search>
          <query>index=pingdom Name="jennycraig.com.au" | stats count | eval count="CatchPoint Statistics"</query>
          <earliest>-1h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="height">152</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x65a637","0xf7bc38","0xd93f3c"]</option>
        <option name="rangeValues">[30,70]</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>
  <row>
1 Solution

vnravikumar
Champion

Hi @dfrench151

Try this and let me know

<dashboard>
  <label>singlevalue</label>
  <row>
    <panel>
      <html>
       <style type="text/css">

       #test .svg-container{
       background-color:  #000000;
       }

       #test .single-result{
       fill: rgb(255,255,255)!important;
       font-size: 40px !important;
       font-style: italic;
       font-family:Comic Sans MS, cursive, sans-serif !important;
       }

       #test .under-label {
          font-size: 15px !important;
          fill: rgb(255,255,255)!important;
       }
       </style>
     </html>
      <single id="test">
        <search>
          <query>index=_internal | stats count as count</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="field">count</option>
        <option name="underLabel">Value</option>
      </single>

    </panel>
  </row>
</dashboard>

View solution in original post

0 Karma

vnravikumar
Champion

Hi @dfrench151

Try this and let me know

<dashboard>
  <label>singlevalue</label>
  <row>
    <panel>
      <html>
       <style type="text/css">

       #test .svg-container{
       background-color:  #000000;
       }

       #test .single-result{
       fill: rgb(255,255,255)!important;
       font-size: 40px !important;
       font-style: italic;
       font-family:Comic Sans MS, cursive, sans-serif !important;
       }

       #test .under-label {
          font-size: 15px !important;
          fill: rgb(255,255,255)!important;
       }
       </style>
     </html>
      <single id="test">
        <search>
          <query>index=_internal | stats count as count</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="field">count</option>
        <option name="underLabel">Value</option>
      </single>

    </panel>
  </row>
</dashboard>
0 Karma

dfrench151
Explorer

Hello @vnravikumar ,

That worked!! Thanks for getting that to me with even more information that would be helpful with adjusting other aspects of the font.

0 Karma

vnravikumar
Champion

Hi @dfrench151
I had specified the purpose for each style class

  1. .svg-container - Represents the background color
  2. '.single-result' - Here you can specify the required font and size for the text.
  3. '.under-label' - This one is for under label section
0 Karma

dfrench151
Explorer

HI @harishalipaka,
Sorry for not getting back to you sooner. I missed your comment. To answer you question, yes, I am trying to query to a string. With the single visual you can change the color if it is in number format, but as soon as you change it to something that is not a number, it turn black. I want to be able to change this color with HTML if possible. The app suggested below looks like it would work great and I will probably end up using that, but I want to also learn how to do this to further my knowledge.

Thanks,

0 Karma

harishalipaka
Motivator

hi @dfrench151

in your query you are displaying results are string.But in your code properties are related to values like value range ,rangecolour.

can u pls give me a clarity on this .

Thanks
Harish
0 Karma

chrisyounger
SplunkTrust
SplunkTrust

Hi @dfrench151

This app https://splunkbase.splunk.com/app/3119/ will allow you to change the background colour based on a field - without having to change XML. If you want to stick to XML someone else can probably chime in.

All the best

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