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!

Splunk Observability Cloud | Unified Identity - Now Available for Existing Splunk ...

Raise your hand if you’ve already forgotten your username or password when logging into an account. (We can’t ...

Index This | How many sides does a circle have?

February 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...