Dashboards & Visualizations
Highlighted

How to drill down from a single value panel to a specific panel in the same dashboard?

New Member

I have a single value panel , so I need click it and move to the specific panel in the same dashboard, is any way to do it?

0 Karma
Highlighted

Re: How to drill down from a single value panel to a specific panel in the same dashboard?

Community Manager
Community Manager

Hi @jossplacencia

Can you clarify what you mean by "scroll with drilldown" in your question title? You don't mention scrolling at all in your content. Are you simply asking "How to drill down from a single value panel to a specific panel in the same dashboard?"

0 Karma
Highlighted

Re: How to drill down from a single value panel to a specific panel in the same dashboard?

New Member

Hi @ppablo , that is correct, I just updated the question

thank you

0 Karma
Highlighted

Re: How to drill down from a single value panel to a specific panel in the same dashboard?

Champion

This can be done with some js. In Simple XML, give your Single Value an id and enable drilldown:

<row>
  <panel>
    <single id="single">
      <search>
        ...
      </search>
      ...
      <option name="drilldown">all</option>
      ...

Next, put some ids as anchors in your html in your target panel:

<row>
  <panel>
    <table id="target1">
      <search>
        ...

Finally, add some js to your dashboard with the following code in it:

$("#single").on("click", function(e) {
    e.preventDefault(); // Prevent default drilldown if needed
    var url = window.location.href.split("#")[0] + "#target1"; // Add/Replace url fragment
    window.location.href = url; // Go to specified position
});

That should be all you need.
(Edited to work with jquery selector instead of splunkjs component)

Highlighted

Re: How to drill down from a single value panel to a specific panel in the same dashboard?

Legend

Following is a run anywhere example with slight modification to the answer by @jeffland,

The jQuery selector for trapping click event on Single value should be $(document).on("click","#single", function(e) { instead of $("#single").on("click", function(e) { to ensure that the document is rendered and #single is available for clicking.

 $(document).on("click","#single", function(e) {
     e.preventDefault(); // Prevent default drilldown if needed
     var url = window.location.href.split("#")[0] + "#drilldownTarget"; // Add/Replace url fragment
     window.location.href = url; // Go to specified position
 });

Following is a run anywhere example which you can try and confirm!

<dashboard script="single_custom_drilldown.js">
  <label>Single Value with Drilldown to Another section of Dashboard</label>
  <row>
    <panel>
      <title>Click Single Value to navigate to the chart in the bottom within the dashboard</title>
      <single id="single">
        <title>Internal index event count</title>
        <search>
          <query>| tstats count where index=_internal
          </query>
          <earliest>-1d@d</earliest>
          <latest>now</latest>
        </search>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Trending event count - tabular</title>
        <search id="sResults">
          <query>| tstats count where index=_internal by _time span=1h
          </query>
          <earliest>-1d@d</earliest>
          <latest>now</latest>
        </search>
        <option name="count">20</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <title>Drilldown chart</title>
      <chart id="drilldownTarget">
        <title>Trending event count - Column Chart</title>
        <search base="sResults"></search>
      </chart>
    </panel>
  </row>
</dashboard>

Following is the code for single_custom_drilldown.js JavaScript file:

require(["jquery", 
        "splunkjs/mvc", 
        "splunkjs/mvc/simplexml/ready!"], 
    function($, mvc) {
    console.log("Inside Custom Single Drilldown JS");
     $(document).on("click","#single", function(e) {
         e.preventDefault(); // Prevent default drilldown if needed
         var url = window.location.href.split("#")[0] + "#drilldownTarget"; // Add/Replace url fragment
         window.location.href = url; // Go to specified position
     });
});



| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: How to drill down from a single value panel to a specific panel in the same dashboard?

Champion

Using event bubbling is definitely a more robust solution. In my experience however, requiring

"splunkjs/mvc/simplexml/ready!"

means that the DOM element with the id single exists before our js is run, and that attaching the event listener works.

0 Karma