@aravindpadmin here is a run anywhere example with some cooked up data from Splunk's _internal index to mimic a scenario for Sentiments Negative, Neutral and Positive (PS: as stated not based on actual sentiment data).
The example usese Table Sparkline Formatting options and extending Table with Data Bars example from Splunk Dashboard Examples app.
Following is the Simple XML Dashboard Code:
<form script="table_with_multiple_data_bars.js">
<label>Sentiments table with colored Data Bars and Sparklines</label>
<fieldset submitButton="false"></fieldset>
<row>
<panel>
<input type="time" token="tokTime" searchWhenChanged="true">
<label></label>
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
<html depends="$alwaysHideCSSStylePanel$">
<style>
.data-bar-cell{
padding: 4px 8px;
}
.data-bar-tooltip{
height: 16px;
min-width: 0px;
text-align:center;
color:white;
}
.data-bar-tooltip .data-bar-tooltip-text{
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 2px 5px;
/* Position the tooltip */
position: relative;
top:-15px;
z-index: 1;
}
.data-bar-tooltip:hover .data-bar-tooltip-text {
visibility: visible;
}
.data-bar-tooltip.negative{
background: #ff0000;
}
.data-bar-tooltip.neutral{
background: #D2691E;
}
.data-bar-tooltip.positive{
background: #008000;
}
</style>
</html>
<table id="tableWithMultipleDataBars">
<search>
<query>index=_internal sourcetype=splunkd log_level="*"
| stats count(eval(date_second>0 AND date_second<=20)) as Negative count(eval(date_second>20 AND date_second<=40)) as Neutral count(eval(date_second>40 AND date_second<=60)) as Positive sparkline(count(eval(date_second>0 AND date_second<=20))) as Negative_Sparkline sparkline(count(eval(date_second>20 AND date_second<=40))) as Neutral_Sparkline sparkline(count(eval(date_second>40 AND date_second<=60))) as Positive_Sparkline by component
| eval sentiment=Negative."|".Neutral."|".Positive
| table component sentiment Negative_Sparkline Neutral_Sparkline Positive_Sparkline</query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</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>
<format field="Negative_Sparkline" type="sparkline">
<option name="lineColor">#ff0000</option>
</format>
<format field="Neutral_Sparkline" type="sparkline">
<option name="lineColor">#D2691E</option>
</format>
<format field="Positive_Sparkline" type="sparkline">
<option name="lineColor">#008000</option>
</format>
</table>
</panel>
</row>
</form>
Following is the required JavaScript extension file table_with_multiple_data_bars.js with Splunk JS code to render Data Bars with Tooltips in required table cell. PS: Negative, Neutral and Positive values in sentiments column need to be present with Pipe | as delimiter character i.e. there should value of 0 instead of null. Also the table with Sentiments data bar should have id="tableWithMultipleDataBars" for the changes to work. PS: Since this example requires Static changes (JavaScript file), you may need to refresh, bump or restart your Splunk changes depending on your environment and debug settings. Also typically you need to put the JS file under your Splunk App's appserver/static folder i.e. $SPLUNK_HOME/etc/apps/<yourAppName>/appserver/static
require([
'jquery',
'underscore',
'splunkjs/mvc',
'views/shared/results_table/renderers/BaseCellRenderer',
'splunkjs/mvc/simplexml/ready!'
], function($, _, mvc, BaseCellRenderer) {
console.log("Script Started");
var DataBarCellRenderer = BaseCellRenderer.extend({
canRender: function(cell) {
return (cell.field === 'sentiment');
},
render: function($td, cell) {
var negative = parseInt(cell.value.split("|")[0]);
var neutral = parseInt(cell.value.split("|")[1]);
var positive = parseInt(cell.value.split("|")[2]);
var total=negative+neutral+positive;
var negative_percent,neutral_percent,positive_percent;
if(total==0){
negative_percent=0.00;
neutral_percent=0.00;
positive_percent=0.00;
negative=0;
neutral=0;
positive=0;
}else{
negative_percent=((negative/total)*100).toFixed(2);
neutral_percent=((neutral/total)*100).toFixed(2);
positive_percent=((positive/total)*100).toFixed(2);
}
$td.addClass('data-bar-cell').html(_.template(
'<div class="data-bar-container" style="display:flex">'+
'<div class="data-bar-tooltip negative" style="width:<%- negative_percent %>%;"><%- negative %>'+
'<span class="data-bar-tooltip-text negative"><%- negative_percent %>%</span>'+
'</div>'+
'<div class="data-bar-tooltip neutral" style="width:<%- neutral_percent %>%;"><%- neutral %>'+
'<span class="data-bar-tooltip-text neutral"><%- neutral_percent %>%</span>'+
'</div>'+
'<div class="data-bar-tooltip positive" style="width:<%- positive_percent %>%;"><%- positive %>'+
'<span class="data-bar-tooltip-text positive"><%- positive_percent %>%</span>'+
'</div>'+
'</div>', {
negative_percent: negative_percent,
negative: negative,
neutral_percent: neutral_percent,
neutral: neutral,
positive_percent: positive_percent,
positive: positive
}));
}
});
mvc.Components.get('tableWithMultipleDataBars').getVisualization(function(tableView) {
tableView.addCellRenderer(new DataBarCellRenderer());
});
});
I have used built in sparkline feature and used Sparkline formatting to apply lineColor to sparklines as per their category. I did not overly the sparkline as it would be possible to draw tristate sparkline over a period of time, provided your stats/chart query for sparkline() can generate three type of values i.e. -1 for Loss, 0 for Draw or 1 for Win. Refer to my Splunk wiki talk Topic 11: Types of jQuery Sparklines in Splunk (besides Line and Bar that we know :))
Or the following run anywhere example to generate some tristate sparkline :
Following is the Simple XML Dashboard code for above example:
<dashboard>
<label>Sparkline tristate</label>
<row>
<panel>
<table>
<search>
<query>| gentimes start=-10 increment=1d
| eval _time=starttime
| fields _time
| eval random=random()%2
| streamstats count as sno
| eval random=if(sno==2 OR sno==7,-1,random)
| bin _time span=1d
| stats sparkline(max(random)) as tristate avg(random) as average
| table average tristate</query>
<earliest>-1s</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>
<format type="number" field="average">
<option name="precision">0</option>
<option name="useThousandSeparators">false</option>
</format>
<format field="tristate" type="sparkline">
<option name="type">tristate</option>
</format>
</table>
</panel>
</row>
</dashboard>
