Change colour of column based on variable/token

[jimmyting93]

Hi,

I have a table with 2 columns and I want to change the colour of one of them based on whether or not its bigger or smaller than the second column.
For example, in the table below, I would expect the first 2 rows of column1 to be green, while the last 2 rows will be red:

field1, field2
100, 200
12, 5000
200, 100
9999, 2

I've taken 2 approaches, configuring colorPalette with a variable from my search directly which seemed to not work, secondly tried to update a token through the search because one of the links below suggests that tokens will work.

I've used these posts as references to no avail still:
https://answers.splunk.com/answers/656201/can-i-use-if-match-x-regex-y-z-in-a-colorpalette-e.html
https://answers.splunk.com/answers/469742/how-to-edit-dashboard-to-use-token-values-to-deter.html
https://answers.splunk.com/answers/673787/how-to-set-a-token-based-on-search-results.html

Here's my sample dashboard:

<form theme="dark">
  <row>
    <panel>
      <title>Random title</title>
      <table>
        <search>
          <query>
           index=someIndex source=someSource| eval field1=bla, field2=bla | table field1 field2
          </query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
          <done>
            <set token="tokStatus">$result.field1$</set>
           </done>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">row</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <format type="color" field="latency">
          <colorPalette type="expression">if(value > $tokStatus$, "#53A051", "#DC4E41")</colorPalette>
        </format>
      </table>
    </panel>
  </row>
</form>

Any ideas on how to do so?

[jinseong]

Hello,

I'll give you the answer
I'm going to use SPL first.

In the query, the two fields are compared by using the eval command, and if the small field is 1 and the large field is 2, 3 is displayed

[jimmyting93]

I dont understand your answer? Can you provide a sample?

[vnravikumar]

Hi

Check the below link and modify js accordingly

https://answers.splunk.com/answers/661894/how-to-color-cell-contents-with-css-and-js.html#answer-661...

[jimmyting93]

Is there a way without js?

[vnravikumar]

Hi

Try this

<dashboard theme="light">
  <row>
    <panel>
      <table>
        <search>
          <query>
           | makeresults 
| eval field1=100,field2=200 
| append 
    [| makeresults 
    | eval field1=12, field2=5000] 
| append 
    [| makeresults 
    | eval field1=200, field2=100] 
| append 
    [| makeresults 
    | eval field1=9999, field2=2] 
| append 
    [| makeresults 
    | eval field1=12, field2=5000] 

           </query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
          <done>
            <set token="tokStatus">$result.field1$</set>
          </done>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">row</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <format type="color" field="field1">
          <colorPalette type="expression">if(value &gt; $tokStatus$, "#DC4E41", "#53A051")</colorPalette>
        </format>
      </table>
    </panel>
  </row>
</dashboard>

[jimmyting93]

https://ibb.co/C1kLXVF

Sorry for crappy photo, couldnt take screenshot... The example doesnt work? It only makes the whole panel green?

[vnravikumar]

I checked I'm getting color as per the condition

https://ibb.co/C5DRpnR