@rrameshfernando, refer to one of my Wiki Talk topics where I had listed out showing Static on Dynamic Tooltip text on hoverig over a panel: https://wiki.splunk.com/User_talk:Niketnilay#Topic_12:_Show_Tooltip_Text_on_hovering_over_Panel_.28S...
On Similar lines if a chart with id="chart1" is created JavaScript can be used to show Tool Tip Text upon hovering over the chart. Following is a run anywhere example which displays the Dynamic Tool Tip with search results. The search query is based on Splunk's _internal index and it calculates to count of Errors and Warnings and calculates percent based on the two counts. The Radial Gauge displays count of errors. However, upon hovering over the chart, it displays the percent of Errors compared to Warnings as dynamic Tool Tip using token set inside the <done> Search Event Handler.
Following is the Simple XML Dashboard Source:
<form script="radial_gauge_tooltip_on_mousehover.js">
<label>Radial Gauge Hover Tooltip</label>
<fieldset submitButton="false"></fieldset>
<row>
<panel>
<input type="time" token="tokTime" searchWhenChanged="true">
<label></label>
<default>
<earliest>@d</earliest>
<latest>now</latest>
</default>
</input>
<html id="htmlToolTip1" depends="$tokShowChart1ToolTip$">
<!-- Style for Tooltip Text for center alignment with panel -->
<style>
#htmlToolTip1{
margin:auto !important;
width: 20% !important;
}
</style>
<div class="tooltip fade top in">
<div class="tooltip-arrow"/>
<div class="tooltip-inner">$tokToolTipText1$</div>
</div>
</html>
<chart id="chart1">
<title>Splunkd log Errors</title>
<search>
<query>index=_internal sourcetype=splunkd log_level=*
| stats count(eval(log_level="WARN")) as Warning count(eval(log_level="ERROR")) as Error
| eval percent=round((Error/Warning)*100,2)
| eval percent=if(Warning=0,0,percent)</query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
<sampleRatio>1</sampleRatio>
<done>
<set token="tokToolTipText1">Tooltip: Error/Warning Ratio is $result.percent$ %</set>
</done>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.abbreviation">none</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.abbreviation">none</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.abbreviation">none</option>
<option name="charting.axisY2.enabled">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">radialGauge</option>
<option name="charting.chart.bubbleMaximumSize">50</option>
<option name="charting.chart.bubbleMinimumSize">10</option>
<option name="charting.chart.bubbleSizeBy">area</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.rangeValues">[0,20,60,100]</option>
<option name="charting.chart.showDataLabels">none</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">default</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">all</option>
<option name="charting.gaugeColors">["0x84E900","0xFFE800","0xBF3030"]</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">right</option>
<option name="charting.lineWidth">2</option>
<option name="refresh.display">progressbar</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</chart>
</panel>
</row>
</form>
Following is the JavaScript code for radial_gauge_tooltip_on_mousehover.js included in above dashboard:
require(["splunkjs/mvc",
"splunkjs/mvc/tokenutils",
"jquery",
"splunkjs/ready!",
"splunkjs/mvc/simplexml/ready!"
], function( mvc,
TokenUtils,
$){
//jQuery to access Chart with ID and use mvc.Components.get() function to get all Submitted Tokens.
//On mouseover() event set the show token for the Tooltip
$('#chart1').on("mouseover",function(){
var tokens = mvc.Components.get("submitted");
tokens.set("tokShowChart1ToolTip", "true");
});
//On mouseout() event unset the show token for the Tooltip to hide the same.
$('#chart1').on("mouseout",function(){
var tokens = mvc.Components.get("submitted");
tokens.unset("tokShowChart1ToolTip");
});
});
PS:
- The JavaScript file radial_gauge_tooltip_on_mousehover.js needs to be placed under your Splunk App's Static folder i.e. $SPLUNK_HOME/etc/apps/<YourSplunkAppName>/appserver/static
- Since this example requires Simple XML JavaScript Extension with JS static file, it might require Splunk refresh/bump or reboot. Also internet browser history cleanup for the changes to work.
