Dashboards & Visualizations
Highlighted

How to reset or hide a drilldown panel

Path Finder

Hi everyone,

I need some help here.

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

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

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.

Highlighted

Re: How to reset or hide a drilldown panel

Path Finder

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>
0 Karma
Highlighted

Re: How to reset or hide a drilldown panel

SplunkTrust
SplunkTrust
0 Karma
Highlighted

Re: How to reset or hide a drilldown panel

Super Champion

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"...
0 Karma
Highlighted

Re: How to reset or hide a drilldown panel

Legend

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

alt text

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>



| eval message="Happy Splunking!!!"


Highlighted

Re: How to reset or hide a drilldown panel

Motivator

big tks!! this worked fro me.