Splunk Search

How can I add a percentage sign to the radial gauge number that is displayed at the bottom?

jaj
Path Finder

Is it possible to set the format type of a radial gauge to % or somehow decorate the number display with a % sign?

query:

search ("stuff") |
   stats count(eval(searchmatch("success"))) as successCount 
         count(eval(searchmatch("fail"))) as errorCount |
    eval totalCount = successCount + errorCount |
    eval successRate = round(((successCount)/totalCount)*100,2) |
    eval errorRate = round((100-successRate),2) |
    fields successRate
0 Karma
1 Solution

@jaj try the following run anywhere example which overrides the Radial Gauge Result value and color on render.

alt text

<dashboard script="radial_gauge_percent.js">
  <label>Radial Gauge With Percent</label>
  <init>
    <set token="tokRedHex">#dc4e41</set>
    <set token="tokYellowHex">#f8be34</set>
    <set token="tokGreenHex">#53a051</set>
    <set token="tokGreyHex">#eeeeee</set>
  </init>
  <row>
    <panel>
      <title>tokSuccessRate: $tokSuccessRate$ | tokResultColor: $tokResultColor$</title>
      <chart id="my_radial_gauge">
        <search>
          <query>index=_internal sourcetype="splunkd" (" INFO ") OR (" ERROR ") 
| stats count(eval(searchmatch("INFO"))) as successCount
    count(eval(searchmatch("ERROR"))) as errorCount 
| eval totalCount = successCount + errorCount 
| eval successRate = round(((successCount)/totalCount)*100,2) 
| eval errorRate = round((100-successRate),2) 
| fields successRate
| eval successRateColor=case(successRate>0 AND successRate<=5,"$tokRedHex$",successRate>5 AND successRate<=10,"$tokYellowHex$",successRate>10,"$tokGreenHex$",true(),"$tokGreyHex$")</query>
        <done>
          <condition match="$job.resultCount$==0">
            <set token="tokSuccessRate">0</set>
            <set token="tokResultColor">$tokGreyHex$</set>
          </condition>
          <condition>
            <set token="tokSuccessRate">$result.successRate$</set>
            <set token="tokResultColor">$result.successRateColor$</set>
          </condition>
        </done>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">radialGauge</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.rangeValues">[0,5,10,100]</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.gaugeColors">["$tokRedHex$","$tokYellowHex$","$tokGreenHex$"]</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript file radial_gauge_percent.js to add percent to result and change color as per range applied:

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function ($,mvc) {
    console.log("Script Started");
    var unsubmittedTokenModel=mvc.Components.get("default");
    mvc.Components.get("my_radial_gauge").getVisualization(function(chartView) {
        chartView.on('rendered', function() {
            setTimeout(function(){
                var strResultColor=unsubmittedTokenModel.get("tokResultColor");
                if(strResultColor!==undefined){
                    console.log("strResultColor: ",strResultColor);
                    $("#my_radial_gauge svg text:last-child").css("fill",strResultColor);
                    $("#my_radial_gauge svg text:last-child").append( " %" );
                }
            },100);
        });
    });
});

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

@jaj try the following run anywhere example which overrides the Radial Gauge Result value and color on render.

alt text

<dashboard script="radial_gauge_percent.js">
  <label>Radial Gauge With Percent</label>
  <init>
    <set token="tokRedHex">#dc4e41</set>
    <set token="tokYellowHex">#f8be34</set>
    <set token="tokGreenHex">#53a051</set>
    <set token="tokGreyHex">#eeeeee</set>
  </init>
  <row>
    <panel>
      <title>tokSuccessRate: $tokSuccessRate$ | tokResultColor: $tokResultColor$</title>
      <chart id="my_radial_gauge">
        <search>
          <query>index=_internal sourcetype="splunkd" (" INFO ") OR (" ERROR ") 
| stats count(eval(searchmatch("INFO"))) as successCount
    count(eval(searchmatch("ERROR"))) as errorCount 
| eval totalCount = successCount + errorCount 
| eval successRate = round(((successCount)/totalCount)*100,2) 
| eval errorRate = round((100-successRate),2) 
| fields successRate
| eval successRateColor=case(successRate>0 AND successRate<=5,"$tokRedHex$",successRate>5 AND successRate<=10,"$tokYellowHex$",successRate>10,"$tokGreenHex$",true(),"$tokGreyHex$")</query>
        <done>
          <condition match="$job.resultCount$==0">
            <set token="tokSuccessRate">0</set>
            <set token="tokResultColor">$tokGreyHex$</set>
          </condition>
          <condition>
            <set token="tokSuccessRate">$result.successRate$</set>
            <set token="tokResultColor">$result.successRateColor$</set>
          </condition>
        </done>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">radialGauge</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.rangeValues">[0,5,10,100]</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.gaugeColors">["$tokRedHex$","$tokYellowHex$","$tokGreenHex$"]</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript file radial_gauge_percent.js to add percent to result and change color as per range applied:

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function ($,mvc) {
    console.log("Script Started");
    var unsubmittedTokenModel=mvc.Components.get("default");
    mvc.Components.get("my_radial_gauge").getVisualization(function(chartView) {
        chartView.on('rendered', function() {
            setTimeout(function(){
                var strResultColor=unsubmittedTokenModel.get("tokResultColor");
                if(strResultColor!==undefined){
                    console.log("strResultColor: ",strResultColor);
                    $("#my_radial_gauge svg text:last-child").css("fill",strResultColor);
                    $("#my_radial_gauge svg text:last-child").append( " %" );
                }
            },100);
        });
    });
});

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

