Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

Simple xml : I want to create cool single value display html

to4kawa
Ultra Champion
‎12-20-2019 04:10 PM 
<form>
   <fieldset submitButton="true" autoRun="true">
     <input type="time" token="field1">
       <label></label>
       <default>
         <earliest>-24h@h</earliest>
         <latest>now</latest>
       </default>
     </input>
   </fieldset>
   <row>
     <panel>
       <table>
         <search>
           <query>| makeresults count=2
 | streamstats count
 | eval _time = if (count==2,relative_time(_time,"-2h@m"), relative_time(_time,"@m")) 
 | makecontinuous span=1m _time
 | eval count=random() % 200
 | timechart span=10m sum(count) as PerfMon
 | streamstats list(PerfMon) as PM window=4
 | eval PM_30min=if(mvcount(PM)==4,mvindex(PM,0),NULL)
 | reverse
 | table _time PerfMon PM_30min |head 1|eval range=if(PerfMon / PM_30min > 2 OR PerfMon / PM_30min < 0.5 , "#FF0000" , "#008000")</query>
           <earliest>-24h@h</earliest>
           <latest>now</latest>
           <done>
             <condition>
               <set token="value">$result.PerfMon$</set>
               <set token="color">$result.range$</set>
             </condition>
           </done>
         </search>
         <option name="drilldown">none</option>
         <option name="refresh.display">progressbar</option>
       </table>
     </panel>
     <panel>
       <html id="test">
         <head>
           <style>
             #test {height:200px;}

 p {display:block;
    color: $color$;
    font-size: 12ex;}
 </style>
         </head>
 <body>
   <div id="sample">
 <p>&lt;br/&gt;</br>
   $value$</p>
 </div>
 </body>
       </html>
     </panel>
   </row>
 </form>

Hi, folks.
I am trying to create a dashboard that displays a single value. (Splunk ver 8.0.1)
I am trying to change the font color when there is more than 50% difference from the previous value.
Since rangemap doesn't work well, I gave up single value dashboard.

I tried to make it but it doesn't look cool.
Please let me know if there is a good way to change the background color, font color, or display method.

0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎12-20-2019 09:02 PM

@to4kawa try the following run anywhere example with the three options to display customized single value in Splunk Dashboard. Please try out and confirm!

  1. Option 1 uses <html> panel with CSS override as per your question.
  2. Option 2 uses built in<single> value visualization.
  3. Option 3 uses Status Indicator Custom visualization by Splunk.

alt text

Refer to one of my older answer where I have explained something similar using Single Value ( with icon ) and Status Indicator: https://answers.splunk.com/answers/590581/refresh-data-in-table-by-collecting-token-on-click.html

Also here is an answer for <html> panel with icon and drilldown in case you need it: https://answers.splunk.com/answers/741114/how-to-drill-down-from-custom-result-value-1.html

<form>
  <label>HTML Single Value</label>
  <fieldset submitButton="true" autoRun="true">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <title>Option 1 - Using HTML Panel</title>
        <search>
          <done>
            <condition>
              <set token="value1">$result.PerfMon$</set>
              <set token="color1">$result.range$</set>
            </condition>
          </done>
          <query>| makeresults count=2 
| streamstats count 
| eval _time = if (count==2,relative_time(_time,"-2h@m"), relative_time(_time,"@m")) 
| makecontinuous span=1m _time 
| eval count=random() % 200 
| timechart span=10m sum(count) as PerfMon 
| streamstats list(PerfMon) as PM window=4 
| eval PM_30min=if(mvcount(PM)==4,mvindex(PM,0),NULL) 
| reverse 
| table _time PerfMon PM_30min 
| head 1 
| eval range=if(PerfMon / PM_30min > 2 OR PerfMon / PM_30min < 0.5 , "#FF0000" , "#008000")</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel id="html_single_1">
      <html id="html1">
            <style>
              #html_single_1 #html1{
                height:115px;
              }
              #html_single_1 .dashboard-panel{
                background: $color1$ !important;
              }
              #sample p{
                display:block;
                color: white;
                font-weight: bold;
                text-align: center;
                font-size: 12ex;
                position: absolute;
                top: 40%;
                left:40%;
              }
            </style>
            <div id="sample">
              <p>$value1$</p>
            </div>
        </html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Option 2 - Using Single Value</title>
        <search>
          <done>
            <condition>
              <set token="value2">$result.PerfMon$</set>
              <set token="color2">$result.range$</set>
            </condition>
          </done>
          <query>| makeresults count=2 
