Single value drilldown click to display and click again to hide

[dbcase]

Hi,

I have a single value panel (see below) that I'd like to click (denoted by the red arrow) and display a histogram chart (I have both queries) in a new row below the single value and when the user clicks the single value or the newly displayed histogram chart it should hide the histogram chart.

Any thoughts?

[dbcase · Accepted solution]

 <panel>
   <title>Average Session Duration in minutes</title>
   <single>
     <search>
       <query>index=wholesale_app buildTarget=* product=* analyticType=sessionStart OR (analyticType=AppStateEvent AND Properties.index=3)|transaction clientSessionId startswith="sessionStart" endswith="AppStateEvent"|eval duration=if(duration<=50000,duration,0)|stats median(duration) as dur |eval dur=round(dur/60,2)| appendpipe [stats count | where count=0]</query>
       <earliest>$time_field.earliest$</earliest>
       <latest>$time_field.latest$</latest>
       <sampleRatio>1</sampleRatio>
     </search>
     <option name="drilldown">all</option>
     <option name="underLabel">Click to display additional detail</option>
     <drilldown>
       <set token="showsessiondurationhistogram">y</set>
     </drilldown>
   </single>
 </panel>

 <panel>
   <title>Average time between logins in minutes</title>
   <single>
     <search>
       <query>index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$ CustomAnalytic Properties.index=1 |rex "accountId.....(?<extref>[^\\\]+)"|  sort 0 _time 

| bin _time as day span=1d
| streamstats current=f last(_time) as lasttime by extref day
| appendpipe [| stats count as duration | where duration=0 ]
| eval duration= _time - lasttime| stats avg(duration) as duration by extref|where duration>0| stats avg(duration) as duration |eval duration = round(duration/60,0)| appendpipe [stats count | where count=0]
$time_field.earliest$
$time_field.latest$
1

index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$|dedup clientSessionId |stats count as Sessions
$time_field.earliest$
$time_field.latest$
1


0


$result.Sessions$









index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$ analyticType=DynamicChoice Properties.index=2 Properties.args{}=CONNECTED |stats count
$time_field.earliest$
$time_field.latest$
1







index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$ Counter Properties.index=1 |rename Properties.args{} as camerams |stats avg(camerams) as duration1 by clientSessionId|stats avg(duration1) as duration |eval duration = round((duration/1000)/60,2)| appendpipe [stats count | where count=0]
$time_field.earliest$
$time_field.latest$
1

0.00

 <panel depends="$showsessiondurationhistogram$">
   <chart>
     <search>
       <query>index=wholesale_app buildTarget=* product=* analyticType=sessionStart OR (analyticType=AppStateEvent AND Properties.index=3)|transaction clientSessionId startswith="sessionStart" endswith="AppStateEvent"|eval duration=if(duration<=50000,duration,0)|eval bucket=case(duration<11,"0-10 seconds",duration<31,"11-30 seconds",duration<61,"31-60 seconds",duration<181,"1-3 minutes",duration<601,"4-10 minutes",duration<1801,"11-30 minutes",duration<3601,"31-60 minutes",duration>3600,"Greater than 1 hr",1=1,"Other")|stats count by bucket</query>
     </search>
     <drilldown>
       <unset token="showsessiondurationhistogram"></unset>
     </drilldown>
   </chart>
 </panel>

[niketn]

@dbcase, you would need to select your entire code and press the code button i.e. (101010). Most of your code did not get published due to the same.

Also, while Trellis would have reduced your code and made it simpler, I think you have chosen the single value option. Do try out Trellis as well and up vote if you find it helpful.

[elliotproebstel]

How about having two identical panels, where one has this:

<panel rejects="$showhistogram$">
...
<option name="drilldown">all</option>
<drilldown>
    <set token="showhistogram">true</set>
</drilldown>
...
</panel>

And the other panel has this:

<panel depends="$showhistogram$">
...
<option name="drilldown">all</option>
<drilldown>
    <unset token="showhistogram">true</unset>
</drilldown>
...
</panel>

And then, of course, the panel containing your histogram will also need:

<panel depends="$showhistogram$">...</panel>

[elliotproebstel]

Sorry, to be clear - the panel containing the histogram will need the whole second code chunk, not just the panel tags.

[niketn]

Try the following run anywhere example. It uses a Trellis for Single Value. However, seems like you dont need Trellis. You can take out required pieces like
(1) Single Value Drilldown with token for displaying chart.
(2) If you need passing clicked details to the chart, instead of trellis token, you will set from Single Value drilldown default token (if required).
(3) Chart Display depends token, and Chart drilldown to unset the depends token.

