topic Re: How to display dashboard panels dynamically? in Dashboards & Visualizations

How to display dashboard panels dynamically?

jrodriguezap — Fri, 14 Nov 2014 19:02:26 GMT

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

Re: How to display dashboard panels dynamically?

somesoni2 — Fri, 14 Nov 2014 20:25:26 GMT

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>

Re: How to display dashboard panels dynamically?

jrodriguezap — Fri, 14 Nov 2014 22:31:32 GMT

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

Re: How to display dashboard panels dynamically?

trsavela — Tue, 20 Jan 2015 19:06:16 GMT

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.

Re: How to display dashboard panels dynamically?

kamal_jagga — Tue, 23 Feb 2016 18:47:11 GMT

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

Re: How to display dashboard panels dynamically?

gyslainlatsa — Tue, 23 Feb 2016 19:23:05 GMT

hi kamal_jagga,

yes, it's possible

Re: How to display dashboard panels dynamically?

gyslainlatsa — Tue, 23 Feb 2016 19:24:58 GMT

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>

Re: How to display dashboard panels dynamically?

somesoni2 — Tue, 23 Feb 2016 19:26:02 GMT

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_.28input.29

Re: How to display dashboard panels dynamically?

dmahler99 — Mon, 29 Feb 2016 21:49:48 GMT

that worked great... thanks

Re: How to display dashboard panels dynamically?

kausar — Mon, 06 Jun 2016 19:18:34 GMT

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

Re: How to display dashboard panels dynamically?

kausar — Mon, 06 Jun 2016 20:32:18 GMT

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>

Re: How to display dashboard panels dynamically?

Tejkumar451 — Mon, 06 Mar 2017 20:11:48 GMT

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

Re: How to display dashboard panels dynamically?

woodcock — Fri, 31 Mar 2017 21:56:14 GMT

Be sure to click Accept to close the question.

Re: How to display dashboard panels dynamically?

rashid47010 — Fri, 30 Jun 2017 06:43:16 GMT

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.

Re: How to display dashboard panels dynamically?

rashid47010 — Fri, 30 Jun 2017 08:21:42 GMT

I achieved the desire.

Re: How to display dashboard panels dynamically?

woodcock — Fri, 30 Jun 2017 19:21:15 GMT

Be sure to click Accept to close this question.