All Apps and Add-ons

How to set up Table Cell Highlighting with Different Conditions for each Column based on values in the First Column?

ashish9433
Communicator

Hi,

I am referring to Table Cell Highlighting example in Splunk 6.x dashboard and below is my requirement.

alt text

I want to color cells of Column2, Column3 & Column4 based on the values of Column1 as below

if the value of column1=string1
then for column2 ( <20 - Green, 21-50 - Red Colour & >51 - Amber Colour)
then for column3 ( <20 - Amber, 21-50 - Blue Colour & >51 - Green Colour)
then for column4 ( <50 - Green , >51- Red)

if the value of column1=string2
then for column2 ( <20 - Red, 21-50 -Amber Colour & >51 - Green Colour)
then for column3 ( <20 - Green, 21-50 - Blue Colour & >51 - Red Colour)
then for column4 ( <50 - Red , >51- Green)

and so on.

I tried the below javascript, but it didn't work. Can any one help me to fix it?

if (cell.field == "Column1") {
        if (cell.value == "String1" || cell.value == "String4" ) {
              if (cell.field == 'Column2' ) {
                    if (value <=20)
                           {
                             $td.addClass('Green');
                           }
                        if (value >=21 && value <= 50  )
                           {
                             $td.addClass('Red');
                           }
                    if (value >=51 )
                           {
                                 $td.addClass('Amber');
                           }
                }

                   if (cell.field == 'Column3' ) {
                       if (value <=20)
                           {
                             $td.addClass('Amber');
                           }
                       if (value >=21 && value <= 50  )
                           {
                                 $td.addClass('Blue');
                           }
                       if (value >=51)
                           {
                                    $td.addClass('Green');
                           }
                    }

                    if (cell.field == 'Column4' ) {
                       if (value <=50)
                           {
                             $td.addClass('Green');
                           }
                       if (value >=51 )
                           {
                                 $td.addClass('Red');
                           }
                    }
     }

Basically i tried debugging the above javascript by putting alert statements, what i could find was it never enter the below loop statement in the above code.

if (cell.field == 'Column2' ) {

if (cell.field == 'Column3' ) {

if (cell.field == 'Column4' ) {

Can any one help me to find out how can i proceed to fix this scenario?

Thanks

0 Karma
1 Solution

kbarker302
Communicator

I believe you'll need to move your Column2/Column3/Column4 if statements outside of the Column1 if statement. Then, in its place, set some indicator that indicates when to apply the styles.

The problem is that when cell.field equals "Column1", it can't be equal to Columns 2, 3, or 4 - at least not until the next iteration of the "loop". You would need to do something like this:

var setClass = 'false';  // make this a global variable

if (cell.field == "Column1") {
    if (cell.value == "String1" || cell.value == "String4" ) {
       setClass = 'true';
    } else {
       setClass = 'false';
}

if (setClass == 'true') {
  if (cell.field == 'Column2' ) {

  if (cell.field == 'Column3' ) {

  if (cell.field == 'Column4' ) {
}

But I'm not sure if you'll be able to set a global variable from within your extension of TableView.BaseCellRenderer. Also, I'm assuming that your complete JavaScript is following the example shown by user Flynt in this post:

https://answers.splunk.com/answers/230164/how-to-get-a-table-cell-color-to-change-depending.html

View solution in original post

kbarker302
Communicator

I believe you'll need to move your Column2/Column3/Column4 if statements outside of the Column1 if statement. Then, in its place, set some indicator that indicates when to apply the styles.

The problem is that when cell.field equals "Column1", it can't be equal to Columns 2, 3, or 4 - at least not until the next iteration of the "loop". You would need to do something like this:

var setClass = 'false';  // make this a global variable

if (cell.field == "Column1") {
    if (cell.value == "String1" || cell.value == "String4" ) {
       setClass = 'true';
    } else {
       setClass = 'false';
}

if (setClass == 'true') {
  if (cell.field == 'Column2' ) {

  if (cell.field == 'Column3' ) {

  if (cell.field == 'Column4' ) {
}

But I'm not sure if you'll be able to set a global variable from within your extension of TableView.BaseCellRenderer. Also, I'm assuming that your complete JavaScript is following the example shown by user Flynt in this post:

https://answers.splunk.com/answers/230164/how-to-get-a-table-cell-color-to-change-depending.html

ashish9433
Communicator

Thanks @kbarker302,

This logic worked and i am able to get the result as i wanted.

Many thanks!

0 Karma
Get Updates on the Splunk Community!

Get ready to show some Splunk Certification swagger at .conf24!

Dive into the deep end of data by earning a Splunk Certification at .conf24. We're enticing you again this ...

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Now On-Demand Join us to learn more about how you can leverage Service Level Objectives (SLOs) and the new ...

Database Performance Sidebar Panel Now on APM Database Query Performance & Service ...

We’ve streamlined the troubleshooting experience for database-related service issues by adding a database ...