Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
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
1 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
1 KB
Reply
Get Updates on the Splunk Community!

SignalFlow: What? Why? How?

What is SignalFlow? Splunk Observability Cloud’s analytics engine, SignalFlow, opens up a world of in-depth ...

Federated Search for Amazon S3 | Key Use Cases to Streamline Compliance Workflows

Modern business operations are supported by data compliance. As regulations evolve, organizations must ...

New Dates, New City: Save the Date for .conf25!

Wake up, babe! New .conf25 dates AND location just dropped!! That's right, this year, .conf25 is taking place ...