Clicking on Single Value displays the Details Chart and Clicking on Details Chart hides it. Alternatively, you can also add a show/hide details check box. If you need to click on Same Single Value twice, you would need to code Simple XML JavaScript extension. Please let me know if you are interested in these.

Following is the complete Run Anywhere Simple XML code:

<form>
  <label>Single Value Drilldown</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <title>Single Value Trellis Click for Details</title>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label>Select Time</label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>
      <single>
        <search id="baseSearch">
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count by component limit=10 useother=f</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">block</option>
        <option name="drilldown">all</option>
        <option name="height">300</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x65a637","0xf58f39","0xd93f3c"]</option>
        <option name="rangeValues">[0,10]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trellis.splitBy">component</option>
        <option name="trendColorInterpretation">inverse</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="underLabel">errors</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
        <drilldown>
          <set token="tokShowDetails">true</set>
          <set token="tokClickedFieldName">$trellis.value$</set>
        </drilldown>
      </single>
    </panel>
  </row>
  <row depends="$tokShowDetails$">
    <panel>
      <title>Drilldown Detail for $tokClickedFieldName$ - Click to hide</title>
      <chart>
        <search base="baseSearch">
          <query>| fields _time "$tokClickedFieldName$"</query>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">all</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <unset token="tokShowDetails"></unset>
          <unset token="tokClickedFieldName"></unset>
        </drilldown>
      </chart>
    </panel>
  </row>
</form>

[niketn]

@dbcase, based on the question and description, I believe you would already have the dashboard to show histogram on single value drilldown and need help in hiding it when the same single value is clicked again. Please confirm, if this is what you want. Also share your existing dashboard code if you can.

[dbcase]

Hi Niketnialy,

Yes sir that is correct. Looks like I can't post the entire dashboard xml code (too big) . I've already started working on the dropdown a bit.

Here is the specific single value and my early work XML code

  <panel>
      <title>Average Session Duration in minutes</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=* product=* analyticType=sessionStart OR (analyticType=AppStateEvent AND Properties.index=3)|transaction clientSessionId startswith="sessionStart" endswith="AppStateEvent"|eval duration=if(duration&lt;=50000,duration,0)|stats median(duration) as dur |eval dur=round(dur/60,2)| appendpipe [stats count | where count=0]</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
      </single>
    </panel>
    <panel depends="$showsessiondurationhistogram$">
      <chart>
        <search>
          <query>index=wholesale_app buildTarget=* product=* analyticType=sessionStart OR (analyticType=AppStateEvent AND Properties.index=3)|transaction clientSessionId startswith="sessionStart" endswith="AppStateEvent"|eval duration=if(duration&lt;=50000,duration,0)|eval bucket=case(duration&lt;11,"0-10 seconds",duration&lt;31,"11-30 seconds",duration&lt;61,"31-60 seconds",duration&lt;181,"1-3 minutes",duration&lt;601,"4-10 minutes",duration&lt;1801,"11-30 minutes",duration&lt;3601,"31-60 minutes",duration&gt;3600,"Greater than 1 hr",1=1,"Other")|stats count by bucket</query>
        </search>
      </chart>
    </panel>

[dbcase]

Ok here is the updated XML code. I have the chart displaying in the place I want when the user clicks the panel. I just don't know how to hide it when the user clicks

<row>
    <panel>
      <title>Average Session Duration in minutes</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=* product=* analyticType=sessionStart OR (analyticType=AppStateEvent AND Properties.index=3)|transaction clientSessionId startswith="sessionStart" endswith="AppStateEvent"|eval duration=if(duration&lt;=50000,duration,0)|stats median(duration) as dur |eval dur=round(dur/60,2)| appendpipe [stats count | where count=0]</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">all</option>
        <option name="underLabel">Click to display additional detail</option>
        <drilldown>
          <set token="showsessiondurationhistogram">y</set>
        </drilldown>
      </single>
    </panel>

    <panel>
      <title>Average time between logins in minutes</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$ CustomAnalytic Properties.index=1 |rex "accountId.....(?&lt;extref&gt;[^\\\]+)"|  sort 0 _time 
 | bin _time as day span=1d
 | streamstats current=f last(_time) as lasttime by extref day
 | appendpipe [| stats count as duration | where duration=0 ]
 | eval duration= _time - lasttime|   stats avg(duration) as duration by extref|where duration&gt;0| stats avg(duration) as duration |eval duration = round(duration/60,0)| appendpipe [stats count | where count=0]</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
      </single>
    </panel>
    <panel>
      <title>Number of unique sessions</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$|dedup clientSessionId |stats count as Sessions</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match="$job.resultCount$==0">
              <set token="toklog">0</set>
            </condition>
            <condition>
              <set token="toklog">$result.Sessions$</set>
            </condition>
          </done>
        </search>
      </single>
    </panel>
    <panel>
      <title>Camera views</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$ analyticType=DynamicChoice Properties.index=2 Properties.args{}=CONNECTED |stats count</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
      </single>
    </panel>
    <panel>
      <title>Average camera viewing duration in minutes</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$ Counter Properties.index=1 |rename Properties.args{} as camerams |stats avg(camerams) as duration1 by clientSessionId|stats avg(duration1) as duration |eval duration = round((duration/1000)/60,2)| appendpipe [stats count | where count=0]</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="numberPrecision">0.00</option>
      </single>
    </panel>
  </row>

  <row>
    <panel depends="$showsessiondurationhistogram$">
      <chart>
        <search>
          <query>index=wholesale_app buildTarget=* product=* analyticType=sessionStart OR (analyticType=AppStateEvent AND Properties.index=3)|transaction clientSessionId startswith="sessionStart" endswith="AppStateEvent"|eval duration=if(duration&lt;=50000,duration,0)|eval bucket=case(duration&lt;11,"0-10 seconds",duration&lt;31,"11-30 seconds",duration&lt;61,"31-60 seconds",duration&lt;181,"1-3 minutes",duration&lt;601,"4-10 minutes",duration&lt;1801,"11-30 minutes",duration&lt;3601,"31-60 minutes",duration&gt;3600,"Greater than 1 hr",1=1,"Other")|stats count by bucket</query>
        </search>
      </chart>
    </panel>
  </row>

