Dashboards & Visualizations

color a column with help of the other.

Rukmani_Splunk
Explorer

Hi i need to color a column with help of the other.
For example color the sourcetype with the help of count. Here is my code. But the coloring is not happening .

<html>
  <style>
     .css_for_green{ 
     background-color:#65A637 !important;
     }
     .css_for_yellow{ 
     background-color:#FFFF00 !important;
     }
     .css_for_red{
     background-color:#FF0000 !important;
     }
     .css_for_grey{
     background-color:#EEE000 !important;
     }
  </style>
</html>
<table id="tableWithColorBasedOnAnotherField">
 <search>
   <query>index=_internal |stats count by  sourcetype |eval sourcetype=sourcetype."|".count</query>
   <earliest>-24h@h</earliest>
   <latest>now</latest>
   <sampleRatio>1</sampleRatio>
 </search>
 <option name="count">20</option>
 <option name="dataOverlayMode">none</option>
 <option name="drilldown">none</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>

Dashbaoard.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 _(['sourcetype']).contains(cell.field);
},
render: function ($td, cell) {
var label = cell.value.split("|")[0];
var val = cell.value.split("|")[1];
if (val > 4) {
$td.addClass("range-cell").addClass("css_for_green")
}
else if (val > 5) {
$td.addClass("range-cell").addClass("css_for_yellow")
}
else if (val > 6) {
$td.addClass("range-cell").addClass("css_for_red")
}
$td.text(label).addClass("string");
}
});

var sh = mvc.Components.get("tableWithColorBasedOnAnotherField");
if (typeof (sh) != "undefined") {
sh.getVisualization(function (tableView) {
// Add custom cell renderer and force re-render
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.table.render();
});
}
});

please help me where i am wrong

Labels (1)
0 Karma
1 Solution

niketnilay
Legend

@Rukmani_Splunk I have posted some debug steps in the other answer. Since your Simple XML code snippet and JS code seems to be fine, you would need to look into whether the JS has been loaded to correct place or not. Also whether it is being read by Splunk or is there a cached version which has issues. Please try them out and confirm. If they do not work please post more details on your issue. Whether any color is getting applied to sourcetype column or not, is there any JS error in Browser Console?

works fine for me. Obviously I had to increase the thresholds for 4 , 5, 6 as there are definitely more than 4 events per sourcetype in last 24 hours and they all turned Green.

If you have put the JS file correctly in your Splunk App's appserver/static directory and the same has been included in the dashboard's root node as script="yourJSFileName.js", then it should work. Try debug/refresh or bump for non-prod instance or even restart if required. Also try clearing Browser History to ensure static file is not loaded from cache.

In order to ensure that script file has been uploaded correctly in your app's appserver/static folder, type the following in your browser URL, change your Splunk Server Name, Splunk App Name and JS file name as required:

http://<yourSplunkServer>:8000/en-US/static/app/<yourAppName>/<yourJSFile>.js

Please try above steps and confirm. Even with your existing code, you should see all Sourcetype with Green background.

https://answers.splunk.com/answers/686288/how-do-you-highlight-a-table-cell-based-on-a-field.html#an...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

Rukmani_Splunk
Explorer

Thanks a lot. Issue was the cache

niketnilay
Legend

@Rukmani_Splunk I have posted some debug steps in the other answer. Since your Simple XML code snippet and JS code seems to be fine, you would need to look into whether the JS has been loaded to correct place or not. Also whether it is being read by Splunk or is there a cached version which has issues. Please try them out and confirm. If they do not work please post more details on your issue. Whether any color is getting applied to sourcetype column or not, is there any JS error in Browser Console?

works fine for me. Obviously I had to increase the thresholds for 4 , 5, 6 as there are definitely more than 4 events per sourcetype in last 24 hours and they all turned Green.

If you have put the JS file correctly in your Splunk App's appserver/static directory and the same has been included in the dashboard's root node as script="yourJSFileName.js", then it should work. Try debug/refresh or bump for non-prod instance or even restart if required. Also try clearing Browser History to ensure static file is not loaded from cache.

In order to ensure that script file has been uploaded correctly in your app's appserver/static folder, type the following in your browser URL, change your Splunk Server Name, Splunk App Name and JS file name as required:

http://<yourSplunkServer>:8000/en-US/static/app/<yourAppName>/<yourJSFile>.js

Please try above steps and confirm. Even with your existing code, you should see all Sourcetype with Green background.

https://answers.splunk.com/answers/686288/how-do-you-highlight-a-table-cell-based-on-a-field.html#an...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma