Dashboards & Visualizations

how to hide/show 2 panels in the dashboard based on 2 radio buttons

henriq_c
Explorer

Hi !
i have a dashboard with 2 panels.
i want to show my 1st panel and hide the 2nd one when i check the first radiobutton (by default i want to check it and show the 1st panel)
when i check the 2nd one, i want to hide the first panel and show the 2nd.

Please provide sample code for my use case.

Thank you

0 Karma
1 Solution

renjith_nair
SplunkTrust
SplunkTrust

@henriq_c ,

Suggest you to refer to the documentation to start with token usages

https://docs.splunk.com/Documentation/Splunk/7.3.0/Viz/tokens#Define_tokens_for_form_inputs

Here is a run anywhere example.

<form>
  <label>Radio Button Panels</label>
  <fieldset submitButton="false">
    <input type="radio" token="field1">
      <label>Select Panel</label>
      <choice value="first">First</choice>
      <choice value="second">Second</choice>
      <default>first</default>
      <initialValue>first</initialValue>
      <change>
        <condition value="first">
          <set token="first_token">true</set>
          <unset token="second_token"></unset>
        </condition>
        <condition value="second">
          <set token="second_token">true</set>
          <unset token="first_token"></unset>
        </condition>        
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$first_token$">
      <title>First Panel</title>
      <chart>
        <search>
          <query>index=_internal| stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
    <panel  depends="$second_token$">
      <title>Second Panel</title>
      <chart>
        <search>
          <query>index=_*| stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
</form>
Happy Splunking!

View solution in original post

niketn
Legend

@henriq_c following is a sample input code which sets and unset token based on selected value to show and hide panels.

    <input type="radio" token="tokTogglePanel">
      <label></label>
      <choice value="panel1">Show Panel 1</choice>
      <choice value="panel2">Show Panel 2</choice>
      <default>panel1</default>
      <change>
        <condition value="panel1">
          <set token="tokShowPanel1">true</set>
          <unset token="tokShowPanel2"></unset>
        </condition>
        <condition value="panel2">
          <unset token="tokShowPanel1"></unset>
          <set token="tokShowPanel2">true</set>
        </condition>
      </change>
    </input>

Try the following run anywhere dashboard example:

<form>
  <label>Radio button hide show</label>
  <fieldset submitButton="false">
    <input type="radio" token="tokTogglePanel">
      <label></label>
      <choice value="panel1">Show Panel 1</choice>
      <choice value="panel2">Show Panel 2</choice>
      <default>panel1</default>
      <change>
        <condition value="panel1">
          <set token="tokShowPanel1">true</set>
          <unset token="tokShowPanel2"></unset>
        </condition>
        <condition value="panel2">
          <unset token="tokShowPanel1"></unset>
          <set token="tokShowPanel2">true</set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$tokShowPanel1$">
      <title>Panel 1</title>
      <single>
        <search>
          <query>| makeresults
| fields - _time
| eval data=random()</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</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">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel depends="$tokShowPanel2$">
      <title>Panel 2</title>
      <single>
        <search>
          <query>| makeresults
| fields - _time
| eval data=random()</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</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">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

renjith_nair
SplunkTrust
SplunkTrust

@henriq_c ,

Suggest you to refer to the documentation to start with token usages

https://docs.splunk.com/Documentation/Splunk/7.3.0/Viz/tokens#Define_tokens_for_form_inputs

Here is a run anywhere example.

<form>
  <label>Radio Button Panels</label>
  <fieldset submitButton="false">
    <input type="radio" token="field1">
      <label>Select Panel</label>
      <choice value="first">First</choice>
      <choice value="second">Second</choice>
      <default>first</default>
      <initialValue>first</initialValue>
      <change>
        <condition value="first">
          <set token="first_token">true</set>
          <unset token="second_token"></unset>
        </condition>
        <condition value="second">
          <set token="second_token">true</set>
          <unset token="first_token"></unset>
        </condition>        
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$first_token$">
      <title>First Panel</title>
      <chart>
        <search>
          <query>index=_internal| stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
    <panel  depends="$second_token$">
      <title>Second Panel</title>
      <chart>
        <search>
          <query>index=_*| stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
</form>
Happy Splunking!

niketn
Legend

@renjith.nair you beat me to it by 30 seconds 😛

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

henriq_c
Explorer

is it possible to put 2 charts on the same panel and do the same with radiobuttons on this panel ?

0 Karma

renjith_nair
SplunkTrust
SplunkTrust

@henriq_c,

Yes possible. you need to move both charts to the same panel and add the depends parameter to the chart instead of panel.

<form>
  <label>Radio Button Panels</label>
  <fieldset submitButton="false">
    <input type="radio" token="field1">
      <label>Select Panel</label>
      <choice value="first">First</choice>
      <choice value="second">Second</choice>
      <default>first</default>
      <initialValue>first</initialValue>
      <change>
        <condition value="first">
          <set token="first_token">true</set>
          <unset token="second_token"></unset>
        </condition>
        <condition value="second">
          <set token="second_token">true</set>
          <unset token="first_token"></unset>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Only one panel</title>
      <chart depends="$first_token$">
        <search>
          <query>index=_internal| stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">none</option>
      </chart>
      <chart depends="$second_token$">
        <search>
          <query>index=_*| stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
</form>

If you are asking about two charts on the first panel and two on the second panel, its also possible

Happy Splunking!
0 Karma

renjith_nair
SplunkTrust
SplunkTrust

Sorry @niketnilay 😄 . It has happened to me many times. Now I always do a refresh just before posting to make sure that there are no identical answers 🙂

Happy Splunking!

niketn
Legend

No need to be sorry. I was actually appreciating you for your response speed 🙂 Yay!!!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...