Dashboards & Visualizations

How to display dashboard panels dynamically?

jrodriguezap
Contributor

Hi
Anyone know how to achieve the following XML Dashboard:
I have a drop-down with 3 input values: ValueA, ValueB, ValueC.
Below I want 3 Panels to be generated based on the selected values in the drop-down.
PanelA is a column chart, PanelB is a line chart, PanelC is a Table

How can I do this so that when you select in the Dropdown:

ValueA shows PanelA
ValueB shows PanelB
ValueC shows PanelC

I would appreciate assistance with this please.
regards

Tejkumar451
Explorer

Hi, I have a requirement where i need to us a multiselect instead of a drop down..

ValueA shows PanelA
ValueB shows PanelB
ValueC shows PanelC

As it is a multiselect, when I select both ValueA & valueB, I need to get both PanelA & PanelB.

Please help!

Thanks

0 Karma

trsavela
Path Finder

For more advanced behaviors you can use a little bit of JS to set tokens.

var unsubmittedTokens = mvc.Components.get('default');
unsubmittedTokens.set(<token_name>,<token_value>);

For eaxmple your first search is power by a drop down and gets displayed with the 'depends' option. With JS you can take some data from that search and automatically set a token the display a different panel.

gyslainlatsa
Motivator

hi karmal_jagga,

try like this:

<form>
   <label>Display Dynamic Panel</label>
  <row>
     <panel>  
       <input type="dropdown" token="" searchWhenChanged="true">
         <choice value="1">Panel1</choice>
         <choice value="2">Panel2</choice>
         <choice value="3">Panel3</choice>
         <default></default>

         <change>
           <condition value="1">
             <set token="new_search"> index=_internal |stats count by source </set>
           </condition>
           <condition value="2">
             <set token="new_search"> index=_internal |stats count by sourcetype </set>
           </condition>
           <condition value="3">
             <set token="new_search"> index=_internal |stats count by name </set>
           </condition>
         </change>
       </input>

       <chart>
         <search>
           <query>$new_search$</query>
           <earliest>-4h@m</earliest>
           <latest>now</latest>
         </search>
         <option name="charting.chart">column</option>
       </chart>
     </panel>
   </row>
 </form>

kausar
Path Finder

