Dashboards & Visualizations

Is it possible to do mouseover hint on a radio gauge in a dashboard?

rrameshfernando
New Member

alt text

0 Karma

niketn
Legend

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

alt text

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.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Enterprise Security Content Update (ESCU) | New Releases

In January, the Splunk Threat Research Team had one release of new security content via the Splunk ES Content ...

Expert Tips from Splunk Professional Services, Ensuring Compliance, and More New ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Observability Release Update: AI Assistant, AppD + Observability Cloud Integrations & ...

This month’s releases across the Splunk Observability portfolio deliver earlier detection and faster ...