Dashboards & Visualizations

How do I hide a field from a chart but keep it on a drilldown?

igorsantos07
Explorer

I have a Dashboard with a graph and a drilldown table underneath it. The graph shows on the x-axis an eval field (concat of two strings), and I need those two strings on the drilldown table. However, if I hide those fields from the graph they don't get filled in the drilldown tokens, and if they're displayed, they make no sense on the graph.

I think it could also work, although it's a bit ugly. I could split the concatenated value into two tokens to be used in the drilldown search query, but I can't find how to do it.

Sample code:

  <chart>
    <search>
      <query>
        source="query.log" ac=main
        | stats AVG(time) as time, p95(time) as perc by controller, action
        | eval form=controller."/".action
        | sort -perc
        | fields form, time, perc, controller, action <!-- wanted to hide controller and action from graph -->
      </query>
    </search>
    <drilldown>
      <set token="main_form">$row.form$</set>
      <set token="main_controller">$row.controller$</set><!-- isn't filled if hidden at "fields" -->
      <set token="main_action">$row.action</set><!-- isn't filled if hidden at "fields" -->
    </drilldown>
  </chart>

Current result (with renamed fields and whatnot); ac/controller and af/action shouldn't be on the graph, but present on query so they can be used on drilldown:

sample

1 Solution

niketn
Legend

@igorsantos07 seems like the form field that you have in your chart combines both controller and action fields. So you can use form field value on drilldown and use eval to split them into controller and action.

alt text
Following is a run anywhere Simple XML Dashboard Example based on Splunk's _internal index. It uses component and log_level fields to create form field. Only form field is displayed in the chart. Then using <eval> it splits form back to component and log_level tokens for drilldown.

Please try out and confirm!

<dashboard>
  <label>Chart Drilldown</label>
  <row>
    <panel>
      <title>tokComponent: $tokComponent$ | tokLogLevel: $tokLogLevel$</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd component=* log_level=* 
| stats avg(date_second) as time, p95(date_second) as perc by component, log_level 
| eval form=component."/".log_level 
| sort -perc 
| fields form, time, perc</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">area</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="height">409</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <drilldown>
          <eval token="tokComponent">mvindex(split($row.form$,"/"),0)</eval>
          <eval token="tokLogLevel">mvindex(split($row.form$,"/"),1)</eval>
        </drilldown>
      </chart>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@igorsantos07 seems like the form field that you have in your chart combines both controller and action fields. So you can use form field value on drilldown and use eval to split them into controller and action.

alt text
Following is a run anywhere Simple XML Dashboard Example based on Splunk's _internal index. It uses component and log_level fields to create form field. Only form field is displayed in the chart. Then using <eval> it splits form back to component and log_level tokens for drilldown.

Please try out and confirm!

<dashboard>
  <label>Chart Drilldown</label>
  <row>
    <panel>
      <title>tokComponent: $tokComponent$ | tokLogLevel: $tokLogLevel$</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd component=* log_level=* 
| stats avg(date_second) as time, p95(date_second) as perc by component, log_level 
| eval form=component."/".log_level 
| sort -perc 
| fields form, time, perc</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">area</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="height">409</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <drilldown>
          <eval token="tokComponent">mvindex(split($row.form$,"/"),0)</eval>
          <eval token="tokLogLevel">mvindex(split($row.form$,"/"),1)</eval>
        </drilldown>
      </chart>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

igorsantos07
Explorer

aha! I knew there must be a split somewhere! thanks 🙂

0 Karma

igorsantos07
Explorer

I would only suggest you remove all those chart options that are not relevant to the question I asked 😉

niketn
Legend

@igorsantos07 they are the default chart configurations that got added while preparing the run anywhere example. As you would have figured out, <drilldown> is the only important section that I have modified. (Along with <option name="charting.drilldown">all</option>)

While providing run anywhere examples I tend to provide entire XML along with explanation of what is coded specifically for solving the problem. Taking out additional code is further work which I tend to avoid to save time 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

renjith_nair
Legend

@igorsantos07,

Rename the controller and action to _controller and _action and use those field names in the drill down

| fields form, time, perc, controller, action|rename controller as _controller,action as _action

Tokens

       <set token="main_controller">$row._controller$</set>
       <set token="main_action">$row._action</set>

Here is a run anywhere example where _EmpId is not visible in table but the token is assigned with the _EmpId value

<dashboard>
  <label>Dashboard With Hidden Drilldown</label>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults count=5|eval Name="ABC"| streamstats count as _EmpId</query>
          <earliest>-1s@s</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">cell</option>
        <drilldown>
          <set token="empid">$row._EmpId$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <html>
      <h1> Emp Id from drilldown is <font color="red">$empid$</font></h1>
    </html>
  </row>
</dashboard>
Happy Splunking!

igorsantos07
Explorer

Actually, that didn't work for the drilldown. The fields got, indeed, hidden from the chart, but they still doesn't go into the tokens. If I take the underline both from the query (i.e. renaming to something else) and the $row.xyz$ part, it works, but the field gets back onto the chart. It's the same behavior I reported initially.

tokens

This was supposed to be fed by the tokens, but they only get the raw variable names - which I guess are the initial values:
alt text

0 Karma

renjith_nair
Legend

@igorsantos07, did the sample xml dashboard work for you ? Can you please try that ? Which visualization you are using ?

Happy Splunking!
0 Karma

renjith_nair
Legend

Ok if you are using a chart, then the _field might not work . Simple CSS workaround could be an option

  <row>
       <html depends="$dummyPanelForCSS$">
         <style>
           #myChartId g.highcharts-legend-item:nth-child(3)
           {
               visibility: hidden !important;
           }
         </style>
       </html>
  </row>

and add myChartId to your chart chart id="myChartId"

Example :

<dashboard>
  <label>Dashboard With Hidden Drilldown</label>
  <row>
       <html depends="$dummyPanelForCSS$">
         <style>
           #myChart g.highcharts-legend-item:nth-child(3)
           {
               visibility: hidden !important;
           }
         </style>
       </html>
  </row>
  <row>
    <panel>
      <chart id="myChart">
        <search>
          <query>index=_*|stats count by index,sourcetype|eventstats sum(count) as _total|eval perc=round((count/_total)*100,0)."%"</query>
          <earliest>-1m@m</earliest>
          <latest>now</latest>
        </search>
        <drilldown>
          <set token="empid">$row.perc$</set>
        </drilldown>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <html>
      <h1> Emp Id from drilldown is <font color="red">$empid$</font>
        </h1>
    </html>
    </panel>
  </row>

</dashboard>
Happy Splunking!

igorsantos07
Explorer

Wow! That old trick of "hiding" variables by using an underline prefix. Where would I find that in the docs? This should be hinted somewhere, I visited a bunch of answers and docs and whatnot and didn't find info on that.

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...