Dashboards & Visualizations

Is it possible that a dashboard with single value panels, configures the hover/mouseover?

Carolina
Engager

Hi,
It Is possible that a Dashboard with single value panels configures the hover/ mouseover?
Regards.

0 Karma
1 Solution

niketn
Legend

@Carolina, you can code mouhover using Simple XML JS Extension. You can refer to the answer by @Jeffland https://answers.splunk.com/answers/337329/is-it-possible-to-show-a-custom-tooltip-whenever-a.html

Or you could also refer to one of my older answers on similar lines for Radial gauge: https://answers.splunk.com/answers/586554/is-it-possible-to-do-mouseover-hint-on-a-radio-gau.html

Following is a Run Anywhere example for Single Value Mousehover extending the same example. Some static text with Search Job sid is displayed as Tooltip Text through <html> Panel which gets displayed on Mouseover as Tooltip Text and is hidden on Mouseout. Please try out and confirm!

alt text

Following is the Simple XML Dashboard Code:

<dashboard script="single_value_mouseover.js">
  <label>Single Value Mouseover</label>
  <row>
    <panel depends="$alwaysHiddenCSSPanel$">
      <html>
        <style>
          #singleValueWithMouseover div#singlevalue.single-value svg{
            cursor:pointer;
          }
        </style>
      </html>
    </panel>
    <panel>
      <html id="htmlSingleValueToolTip" depends="$tokShowSingleValueToolTip$">
        <!-- Style for Tooltip Text for center alignment with panel -->
        <style>
          #htmlSingleValueToolTip{
            margin:auto !important;
            height:40% !important;
            width:70% !important;
          }
          #htmlSingleValueToolTip .tooltip-inner{
            max-width:200px !important;
            height: 60px !important;
            display: block !important;
            overflow-wrap: break-word !important;
          }
        </style>
        <div class="tooltip fade top in">
          <div class="tooltip-arrow"/>
          <div class="tooltip-inner">$tokSingleValueToolTipText$</div>
        </div>
      </html>      
      <title>Splunkd Error Trending - Single Value</title>
      <single id="singleValueWithMouseover">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  timechart count as Errors</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <done>
            <set token="tokSingleValueToolTipText">Some Tooltip Text for $job.sid$</set>
          </done>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">inverse</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="underLabel">Errors</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</dashboard>

Following is the Javascript single_value_mouseover.js code:

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function (
    mvc
) {
        var tokens = mvc.Components.get("submitted");
        //Get Single Value by id=singleValueWithMouseover set in SimpleXML <single id="singleValueWithMouseover">
        mvc.Components.get('singleValueWithMouseover').getVisualization(function (singleView) {
            singleView.on('rendered', function () {
                //On mouseover() event unset the show token for the Tooltip to hide the same. 
                $(document).on("mouseover", "#singleValueWithMouseover div#singlevalue.single-value svg", function () {
                    tokens.set("tokShowSingleValueToolTip", "true");
                });
                //On mouseout() event unset the show token for the Tooltip to hide the same. 
                $(document).on("mouseout", "#singleValueWithMouseover div#singlevalue.single-value svg", function () {
                    tokens.unset("tokShowSingleValueToolTip");
                });
            });
        });
    });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@Carolina, you can code mouhover using Simple XML JS Extension. You can refer to the answer by @Jeffland https://answers.splunk.com/answers/337329/is-it-possible-to-show-a-custom-tooltip-whenever-a.html

Or you could also refer to one of my older answers on similar lines for Radial gauge: https://answers.splunk.com/answers/586554/is-it-possible-to-do-mouseover-hint-on-a-radio-gau.html

Following is a Run Anywhere example for Single Value Mousehover extending the same example. Some static text with Search Job sid is displayed as Tooltip Text through <html> Panel which gets displayed on Mouseover as Tooltip Text and is hidden on Mouseout. Please try out and confirm!

alt text

Following is the Simple XML Dashboard Code:

<dashboard script="single_value_mouseover.js">
  <label>Single Value Mouseover</label>
  <row>
    <panel depends="$alwaysHiddenCSSPanel$">
      <html>
        <style>
          #singleValueWithMouseover div#singlevalue.single-value svg{
            cursor:pointer;
          }
        </style>
      </html>
    </panel>
    <panel>
      <html id="htmlSingleValueToolTip" depends="$tokShowSingleValueToolTip$">
        <!-- Style for Tooltip Text for center alignment with panel -->
        <style>
          #htmlSingleValueToolTip{
            margin:auto !important;
            height:40% !important;
            width:70% !important;
          }
          #htmlSingleValueToolTip .tooltip-inner{
            max-width:200px !important;
            height: 60px !important;
            display: block !important;
            overflow-wrap: break-word !important;
          }
        </style>
        <div class="tooltip fade top in">
          <div class="tooltip-arrow"/>
          <div class="tooltip-inner">$tokSingleValueToolTipText$</div>
        </div>
      </html>      
      <title>Splunkd Error Trending - Single Value</title>
      <single id="singleValueWithMouseover">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  timechart count as Errors</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <done>
            <set token="tokSingleValueToolTipText">Some Tooltip Text for $job.sid$</set>
          </done>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">inverse</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="underLabel">Errors</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</dashboard>

Following is the Javascript single_value_mouseover.js code:

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function (
    mvc
) {
        var tokens = mvc.Components.get("submitted");
        //Get Single Value by id=singleValueWithMouseover set in SimpleXML <single id="singleValueWithMouseover">
        mvc.Components.get('singleValueWithMouseover').getVisualization(function (singleView) {
            singleView.on('rendered', function () {
                //On mouseover() event unset the show token for the Tooltip to hide the same. 
                $(document).on("mouseover", "#singleValueWithMouseover div#singlevalue.single-value svg", function () {
                    tokens.set("tokShowSingleValueToolTip", "true");
                });
                //On mouseout() event unset the show token for the Tooltip to hide the same. 
                $(document).on("mouseout", "#singleValueWithMouseover div#singlevalue.single-value svg", function () {
                    tokens.unset("tokShowSingleValueToolTip");
                });
            });
        });
    });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

Carolina
Engager

Hi, it's possible for the version 6.5.3 of Splunk Enterprise ?

0 Karma
Get Updates on the Splunk Community!

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...

Edge Processor Scaling, Energy & Manufacturing Use Cases, and More New Articles on ...

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

Get More Out of Your Security Practice With a SIEM

Get More Out of Your Security Practice With a SIEMWednesday, July 31, 2024  |  11AM PT / 2PM ETREGISTER ...