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

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

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

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!

Routing Data to Different Splunk Indexes in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. The OpenTelemetry project is the second largest ...

Getting Started with AIOps: Event Correlation Basics and Alert Storm Detection in ...

Getting Started with AIOps:Event Correlation Basics and Alert Storm Detection in Splunk IT Service ...

Register to Attend BSides SPL 2022 - It's all Happening October 18!

Join like-minded individuals for technical sessions on everything Splunk!  This is a community-led and run ...