All Apps and Add-ons

Configuring drilldown in Sunburst Viz & Number Display Viz?

manderson7
Contributor

Loving this viz and the Number Display viz. However, I'm having a problem getting drilldowns to work.

If I set the drilldown to Link to Search, on clicking a value, it runs the basic search and selects the value clicked on. I haven't been able to create a working token to send to a search on the same dashboard.

There's a setting in General / Click action : set tokens to $sunburst_viz_{field}$ and I've assigned that to a form.field_name, but on clicking the field value in the Sunburst, the search will search on the literal variable set in the token.

How is the drilldown supposed to work with Sunburst and Number Display?

Thank you!

0 Karma
1 Solution

chrisyounger
SplunkTrust
SplunkTrust

Hi @manderson7

OK So with Number Display viz, You can pass in a field called "drilldown" that you can set to whatever you want. Then in Splunk UI > Drilldown settings, just leave this blank. On another panel or in another search you can just use $row.drilldown$ or you can also use $row.title$ (if that field is in your original data).

Here is a working example:

<form theme="dark">
  <label>Number display viz setting token</label>
  <row>
    <panel>
      <viz type="number_display_viz.number_display_viz">
        <search>
          <query>
| makeresults count=10
| streamstats count as id
| eval title = "Item " + id, value = "50%", drilldown = "your unique key if you want " + id 
| table title subtitle value drilldown</query>
        </search>
        <option name="drilldown">none</option>
        <option name="number_display_viz.number_display_viz.bordercolor">#FFFFFF</option>
        <option name="number_display_viz.number_display_viz.bordersize">2</option>
        <option name="number_display_viz.number_display_viz.colorprimary">#000000</option>
        <option name="number_display_viz.number_display_viz.colorprimarymode">auto</option>
        <option name="number_display_viz.number_display_viz.colorsecondary">#000000</option>
        <option name="number_display_viz.number_display_viz.colorsecondarymode">auto</option>
        <option name="number_display_viz.number_display_viz.max">100</option>
        <option name="number_display_viz.number_display_viz.min">0</option>
        <option name="number_display_viz.number_display_viz.nodatacolor">#0178c7</option>
        <option name="number_display_viz.number_display_viz.padding">8</option>
        <option name="number_display_viz.number_display_viz.pulserate">0</option>
        <option name="number_display_viz.number_display_viz.shadowcolor">#F2F4F5</option>
        <option name="number_display_viz.number_display_viz.shapebordercolor">#000000</option>
        <option name="number_display_viz.number_display_viz.shapebordercolormode">darker1</option>
        <option name="number_display_viz.number_display_viz.shapebordersize">1</option>
        <option name="number_display_viz.number_display_viz.shapedropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.shapeshadow">no</option>
        <option name="number_display_viz.number_display_viz.shapetexture">texture3</option>
        <option name="number_display_viz.number_display_viz.size">250</option>
        <option name="number_display_viz.number_display_viz.sparkHeight">30</option>
        <option name="number_display_viz.number_display_viz.sparkWidth">95</option>
        <option name="number_display_viz.number_display_viz.sparkalign">3</option>
        <option name="number_display_viz.number_display_viz.sparkalignv">62</option>
        <option name="number_display_viz.number_display_viz.sparkcolorfill">#009DD9</option>
        <option name="number_display_viz.number_display_viz.sparkcolorline">#0178c7</option>
        <option name="number_display_viz.number_display_viz.sparkcolormodefill">darker1</option>
        <option name="number_display_viz.number_display_viz.sparkcolormodeline">darker2</option>
        <option name="number_display_viz.number_display_viz.sparkmax">100</option>
        <option name="number_display_viz.number_display_viz.sparkmin">0</option>
        <option name="number_display_viz.number_display_viz.sparknulls">gaps</option>
        <option name="number_display_viz.number_display_viz.sparkorder">fg</option>
        <option name="number_display_viz.number_display_viz.sparkstyle">area</option>
        <option name="number_display_viz.number_display_viz.spinnerspeedmax">20</option>
        <option name="number_display_viz.number_display_viz.spinnerspeedmin">1</option>
        <option name="number_display_viz.number_display_viz.style">a3</option>
        <option name="number_display_viz.number_display_viz.subtitlealign">center</option>
        <option name="number_display_viz.number_display_viz.subtitlealignv">45</option>
        <option name="number_display_viz.number_display_viz.subtitlecolor">#C6C6C6</option>
        <option name="number_display_viz.number_display_viz.subtitlecolormode">static</option>
        <option name="number_display_viz.number_display_viz.subtitledrop">no</option>
        <option name="number_display_viz.number_display_viz.subtitledropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.subtitlefont">number_display_viz-thin</option>
        <option name="number_display_viz.number_display_viz.subtitlesize">50</option>
        <option name="number_display_viz.number_display_viz.textalign">center</option>
        <option name="number_display_viz.number_display_viz.textalignv">70</option>
        <option name="number_display_viz.number_display_viz.textcolor">#000000</option>
        <option name="number_display_viz.number_display_viz.textdrop">yes</option>
        <option name="number_display_viz.number_display_viz.textdropcolor">#919191</option>
        <option name="number_display_viz.number_display_viz.textduration">300</option>
        <option name="number_display_viz.number_display_viz.textmode">static</option>
        <option name="number_display_viz.number_display_viz.textprecision">1</option>
        <option name="number_display_viz.number_display_viz.textprocessing">abr1</option>
        <option name="number_display_viz.number_display_viz.textsize">100</option>
        <option name="number_display_viz.number_display_viz.textunitposition">after</option>
        <option name="number_display_viz.number_display_viz.textunitsize">50</option>
        <option name="number_display_viz.number_display_viz.thickness">50</option>
        <option name="number_display_viz.number_display_viz.thresholdcol1">#1a9035</option>
        <option name="number_display_viz.number_display_viz.thresholdcol2">#d16f18</option>
        <option name="number_display_viz.number_display_viz.thresholdcol3">#b22b32</option>
        <option name="number_display_viz.number_display_viz.thresholdcol4">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdcol5">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdcol6">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdsize">20</option>
        <option name="number_display_viz.number_display_viz.thresholdval2">70</option>
        <option name="number_display_viz.number_display_viz.thresholdval3">90</option>
        <option name="number_display_viz.number_display_viz.titlealign">center</option>
        <option name="number_display_viz.number_display_viz.titlealignv">25</option>
        <option name="number_display_viz.number_display_viz.titlecolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.titlecolormode">static</option>
        <option name="number_display_viz.number_display_viz.titledrop">no</option>
        <option name="number_display_viz.number_display_viz.titledropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.titlesize">80</option>
        <option name="refresh.display">progressbar</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel>
      <title>you clicked item: $row.drilldown$  ($$row.title$$ token is now = $row.title$)</title>
    </panel>
  </row>
