Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
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
Get Updates on the Splunk Community!

A Season of Skills: New Splunk Courses to Light Up Your Learning Journey

There’s something special about this time of year—maybe it’s the glow of the holidays, maybe it’s the ...

Announcing the Migration of the Splunk Add-on for Microsoft Azure Inputs to ...

Announcing the Migration of the Splunk Add-on for Microsoft Azure Inputs to Officially Supported Splunk ...

Splunk Observability for AI

Don’t miss out on an exciting Tech Talk on Splunk Observability for AI! Discover how Splunk’s agentic AI ...