Solved: Change background color in Single Value Visual?

dfrench151 · ‎02-05-2019

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"

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>

vnravikumar · ‎02-17-2019

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

vnravikumar · ‎02-17-2019

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>

dfrench151 · ‎02-17-2019

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.

vnravikumar · ‎02-17-2019

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

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

dfrench151 · ‎02-17-2019

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,

harishalipaka · ‎02-05-2019

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

chrisyounger · ‎02-05-2019

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

Change background color in Single Value Visual?

Stay Connected: Your Guide to November Tech Talks, Office Hours, and Webinars!

Transform your security operations with Splunk Enterprise Security

Splunk Admins and App Developers | Earn a $35 gift card!