Dashboards & Visualizations

Radial Gauge coloring question

jiaqya
Builder

Suppose out of 100, 75 is compliant and 25 is not.
so i like to dynamically show 75 as yellow and 25 as red
if its 100 compliant then show green.

how can this be done for radial gauge..

Tags (1)
0 Karma
1 Solution

vnravikumar
Champion

Hi @jiaqya

Try this and let me know

<form>
  <label>SampleDashboard</label>
  <fieldset submitButton="false">
    <input type="text" token="number" searchWhenChanged="true">
      <label>Number</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <search>
          <query>|makeresults |eval value=$number$ | table value</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <progress>
            <eval token="gaugecolor">case($result.value$>=0 AND $result.value$<26,"0xbf3030",$result.value$>=26 AND $result.value$<76,"0xffe800",$result.value$>=76 AND $result.value$<=100,"#006600")</eval>
          </progress>
        </search>
        <option name="charting.chart">radialGauge</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.rangeValues">[0,25,75,100]</option>
        <option name="charting.gaugeColors">[$gaugecolor$]</option>
      </chart>
    </panel>
  </row>
</form>

View solution in original post

niketn
Legend

@jiaqya try the following Simple XML JS Extension which applies dynamic color after rendering the radial gauge chart: https://answers.splunk.com/answers/717431/how-can-i-add-a-percentage-sign-to-the-radial-gaug.html

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

jiaqya
Builder

I tried the solution in the html above, but i get below error on the code at line 21 . could you help

Error parsing XML on line 21: StartTag: invalid element name

0 Karma

vnravikumar
Champion

Hi @jiaqya

Try this and let me know

<form>
  <label>SampleDashboard</label>
  <fieldset submitButton="false">
    <input type="text" token="number" searchWhenChanged="true">
      <label>Number</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <search>
          <query>|makeresults |eval value=$number$ | table value</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <progress>
            <eval token="gaugecolor">case($result.value$>=0 AND $result.value$<26,"0xbf3030",$result.value$>=26 AND $result.value$<76,"0xffe800",$result.value$>=76 AND $result.value$<=100,"#006600")</eval>
          </progress>
        </search>
        <option name="charting.chart">radialGauge</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.rangeValues">[0,25,75,100]</option>
        <option name="charting.gaugeColors">[$gaugecolor$]</option>
      </chart>
    </panel>
  </row>
</form>

jiaqya
Builder

Tried, this, get the error below at line 16
Error parsing XML on line 16: StartTag: invalid element name

0 Karma

vnravikumar
Champion

replace at line 16 with

& l t ; < less than
& g t ; > greater than

0 Karma

jiaqya
Builder

it works with >

however, based on values the color of the whole gauge change.
is it possible to show RED beyond the actual percentage and the appropriate color before the percentage.

ex: if its 56%, then 0-56 on the dial should be yellow and 56-100 should be RED
is it possible..

0 Karma

vnravikumar
Champion

Please check this and let me know

<form>
  <label>SampleDashboard</label>
  <fieldset submitButton="false">
    <input type="text" token="number" searchWhenChanged="true">
      <label>Number</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <search>
          <query>|makeresults |eval value=$number$ | table value</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <progress>
            <eval token="gaugecolor">if($result.value$ == "100","#006600","0xffe800,0xbf3030")</eval>
            <eval token="gaugerange">if($result.value$ == "100","0,100","0,".$number$.",100")</eval>
          </progress>
        </search>
        <option name="charting.chart">radialGauge</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.rangeValues">[$gaugerange$]</option>
        <option name="charting.gaugeColors">[$gaugecolor$]</option>
      </chart>
    </panel>
  </row>
</form>
0 Karma

jiaqya
Builder

Great, this works perfect, thanks a lot Ravi.

Probably you can help me on one more thing.
Is it possible to print a text on the radial bar. would like to show the actual number printed of which the percentage is calculated.

ex: 95%, would like to show as 95% of 2000, where 2000 is the actual number of items.

0 Karma

jiaqya
Builder

Ravi, i got it to work with html code printing outside the chart.
this looks good.

another problem i saw was that when i get the radial gauge to work and click on the refresh button at the bottom of the panel, the color arrangement goes away and i can see only yellow ..

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...