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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...