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

[henriq_c]

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

[niketn]

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

[renjith_nair · Accepted solution]

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

[niketn]

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

[henriq_c]

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

[renjith_nair]

@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

[renjith_nair]

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 🙂

[niketn]

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