Dashboards & Visualizations

Highlight column if there is a value inconsistency

shakSplunk
Path Finder

Hi all, 

I am trying to highlight a particular column if the values in that column are no all the same. For instance, say I have a table such as the following:

User PlaceVersion
MarkLondon1
SallyUS2
WillAfrica2

 

I would specifically like to highlight the version column red because the values are not all the same on that column (the values are not all 2) , so that it looks like this (underline = should be highlighted)

User PlaceVersion
MarkLondon1
SallyUS2
WillAfrica2

 

I understand the first step is to turn the Version column into a multi-value field and add "RED" in each cell along that column but unsure as to how to do that. I'd imagine that logic is something like if (count(Version uniq) >1 )) then add RED. But again not sure how to implement something like that.  

Any help would be hugely appreciated!

Labels (2)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@shakSplunk 

It's tricky without JS. But can you pease try this?

<dashboard >
  <label>Conditional Column Color</label>
  <row>
    <panel>
      <table id="tbl_1">
        <search>
          <query>| makeresults | eval _raw="User,Place,Version
Mark,London,1
Sally,US,2
Will,Africa,2" | multikv forceheader=1
| eventstats count by Version  | eval Version=Version.if(count>1," ","") |table User	Place Version</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <format type="color" field="Version">
          <colorPalette type="expression">if(match(value," "),"#ff0000","")</colorPalette>
        </format>
      </table>
      <html>
        <style>
           #tbl_1 td.string.color-formatted {
            text-decoration:underline; 
           }
        </style>
      </html>
    </panel>
  </row>
</dashboard>

 

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@shakSplunk 

It's tricky without JS. But can you pease try this?

<dashboard >
  <label>Conditional Column Color</label>
  <row>
    <panel>
      <table id="tbl_1">
        <search>
          <query>| makeresults | eval _raw="User,Place,Version
Mark,London,1
Sally,US,2
Will,Africa,2" | multikv forceheader=1
| eventstats count by Version  | eval Version=Version.if(count>1," ","") |table User	Place Version</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <format type="color" field="Version">
          <colorPalette type="expression">if(match(value," "),"#ff0000","")</colorPalette>
        </format>
      </table>
      <html>
        <style>
           #tbl_1 td.string.color-formatted {
            text-decoration:underline; 
           }
        </style>
      </html>
    </panel>
  </row>
</dashboard>

 

shakSplunk
Path Finder

Thanks @ITWhisperer @kamlesh_vaghela 

Thanks it's so close to working!
It seems to work when there are no whitespaces in the version value, however in the case of a white space, it doesn't seem to work. E.g. If the Version value is "Version Unavailable", although the count column is showing 1, it's still highlighting red.

Another Question - you have a particular section in the query:

 

 

table User Place Version

 

 is there anyway in which you can do "table * exclude count" ? 

 

Also another question - I added two radio buttons to toggle the highlighting off and on. The 'Off' radio button has a value of ' "","" ' and the 'On' button as a value of ' "#ff0000","#22ba5c" '. I then placed the token for this field in the colour pallete line, i.e.:

 

<colorPalette type="expression">if(match(value," "),$app_con_check$)</colorPalette>

 

Although it works, it requires me to manually refresh the page for it to toggle (if I toggle and don't refresh the page, visually nothing changes on the dashboard). Even though I selected "Search on Change", it still isn't updating, is there anyway the radio button to refresh the dashboard?

 

Really appreciate all your help! Apologies for so many questions in one message. 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust
<colorPalette type="expression">if(match(value," $"),"#ff0000","")</colorPalette>
0 Karma

shakSplunk
Path Finder

Hi @ITWhisperer ,

I'm a little bit confused with what the $ does here, would you mind giving it a quick explanation?

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Almost - the eventstats should be

| eventstats dc(Version) as count

kamlesh_vaghela
SplunkTrust
SplunkTrust

@shakSplunk 

Can you please try this?

 

<dashboard script="a.js">
  <label>Conditional Column Color</label>
  <row>
    <panel>
      <table id="tbl_1">
        <search>
          <query>| makeresults | eval _raw="User,Place,Version
Mark,London,1
Sally,US,2
Will,Africa,2" | multikv forceheader=1
| eventstats count by Version  | eval Version=Version."|".count |table User	Place Version</query>
        </search>
      </table>
    </panel>
  </row>
</dashboard>

 

 

a.js

 

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['Version']).contains(cell.field);
        },
        render: function($td, cell) {
            var version_value = cell.value.split("|")[0];
            var max_value = cell.value.split("|")[1];
            console.log(version_value, max_value)
            if (max_value > 1) {
                $td.html("<div style='background-color:red;text-align:center;text-decoration:underline;'>" + version_value + "</div>")
            } else {
                $td.html("<div>" + version_value + "</div>")
            }
        }
    });
    var sh = mvc.Components.get("tbl_1");
    if (typeof(sh) != "undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }
});

 

 

Just change css and logic as per your requirement.

KV

 

0 Karma

shakSplunk
Path Finder

Hi @kamlesh_vaghela 

Is there anyway we could use simple xml for the solution instead of js. I only have access to simple XML through the "source" button that appears when going to edit a dashboard.

0 Karma

DavidHourani
Super Champion

Hi @shakSplunk ,

 

Please have a look here:

https://community.splunk.com/t5/Dashboards-Visualizations/How-do-you-highlight-a-table-cell-based-on...

Is this similar to what you're trying to achieve? Or are you looking to color the entire column the same way based on any value that differs in the column?

 

0 Karma

shakSplunk
Path Finder

Hi,

Thanks for your answer. However, I am trying to colour the whole column red if it detects all the values in the column are NOT the same. 

For instance, in the version column, if the values were all "1" is would remain as non-highlighted. However, if there are values of "1" , "2" , etc (aka different values), then it would highlight the whole column as red. 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@shakSplunk 

please check my updated answer.

Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

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