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!

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...