termcap
Path Finder

Hi @niketn-deceased 

This is an amazing solution to the problem and it works perfectly well. 

How can I get this solution to work if I have multiple Radial Gauges ?

Thanks,

Termcap.

0 Karma

jaj
Path Finder

@niketnilay this is fantastic! i will try out and post my results. thank you!

0 Karma

lucasdc
New Member

Hi!

Where do I have to put this code?

equire([
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function ($,mvc) {
console.log("Script Started");
var unsubmittedTokenModel=mvc.Components.get("default");
mvc.Components.get("my_radial_gauge").getVisualization(function(chartView) {
chartView.on('rendered', function() {
setTimeout(function(){
var strResultColor=unsubmittedTokenModel.get("tokResultColor");
if(strResultColor!==undefined){
console.log("strResultColor: ",strResultColor);
$("#my_radial_gauge svg text:last-child").css("fill",strResultColor);
$("#my_radial_gauge svg text:last-child").append( " %" );
}
},100);
});
});
});

0 Karma

lucasdc
New Member

Hi woodcock! Where do I have to put these second script that you put?

The number on my radial gauge isn't working.

RadialGaugeTestScript

   <set token="tokRedHex">#dc4e41</set>
 <set token="tokYellowHex">#f8be34</set>
 <set token="tokGreenHex">#53a051</set>
 <set token="tokGreyHex">#eeeeee</set>  


<panel>
  <title>tokSuccessRate: $tokSuccessRate$ | tokResultColor: $tokResultColor$
    </title>
    <chart id="my_radial_gauge">
    <search>
      <query>index="db_archer2" sourcetype="db_archer2"  "C_xE1lculo ponto Aberto _ Fechado"="Aberto" "Criticidad _CVSS"="Cr\\xEDtico"OR"Criticidad _CVSS"="Alta"  "Risco Atual do ponto"="Real" "Gestion vulnerabilidades"="Web Gestionadas Internamente"OR"Gestion vulnerabilidades"="Webs Externalizadas"OR"Gestion vulnerabilidades"="Apps M\\xF3viles" "Respons_xE1vel T_xE9cnico pela Corre_xE7_xE3o"!="Equipe Fraudes" "Nome do Projeto"!="Cyber-Hunting"OR"Nome do Projeto"!="Purple Team""Torre DTI"!="Coligada - Zurich"OR"Torre DTI"!="Coligada - SuperDigital"OR"Torre DTI"!="Coligada - Ole"OR"Torre DTI"!="Coligada - S3"OR"Torre DTI"!="Coligada - GetNet"OR"Torre DTI"!="Coligada - Universia" 

| stats count as IFA
| eval IFA = round((IFA/156)*100, 2)
| eval IFA =tostring('IFA')."%"
| gauge IFA 0 1 3 4

         <set token="tokSuccessRate">0</set>
         <set token="tokResultColor">$tokGreyHex$</set>
       </condition>
       <condition>
         <set token="tokSuccessRate">$result.successRate$</set>
         <set token="tokResultColor">$result.successRateColor$</set>
       </condition>
     </done>
       <earliest>-24h@h</earliest>
       <latest>now</latest>
       <sampleRatio>1</sampleRatio>
     </search>
     <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
     <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
     <option name="charting.axisTitleX.visibility">visible</option>
     <option name="charting.axisTitleY.visibility">visible</option>
     <option name="charting.axisTitleY2.visibility">visible</option>
     <option name="charting.axisX.abbreviation">none</option>
     <option name="charting.axisX.scale">linear</option>
     <option name="charting.axisY.abbreviation">none</option>
     <option name="charting.axisY.scale">linear</option>
     <option name="charting.axisY2.abbreviation">none</option>
     <option name="charting.axisY2.enabled">0</option>
     <option name="charting.axisY2.scale">inherit</option>
     <option name="charting.chart">radialGauge</option>
     <option name="charting.chart.bubbleMaximumSize">50</option>
     <option name="charting.chart.bubbleMinimumSize">10</option>
     <option name="charting.chart.bubbleSizeBy">area</option>
     <option name="charting.chart.nullValueMode">gaps</option>
     <option name="charting.chart.rangeValues">[0,1,3,4]</option>
     <option name="charting.chart.showDataLabels">none</option>
     <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
     <option name="charting.chart.stackMode">default</option>
     <option name="charting.chart.style">shiny</option>
     <option name="charting.gaugeColors">["$tokRedHex$","$tokYellowHex$","$tokGreenHex$"]</option>
     <option name="charting.layout.splitSeries">0</option>
     <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
     <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
     <option name="charting.legend.mode">standard</option>
     <option name="charting.legend.placement">right</option>
     <option name="charting.lineWidth">2</option>
     <option name="trellis.enabled">0</option>
     <option name="trellis.scales.shared">1</option>
     <option name="trellis.size">medium</option>
   </chart>
 </panel>
0 Karma

woodcock
Esteemed Legend

Don't forget to click Accept!

Get Updates on the Splunk Community!

What’s new on Splunk Lantern in August

This month’s Splunk Lantern update gives you the low-down on all of the articles we’ve published over the past ...

Welcome to the Future of Data Search & Exploration

You have more data coming at you than ever before. Over the next five years, the total amount of digital data ...

This Week's Community Digest - Splunk Community Happenings [8.3.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...