| streamstats count 
| eval _time = if (count==2,relative_time(_time,"-2h@m"), relative_time(_time,"@m")) 
| makecontinuous span=1m _time 
| eval count=random() % 200 
| timechart span=10m sum(count) as PerfMon 
| streamstats list(PerfMon) as PM window=4 
| eval PM_30min=if(mvcount(PM)==4,mvindex(PM,0),NULL) 
| reverse 
| table _time PerfMon PM_30min 
| head 1 
| eval range=if(PerfMon / PM_30min > 2 OR PerfMon / PM_30min < 0.5 , "#FF0000" , "#008000")</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
            | fields - _time
            | eval Value=$value2$
          </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["$color2$","$color2$"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Option 3 - Using Status Indicator Custom Viz</title>
        <search id="bStats">
          <done>
            <condition>
              <set token="value3">$result.PerfMon$</set>
              <set token="color3">$result.range$</set>
            </condition>
          </done>
          <query>| makeresults count=2 
| streamstats count 
| eval _time = if (count==2,relative_time(_time,"-2h@m"), relative_time(_time,"@m")) 
| makecontinuous span=1m _time 
| eval count=random() % 200 
| timechart span=10m sum(count) as PerfMon 
| streamstats list(PerfMon) as PM window=4 
| eval PM_30min=if(mvcount(PM)==4,mvindex(PM,0),NULL) 
| reverse 
| head 1
| eval color=if(PerfMon / PM_30min > 2 OR PerfMon / PM_30min < 0.5 , "#FF0000" , "#008000"),
       icon=if(PerfMon / PM_30min > 2 OR PerfMon / PM_30min < 0.5 , "times-circle" , "check-circle")
| table PerfMon icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <viz type="status_indicator_app.status_indicator">
        <search base="bStats">
          <query/>
        </search>
        <option name="height">115</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">background</option>
        <option name="status_indicator_app.status_indicator.fixIcon">warning</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">false</option>
      </viz>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Preview file
48 KB
Reply
Solved! Jump to solution

to4kawa
Ultra Champion
‎12-20-2019 11:19 PM

Thank you , @niketnilay @vnravikumar
Both were cool.
I'll do this.

0 Karma
Reply
Solved! Jump to solution

vnravikumar
Champion
‎12-20-2019 09:21 PM

Hi

Give a try with following css

    <panel>
      <html id="test">
          <head>
            <style>
              #test{
                   text-align: center;
                   width: 100%;
                   }
             #test p {
                  display: inline-block; 
                  margin: 0 auto;
                  padding-top:8%;
                  height: 60px;
                  width: 50%;
                  font-size: 6ex;
                  font-family:Verdana;
                  color : white;
                  background-color: $color$;
                 }
              </style>
            </head>
            <body>
              <div id="sample">
                <p>$value$</p>
              </div>
            </body>
        </html>
0 Karma
Reply
Solved! Jump to solution
Solution

niketn
Legend
‎12-20-2019 09:02 PM

@to4kawa try the following run anywhere example with the three options to display customized single value in Splunk Dashboard. Please try out and confirm!

  1. Option 1 uses <html> panel with CSS override as per your question.
  2. Option 2 uses built in<single> value visualization.
  3. Option 3 uses Status Indicator Custom visualization by Splunk.

alt text

Refer to one of my older answer where I have explained something similar using Single Value ( with icon ) and Status Indicator: https://answers.splunk.com/answers/590581/refresh-data-in-table-by-collecting-token-on-click.html

Also here is an answer for <html> panel with icon and drilldown in case you need it: https://answers.splunk.com/answers/741114/how-to-drill-down-from-custom-result-value-1.html