</form>

View solution in original post

chrisyounger
SplunkTrust
SplunkTrust

Hi @manderson7

OK So with Number Display viz, You can pass in a field called "drilldown" that you can set to whatever you want. Then in Splunk UI > Drilldown settings, just leave this blank. On another panel or in another search you can just use $row.drilldown$ or you can also use $row.title$ (if that field is in your original data).

Here is a working example:

<form theme="dark">
  <label>Number display viz setting token</label>
  <row>
    <panel>
      <viz type="number_display_viz.number_display_viz">
        <search>
          <query>
| makeresults count=10
| streamstats count as id
| eval title = "Item " + id, value = "50%", drilldown = "your unique key if you want " + id 
| table title subtitle value drilldown</query>
        </search>
        <option name="drilldown">none</option>
        <option name="number_display_viz.number_display_viz.bordercolor">#FFFFFF</option>
        <option name="number_display_viz.number_display_viz.bordersize">2</option>
        <option name="number_display_viz.number_display_viz.colorprimary">#000000</option>
        <option name="number_display_viz.number_display_viz.colorprimarymode">auto</option>
        <option name="number_display_viz.number_display_viz.colorsecondary">#000000</option>
        <option name="number_display_viz.number_display_viz.colorsecondarymode">auto</option>
        <option name="number_display_viz.number_display_viz.max">100</option>
        <option name="number_display_viz.number_display_viz.min">0</option>
        <option name="number_display_viz.number_display_viz.nodatacolor">#0178c7</option>
        <option name="number_display_viz.number_display_viz.padding">8</option>
        <option name="number_display_viz.number_display_viz.pulserate">0</option>
        <option name="number_display_viz.number_display_viz.shadowcolor">#F2F4F5</option>
        <option name="number_display_viz.number_display_viz.shapebordercolor">#000000</option>
        <option name="number_display_viz.number_display_viz.shapebordercolormode">darker1</option>
        <option name="number_display_viz.number_display_viz.shapebordersize">1</option>
        <option name="number_display_viz.number_display_viz.shapedropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.shapeshadow">no</option>
        <option name="number_display_viz.number_display_viz.shapetexture">texture3</option>
        <option name="number_display_viz.number_display_viz.size">250</option>
        <option name="number_display_viz.number_display_viz.sparkHeight">30</option>
        <option name="number_display_viz.number_display_viz.sparkWidth">95</option>
        <option name="number_display_viz.number_display_viz.sparkalign">3</option>
        <option name="number_display_viz.number_display_viz.sparkalignv">62</option>
        <option name="number_display_viz.number_display_viz.sparkcolorfill">#009DD9</option>
        <option name="number_display_viz.number_display_viz.sparkcolorline">#0178c7</option>
        <option name="number_display_viz.number_display_viz.sparkcolormodefill">darker1</option>
        <option name="number_display_viz.number_display_viz.sparkcolormodeline">darker2</option>
        <option name="number_display_viz.number_display_viz.sparkmax">100</option>
        <option name="number_display_viz.number_display_viz.sparkmin">0</option>
        <option name="number_display_viz.number_display_viz.sparknulls">gaps</option>
        <option name="number_display_viz.number_display_viz.sparkorder">fg</option>
        <option name="number_display_viz.number_display_viz.sparkstyle">area</option>
        <option name="number_display_viz.number_display_viz.spinnerspeedmax">20</option>
        <option name="number_display_viz.number_display_viz.spinnerspeedmin">1</option>
        <option name="number_display_viz.number_display_viz.style">a3</option>
        <option name="number_display_viz.number_display_viz.subtitlealign">center</option>
        <option name="number_display_viz.number_display_viz.subtitlealignv">45</option>
        <option name="number_display_viz.number_display_viz.subtitlecolor">#C6C6C6</option>
        <option name="number_display_viz.number_display_viz.subtitlecolormode">static</option>
        <option name="number_display_viz.number_display_viz.subtitledrop">no</option>
        <option name="number_display_viz.number_display_viz.subtitledropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.subtitlefont">number_display_viz-thin</option>
        <option name="number_display_viz.number_display_viz.subtitlesize">50</option>
        <option name="number_display_viz.number_display_viz.textalign">center</option>
        <option name="number_display_viz.number_display_viz.textalignv">70</option>
        <option name="number_display_viz.number_display_viz.textcolor">#000000</option>
        <option name="number_display_viz.number_display_viz.textdrop">yes</option>
        <option name="number_display_viz.number_display_viz.textdropcolor">#919191</option>
        <option name="number_display_viz.number_display_viz.textduration">300</option>
        <option name="number_display_viz.number_display_viz.textmode">static</option>
        <option name="number_display_viz.number_display_viz.textprecision">1</option>
        <option name="number_display_viz.number_display_viz.textprocessing">abr1</option>
        <option name="number_display_viz.number_display_viz.textsize">100</option>
        <option name="number_display_viz.number_display_viz.textunitposition">after</option>
        <option name="number_display_viz.number_display_viz.textunitsize">50</option>
        <option name="number_display_viz.number_display_viz.thickness">50</option>
        <option name="number_display_viz.number_display_viz.thresholdcol1">#1a9035</option>
        <option name="number_display_viz.number_display_viz.thresholdcol2">#d16f18</option>
        <option name="number_display_viz.number_display_viz.thresholdcol3">#b22b32</option>
        <option name="number_display_viz.number_display_viz.thresholdcol4">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdcol5">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdcol6">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdsize">20</option>
        <option name="number_display_viz.number_display_viz.thresholdval2">70</option>
        <option name="number_display_viz.number_display_viz.thresholdval3">90</option>
        <option name="number_display_viz.number_display_viz.titlealign">center</option>
        <option name="number_display_viz.number_display_viz.titlealignv">25</option>
        <option name="number_display_viz.number_display_viz.titlecolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.titlecolormode">static</option>
        <option name="number_display_viz.number_display_viz.titledrop">no</option>
        <option name="number_display_viz.number_display_viz.titledropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.titlesize">80</option>
        <option name="refresh.display">progressbar</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel>
      <title>you clicked item: $row.drilldown$  ($$row.title$$ token is now = $row.title$)</title>
    </panel>
  </row>
