How to customize a dashboard drilldown to show/hide panels based on token value from pie chart selected?

[sidhantbhayana]

Hi,

I have a piechart showing two values, and I have two panels just below pie chart, I need to open below panels depending on token value from pie chart.

For eg: Pie chart has two values>200 & 201

On selecting 200 from pie chart I could get token value as 200 and want one panel to open and when selecting 201, other panel should open and previous one should hide.

Thanks,
Sidhant Bhayana

[gcusello]

See the Splunk Dashboard Examples App that you can find in the splunkbase (https://splunkbase.splunk.com/app/1603/): there is an example to to what you want.
Bye.
Giuseppe

[sundareshr · Accepted solution]

@sidhantbhayana

try this (do not change " to ")

    <panel>
      <chart>
        <title>Test1 $value$</title>
        <search>
          <query>index=_internal | stats count by status | head 2</query>
          <earliest>@d</earliest>
          <latest>now</latest>
        </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.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>
        <drilldown>
          <condition match="match('click.value', &quot;201&quot;)">
            <set token="panel2">panel2</set>
            <unset token="panel1"></unset>
          </condition>
          <condition match="match('click.value', &quot;200&quot;)">
            <set token="panel1">panel1</set>
            <unset token="panel2"></unset>
          </condition>
        </drilldown>
      </chart>
    </panel>
  </row>
  <row>
    <panel depends="$panel1$">
      <chart>
        <title>Test Panel 1</title>
        <search>
          <query>index=_internal|stats count by source</query>
          <earliest>@d</earliest>
          <latest>now</latest>
        </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">column</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">all</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">none</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>
      </chart>
    </panel>
    <panel depends="$panel2$">
      <chart>
        <title>Test Panel 2</title>
        <search>
          <query>index=_internal|stats count by source</query>
          <earliest>@d</earliest>
          <latest>now</latest>
        </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">column</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">all</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">none</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>
      </chart>
    </panel>

[sidhantbhayana]

@sundareshr : Thanks a ton! It is working like a charm!

[cmerriman]

something like this:
http://docs.splunk.com/Documentation/Splunk/6.5.0/Viz/tokens#Custom_logic_for_dashboards

you'll want to set a token in the pie chart

    <drilldown>
      <set token="value">$click.value2$</set>
    </drilldown>
    <drilldown>
      <unset token="value"></unset>
    </drilldown>
    <progress>
    <condition match="$value$=200">
    <set token="panel1">true</set>
    </condtion>
    <condition match="$value$=201">
    <set token="panel2">true</set>
    </condtion>
   </progress>

and then in the first bar chart:

<panel depends="$panel1$">

and second chart:

<panel depends="$panel2$">

[sidhantbhayana]

tag should be placed between tags or tags.

Testing

<panel>
  <chart>
    <title>Test1 $value$</title>
    <search>
      <query>index=_internal | stats count by status|head 2</query>
    </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.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>
     <drilldown>
   <set token="value">$click.value$</set>
 </drilldown>
 <drilldown>
   <unset token="value"></unset>
 </drilldown>
 <progress>
 <condition match="$value$=200">
 <set token="panel1">true</set>
 </condition>
 <condition match="$value$=201">
 <set token="panel2">true</set>
 </condition>
</progress>
  </chart>
</panel>


<panel depends="$panel1$">
  <chart>
    <title>Test Panel 1</title>
    <search>
      <query>index=_internal|stats count by source</query>
    </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">column</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">all</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">none</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>
  </chart>
</panel>
<panel depends="$panel2$">
  <chart>
    <title>Test Panel 2</title>
    <search>
      <query>index=_internal|stats count by source</query>
    </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">column</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">all</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">none</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>
  </chart>
</panel>

[sidhantbhayana]

progress should be placed between sear ch tags or drilldown tags?

[cmerriman]

progress tags go before </search> and drilldown tags go after.

might be able to try:

 <drilldown>
   <set token="value">$click.value2$</set>
   <condition match="$value$=200">
   <set token="panel1">true</set>
   </condtion>
   <condition match="$value$=201">
   <set token="panel2">true</set>
   </condtion>
   </drilldown>
   <drilldown>
   <unset token="value"></unset>
 </drilldown>

instead of using the progress part.

[sidhantbhayana]

no success @cmerriman

[sidhantbhayana]

@sundareshr: Please help.

[cmerriman]

i worked this out on my own dashboard and it should work:

 <title>Test1 $value$</title>
 <search>
   <query>index=_internal | stats count by status|head 2</query>
        <earliest>-3d@d</earliest>
   <latest>-1d@d</latest>
 </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.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>
 <drilldown>
   <set token="panel1">$row.status$=200</set>
   <set token="panel2">$row.status$=201</set>
   <eval token="showpanel1">if($panel1$="200=200","true",null())</eval>
   <eval token="showpanel2">if($panel2$="201=201","true",null())</eval>
 </drilldown>
    <title>Test Panel 1</title>
 <search>
   <query>index=_internal|stats count by source</query>
 </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">column</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">all</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">none</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>
    <title>Test Panel 2</title>
 <search>
   <query>index=_internal|stats count by source</query>
 </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">column</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">all</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">none</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>

[MattZerfas]

You will need to look at the simplexml docs about drilldown tokens and show/hide based on tokens with depends. If you can post your xml I can help you out more.

If I am following you correctly. You want both to be hidden by default and if the user selects 1 value from the pie chart show the left bottom panel. If the user selects the other value from the pie chart show the right panel?

[sidhantbhayana]

Testing

<panel>
  <chart>
    <title>Test1 $sourcetype$</title>
    <search>
      <query>index=_internal | stats count by status|head 2</query>
    </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.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>
    <drilldown>
      <!-- Use set to specify the new token to be created.
                  Use any token from the page or from the click event to produce the value needed. -->
      <set token="sourcetype">$click.value$</set>
      <!-- If we also set the form.sourcetype the input will get updated too -->
      <set token="form.sourcetype">$click.value$</set>
    </drilldown>
  </chart>
</panel>


<panel depends="$sourcetype$" >open for 200/hide 201
  <chart>
    <title>Test Panel 1</title>
    <search>
      <query>index=_internal|stats count by source</query>
    </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">column</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">all</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">none</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>
  </chart>
</panel>
<panel depends="$sourcetype$"> //open for 201/hide 200
  <chart>
    <title>Test Panel 2</title>
    <search>
      <query>index=_internal|stats count by source</query>
    </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">column</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">all</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">none</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>
  </chart>
</panel>