[dbcase]

well I'll be, this worked 🙂

<row>
    <panel>
      <title>Average Session Duration in minutes</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=* product=* analyticType=sessionStart OR (analyticType=AppStateEvent AND Properties.index=3)|transaction clientSessionId startswith="sessionStart" endswith="AppStateEvent"|eval duration=if(duration&lt;=50000,duration,0)|stats median(duration) as dur |eval dur=round(dur/60,2)| appendpipe [stats count | where count=0]</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">all</option>
        <option name="underLabel">Click to display additional detail</option>
        <drilldown>
          <set token="showsessiondurationhistogram">y</set>
        </drilldown>
      </single>
    </panel>

    <panel>
      <title>Average time between logins in minutes</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$ CustomAnalytic Properties.index=1 |rex "accountId.....(?&lt;extref&gt;[^\\\]+)"|  sort 0 _time 
 | bin _time as day span=1d
 | streamstats current=f last(_time) as lasttime by extref day
 | appendpipe [| stats count as duration | where duration=0 ]
 | eval duration= _time - lasttime|   stats avg(duration) as duration by extref|where duration&gt;0| stats avg(duration) as duration |eval duration = round(duration/60,0)| appendpipe [stats count | where count=0]</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
      </single>
    </panel>
    <panel>
      <title>Number of unique sessions</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$|dedup clientSessionId |stats count as Sessions</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match="$job.resultCount$==0">
              <set token="toklog">0</set>
            </condition>
            <condition>
              <set token="toklog">$result.Sessions$</set>
            </condition>
          </done>
        </search>
      </single>
    </panel>
    <panel>
      <title>Camera views</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$ analyticType=DynamicChoice Properties.index=2 Properties.args{}=CONNECTED |stats count</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
      </single>
    </panel>
    <panel>
      <title>Average camera viewing duration in minutes</title>
      <single>
        <search>
          <query>index=wholesale_app buildTarget=$mso_selection$ product=$Product_token$ Counter Properties.index=1 |rename Properties.args{} as camerams |stats avg(camerams) as duration1 by clientSessionId|stats avg(duration1) as duration |eval duration = round((duration/1000)/60,2)| appendpipe [stats count | where count=0]</query>
          <earliest>$time_field.earliest$</earliest>
          <latest>$time_field.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="numberPrecision">0.00</option>
      </single>
    </panel>
  </row>

  <row>
    <panel depends="$showsessiondurationhistogram$">
      <chart>
        <search>
          <query>index=wholesale_app buildTarget=* product=* analyticType=sessionStart OR (analyticType=AppStateEvent AND Properties.index=3)|transaction clientSessionId startswith="sessionStart" endswith="AppStateEvent"|eval duration=if(duration&lt;=50000,duration,0)|eval bucket=case(duration&lt;11,"0-10 seconds",duration&lt;31,"11-30 seconds",duration&lt;61,"31-60 seconds",duration&lt;181,"1-3 minutes",duration&lt;601,"4-10 minutes",duration&lt;1801,"11-30 minutes",duration&lt;3601,"31-60 minutes",duration&gt;3600,"Greater than 1 hr",1=1,"Other")|stats count by bucket</query>
        </search>
        <drilldown>
          <unset token="showsessiondurationhistogram"></unset>
        </drilldown>
      </chart>
    </panel>
  </row>