@gyslainlatsa
Thank you for sharing the code, it works great! But I'm trying to achieve something little different - I have variable number of charts that I want to appear based on the choice. So for example, when value = "1", I have 2 charts, for "2", 1 chart. I tried something like following but didn't work (think, it doesn't like the tag 'char't inside 'input', but if I keep it outside, the charts become global which is not what I want). Any idea how to fix?

<label>Display Dynamic Panel</label>

  <panel>  
    <input type="dropdown" token="" searchWhenChanged="true">
      <choice value="1">Panel1</choice>
      <choice value="2">Panel2</choice>

      <default></default>

      <change>
        <condition value="1">
          <chart id="ch11">
            <search>
              <query>index=_internal |stats count by source</query>
              <earliest>-4h@m</earliest>
              <latest>now</latest>
            </search>
            <option name="charting.chart">column</option>
         </chart>
         <chart id="ch12">
            <search>
              <query>index=_internal |stats count by sourcetype</query>
              <earliest>-4h@m</earliest>
              <latest>now</latest>
            </search>
            <option name="charting.chart">pie</option>
         </chart>
        </condition>

        <condition value="2">
            <chart id="ch21">
              <search>
                <query>index=_internal |stats count by method</query>
                <earliest>-4h@m</earliest>
                <latest>now</latest>
              </search>
             <option name="charting.chart">pie</option>
         </chart>
        </condition>
      </change>
    </input>
  </panel>
</row>
0 Karma

kausar
Path Finder

The way I achieved the dynamic dashboards with different number of charts for different inputs is as follows. Note that I did the grouping for the option 3 where there are multiple charts.

Display Dynamic Panel

<input type="dropdown" token="category_form" searchWhenChanged="true">
  <choice value="1">Panel1</choice>
  <choice value="2">Panel2</choice>
  <choice value="3">Panel3</choice>
  <default></default>

  <change>
    <condition value="1">
      <unset token="categ2" > </unset>
      <unset token="categ3" > </unset>
      <set token="categ1"> </set>
    </condition>
    <condition value="2">
      <unset token="categ1" > </unset>
      <unset token="categ3" > </unset>
      <set token="categ2"> </set>
    </condition>
    <condition value="3">
      <unset token="categ1" > </unset>
      <unset token="categ2" > </unset>
      <set token="categ3"> </set>
    </condition>
  </change>
</input>


  <row depends="$categ1$">
    <panel>
  <chart>
    <search>
      <query>index=_internal |stats count by name</query>
      <earliest>-4h@m</earliest>
      <latest>now</latest>
    </search>
    <option name="charting.chart">column</option>
  </chart>
    </panel>
  </row>


  <row depends="$categ2$">
    <panel>
  <chart>
    <search>
      <query>index=_internal |stats count by source</query>
      <earliest>-4h@m</earliest>
      <latest>now</latest>
    </search>
    <option name="charting.chart">column</option>
  </chart>
    </panel>
    </row> 


  <row depends="$categ3$">
    <panel>
  <chart>
    <search>
      <query>index=_internal |stats count by sourcetype</query>
      <earliest>-4h@m</earliest>
      <latest>now</latest>
    </search>
    <option name="charting.chart">pie</option>
  </chart>
  <chart>
    <search>
      <query>index=_internal |stats count by method</query>
      <earliest>-4h@m</earliest>
      <latest>now</latest>
    </search>
    <option name="charting.chart">column</option>
  </chart>
    </panel>
    </row>

kamal_jagga
Contributor

Hey,
Is it possible to have just one drop down and the panels would be displayed based on the value of that drop down.

0 Karma

gyslainlatsa
Motivator

hi kamal_jagga,

yes, it's possible

0 Karma

somesoni2
SplunkTrust
SplunkTrust

Try something like this (runanywhere sample on Splunk 6.1.2 simple xml).

<form>
  <label>TestDynamicPanel</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="show1">
      <label>Dropdown1</label>
      <populatingSearch fieldForLabel="temp" fieldForValue="temp">|gentimes start=-1 | eval temp="ColumnChart" | table temp</populatingSearch>
    </input>
    <input type="dropdown" token="show2">
      <label>Dropdown2</label>
      <populatingSearch fieldForLabel="temp" fieldForValue="temp">|gentimes start=-1 | eval temp="LineChart" | table temp</populatingSearch>
    </input>
    <input type="dropdown" token="show3">
      <label>Dropdown3</label>
      <populatingSearch fieldForLabel="temp" fieldForValue="temp">|gentimes start=-1 | eval temp="Table" | table temp</populatingSearch>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart depends="$show1$">
      <title>Details for $submitted:sourcetype|s$</title>
     <searchString>index=_internal | timechart count</searchString>
        <earliestTime>-15m</earliestTime>
        <latestTime>now</latestTime>
        <option name="charting.chart">column</option>
    </chart>
      <chart depends="$show2$">
      <title>Details for $submitted:sourcetype|s$</title>
     <searchString>index=_internal | timechart count</searchString>
        <earliestTime>-15m</earliestTime>
        <latestTime>now</latestTime>
        <option name="charting.chart">line</option>
    </chart>
      <table depends="$show3$">
        <searchString>index=_internal | timechart count</searchString>
        <earliestTime>-15m</earliestTime>
        <latestTime>now</latestTime>
      </table>
    </panel>
  </row>
</form>

rashid47010
Communicator

hi somesoni2
I am new to splunk. I have one idea in my mind Please help me to solve this puzzle.
I have three pannels in one dashboard.
panel1
panel2
panel3

Panel one show action=allow OR blocked

Panel2 update its values once action is selected from first panel.
same like panel3 values get updates based on panel one "action" selection.

0 Karma

rashid47010
Communicator

Hi

I achieved the desire.

0 Karma

woodcock
Esteemed Legend

Be sure to click Accept to close this question.

0 Karma

dmahler99
Explorer

that worked great... thanks

0 Karma

woodcock
Esteemed Legend

Be sure to click Accept to close the question.

0 Karma

jrodriguezap
Contributor

hi somesoni2
Thank you very much for the tip, I was reviewing the code.
There will be way to do this with one dropdownlist?

somesoni2
SplunkTrust
SplunkTrust

Depending upon the version that you're using, Splunk provides a feature called condition using which you can set multiple tokens from one dropdown itself. I believe the example show in below link should just work fine.

http://docs.splunk.com/Documentation/Splunk/6.3.3/Viz/PanelreferenceforSimplifiedXML#condition_.28in...

Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...