</form>

eliasm
New Member
Hi -- I tried your working example and it did not work by simply copping an pasting into a new dash. Cicking on the boxes does not populate the panel below
0 Karma

chrisyounger
SplunkTrust
SplunkTrust

And here is a run anywhere example of Sunburst viz:

<dashboard theme="dark">
  <label>Sunburst viz setting token</label>
  <row>
    <panel>
      <viz type="sunburst_viz.sunburst_viz">
        <search>
          <query>
| makeresults count=10
| streamstats count as id
| eval title = "Item " + id
| table title id</query>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="sunburst_viz.sunburst_viz.breadcrumbs">hide</option>
        <option name="sunburst_viz.sunburst_viz.color">schemeCategory10</option>
        <option name="sunburst_viz.sunburst_viz.colormode">root</option>
        <option name="sunburst_viz.sunburst_viz.labelcolor">#000000</option>
        <option name="sunburst_viz.sunburst_viz.labels">show</option>
        <option name="sunburst_viz.sunburst_viz.labelsize">100</option>
        <option name="sunburst_viz.sunburst_viz.labelwidth">100</option>
        <option name="sunburst_viz.sunburst_viz.mode">token</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel>
      <title>you clicked item: $sunburst_viz_title$ </title>
    </panel>
  </row>
</dashboard>
0 Karma

manderson7
Contributor

Thanks very much Chris. Accepted!

0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...

New in Observability Cloud - Explicit Bucket Histograms

Splunk introduces native support for histograms as a metric data type within Observability Cloud with Explicit ...