Radial Gauge coloring question

[jiaqya]

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..

[niketn]

@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

[jiaqya]

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

[vnravikumar · Accepted solution]

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]

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

[vnravikumar]

replace at line 16 with

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

[jiaqya]

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..

[vnravikumar]

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>

[jiaqya]

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.

[jiaqya]

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 ..