<form>
  <label>HTML Single Value</label>
  <fieldset submitButton="true" autoRun="true">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <title>Option 1 - Using HTML Panel</title>
        <search>
          <done>
            <condition>
              <set token="value1">$result.PerfMon$</set>
              <set token="color1">$result.range$</set>
            </condition>
          </done>
          <query>| makeresults count=2 
| streamstats count 
| eval _time = if (count==2,relative_time(_time,"-2h@m"), relative_time(_time,"@m")) 
| makecontinuous span=1m _time 
| eval count=random() % 200 
| timechart span=10m sum(count) as PerfMon 
| streamstats list(PerfMon) as PM window=4 
| eval PM_30min=if(mvcount(PM)==4,mvindex(PM,0),NULL) 
| reverse 
| table _time PerfMon PM_30min 
| head 1 
| eval range=if(PerfMon / PM_30min > 2 OR PerfMon / PM_30min < 0.5 , "#FF0000" , "#008000")</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel id="html_single_1">
      <html id="html1">
            <style>
              #html_single_1 #html1{
                height:115px;
              }
              #html_single_1 .dashboard-panel{
                background: $color1$ !important;
              }
              #sample p{
                display:block;
                color: white;
                font-weight: bold;
                text-align: center;
                font-size: 12ex;
                position: absolute;
                top: 40%;
                left:40%;
              }
            </style>
            <div id="sample">
              <p>$value1$</p>
            </div>
        </html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Option 2 - Using Single Value</title>
        <search>
          <done>
            <condition>
              <set token="value2">$result.PerfMon$</set>
              <set token="color2">$result.range$</set>
            </condition>
          </done>
          <query>| makeresults count=2 
| streamstats count 
| eval _time = if (count==2,relative_time(_time,"-2h@m"), relative_time(_time,"@m")) 
| makecontinuous span=1m _time 
| eval count=random() % 200 
| timechart span=10m sum(count) as PerfMon 
| streamstats list(PerfMon) as PM window=4 
| eval PM_30min=if(mvcount(PM)==4,mvindex(PM,0),NULL) 
| reverse 
| table _time PerfMon PM_30min 
| head 1 
| eval range=if(PerfMon / PM_30min > 2 OR PerfMon / PM_30min < 0.5 , "#FF0000" , "#008000")</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
            | fields - _time
            | eval Value=$value2$
          </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["$color2$","$color2$"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Option 3 - Using Status Indicator Custom Viz</title>
        <search id="bStats">
          <done>
            <condition>
              <set token="value3">$result.PerfMon$</set>
              <set token="color3">$result.range$</set>
            </condition>
          </done>
          <query>| makeresults count=2 
| streamstats count 
| eval _time = if (count==2,relative_time(_time,"-2h@m"), relative_time(_time,"@m")) 
| makecontinuous span=1m _time 
| eval count=random() % 200 
| timechart span=10m sum(count) as PerfMon 
| streamstats list(PerfMon) as PM window=4 
| eval PM_30min=if(mvcount(PM)==4,mvindex(PM,0),NULL) 
| reverse 
| head 1
| eval color=if(PerfMon / PM_30min > 2 OR PerfMon / PM_30min < 0.5 , "#FF0000" , "#008000"),
       icon=if(PerfMon / PM_30min > 2 OR PerfMon / PM_30min < 0.5 , "times-circle" , "check-circle")
| table PerfMon icon color</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <viz type="status_indicator_app.status_indicator">
        <search base="bStats">
          <query/>
        </search>
        <option name="height">115</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">background</option>
        <option name="status_indicator_app.status_indicator.fixIcon">warning</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.precision">0</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">true</option>
        <option name="status_indicator_app.status_indicator.useThousandSeparator">false</option>
      </viz>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Preview file
48 KB
Reply
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Take the Survey

Can’t make it to .conf25? Join us online!

Watch Global Broadcast
Get Updates on the Splunk Community!

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Unlock What’s Next: The Splunk Cloud Platform at .conf25

In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...

Index This | How many sevens are there between 1 and 100?

August 2025 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...