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?

How to Monitor Google Kubernetes Engine (GKE)

Index This | How can you make 45 using only 4?

Splunk Education Goes to Washington | Splunk GovSummit 2024