Changing the color of the number in dashboard that have a string attached

[phamxuantung]

To be specific, I have a dashboard panel that show percentage of timed out transaction, and I want it to change color to alert red when it reach 20% or more. When I use the Edit dashboard/Format visualization/Color, it can only change if the showed result is number, because my result is a number, with a "%" attached to it, it have no effect, here is my code

|eval Timed_Out =round((Timed/Total)*100,2)."%"
|table Timed_Out

So is there a way for the showed result automatically have "%" so the Format Visualization could work?

Thank you

[renjith_nair · Accepted solution]

You may use the format number option in the visualization

        <format type="number" field="perc">
          <option name="unit">%</option>
        </format>

Here is a run anywhere example

<form>
  <label>Colors</label>
  <fieldset submitButton="false">
    <input type="text" token="perc">
      <label>Input Percentage</label>
      <default>20</default>
      <initialValue>20</initialValue>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>|makeresults|eval Percentage=$perc$</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <format type="color" field="perc">
          <colorPalette type="list">[#53A051,#006D9C,#F8BE34,#F1813F,#DC4E41]</colorPalette>
          <scale type="threshold">0,30,70,100</scale>
        </format>
        <format type="number" field="perc">
          <option name="unit">%</option>
        </format>
        <format type="color" field="Percentage">
          <colorPalette type="list">[#DC4E41,#F1813F,#F8BE34,#53A051]</colorPalette>
          <scale type="threshold">20,40,60</scale>
        </format>
        <format type="number" field="Percentage">
          <option name="unit">%</option>
        </format>
      </table>
    </panel>
    <panel>
      <single>
        <search>
          <query>|makeresults|eval Percentage=$perc$</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="rangeColors">["0xdc4e41","0xdc4e41","0xf8be34","0xf1813f","0x53a051"]</option>
        <option name="rangeValues">[0,20,40,60]</option>
        <option name="refresh.display">progressbar</option>
        <option name="unit">%</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
</form>