topic Re: How to reset or hide a drilldown panel in Dashboards & Visualizations

How to reset or hide a drilldown panel

jvmerilla — Wed, 10 Jan 2018 01:52:51 GMT

Hi everyone,

I need some help here.

I have a panel with a pie chart and it has a drilldown panel.

When the pie chart is clicked, the drilldown panel shows.

Now what I want to happen is that the user can reset or hide the drilldown panel when it is not needed anymore.
How is it possible?

Thanks in advance.

Re: How to reset or hide a drilldown panel

jvmerilla — Wed, 10 Jan 2018 01:56:18 GMT

Here is my code on this dashboard:

<form>
  <label>Online News Popularity_v2.0</label>
  <fieldset submitButton="false" autoRun="false">
    <input type="text" token="popularity" searchWhenChanged="true" depends="$hidden$">
      <label>Popularity</label>
    </input>
  </fieldset>

  <row>
    <panel>
      <title>Total Published Online News by Popularity (w/drilldown)</title>
      <chart>
        <search>
          <query>index="online_news"
| apply "online_news_popularity" as predicted_popularity
| stats count by predicted_popularity</query>
          <earliest>0</earliest>
          <latest></latest>
          <sampleRatio>1</sampleRatio>
        </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.scale">linear</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">pie</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.showDataLabels">none</option>
        <option name="charting.chart.showPercent">1</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.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.placement">right</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <drilldown>
            <set token="form.popularity">$click.value$</set>
        </drilldown>
      </chart>
    </panel>
    <panel>
      <title>Popularity: $popularity$</title>
      <table depends="$popularity$">
        <search>
          <query>index="online_news"
| apply "online_news_popularity" as predicted_popularity
| search predicted_popularity=$popularity$
| stats values(url) as "Article's URL" by shares
| sort -shares
| eval Shares = tostring(shares,"commas")
| table "Article's URL", Shares</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

Re: How to reset or hide a drilldown panel

mayurr98 — Wed, 10 Jan 2018 12:20:36 GMT

hey

have a look at this answer
https://answers.splunk.com/answers/559648/clear-or-hide-old-drilldown-panel-results-from-new.html
https://answers.splunk.com/answers/74959/hide-contract-the-drilldown-table.html

Let me know if this helps!

Re: How to reset or hide a drilldown panel

cmerriman — Wed, 10 Jan 2018 12:36:45 GMT

add the html section to your dashboard. it will only show when the popularity token is set and will unset the token when the Reset Drilldown button is clicked

    ...</drilldown>
         </chart>
         </panel>
<panel>
     <html depends="$popularity$">
             <button class="btn" data-unset-token="popularity">Reset Drilldown</button>
        </html>
        <title>Popularity: $popularity$</title>
       <table depends="$popularity$">
       <search>
             <query>index="online_news"...

Re: How to reset or hide a drilldown panel

niketn — Wed, 10 Jan 2018 19:55:53 GMT

@jvmerilla, try the following run anywhere example based on Splunk's _internal index.
On click of a slice in Pie chart it displays the details table which has a Hide Details checkbox to be checked to reset the drilldown component and click on some other slice.

PS: If you need to show a button instead of check box you may use HTML button added to dashboard and unset token event coded using JavaScript extension to Simple XML. Refer to the following example: https://answers.splunk.com/answers/581652/how-can-i-create-a-button-switcher.html

Following is the run anywhere Simple XML dashboard example for the screenshot attached (please try out and confirm):

<form>
  <label>Reset Drilldown</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Pie Chart for drilldown</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| rare 5 component</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </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">pie</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.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.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>
        <drilldown>
          <set token="tokComponent">$click.value$</set>
        </drilldown>
      </chart>
    </panel>
    <panel depends="$tokComponent$">
      <input type="checkbox" token="tokReset" searchWhenChanged="true">
        <label></label>
        <change>
          <unset token="tokComponent"></unset>
          <unset token="form.tokReset"></unset>
        </change>
        <choice value="hide">Hide Details</choice>
        <delimiter> </delimiter>
      </input>
      <table>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO" component="$tokComponent$"
| head 10
| table _time _raw</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
        </search>
        <option name="count">10</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</form>

Re: How to reset or hide a drilldown panel

HattrickNZ — Fri, 24 May 2019 02:56:50 GMT

big tks!! this worked fro me.