Dashboards & Visualizations

How do you unset a token by clicking in a graph?

uthornander_spl
Splunk Employee
Splunk Employee

Hi

I have 2 graphs where the first graph feeds a token that populates the second graph.

If nothing, in the first (left) graph is clicked, I have the right graph populated with all the values from the left graph. But, I can't find a way to unset the token by clicking in the white space in the left graph after having clicked a particular value.

I'm guessing some should do the trick, but I can't get anything to play ball!

<form>
  <label>License Galore</label>
  <init>
    <set token="index">*</set>
  </init>
  <description>all you ever wanted to know about license use</description>
  <fieldset autoRun="true" submitButton="false">
    <input type="time" searchWhenChanged="true" token="time">
      <label>Time picker</label>
      <default>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Index size</title>
      <chart>
        <title>Index sizes over time</title>
        <search>
          <query>index=_internal source=*license_usage.log type=Usage | eval MB = b/1024/1024 | timechart span=1d useother=0  sum(MB) by idx | rename idx as Index, sum(MB) as Megabyte | sort – Megabyte</query>
          <earliest>$time.earliest$</earliest>
          <latest>$time.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisTitleX.text">Time</option>
        <option name="charting.axisTitleY.text">MB</option>
        <option name="charting.chart">area</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.stackMode">stacked</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <set token="index">$click.name2$</set>
        </drilldown>
      </chart>
    </panel>
    <panel>
      <title>Sourcetype size</title>
      <chart id="detail" depends="$index$">
        <title>Sourcetype detail for $index$ index</title>
        <search>
          <query>index=_internal source=*license_usage.log type=Usage idx=$index$ | eval MB = b/1024/1024 | timechart span=1d useother=0  sum(MB) by st | rename st as SourceType, sum(MB) as Megabyte | sort – Megabyte</query>
          <earliest>$time.earliest$</earliest>
          <latest>$time.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.text">Time</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.text">MB</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.scale">linear</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.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">stacked</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</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="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>
UT
Tags (3)
0 Karma
1 Solution

laurie_gellatly
Communicator

Try this:

<form>
  <init>
    <set token="indx">*</set>
  </init>
  <label>License Galore</label>
  <description>all you ever wanted to know about license use</description>
  <fieldset autoRun="true" submitButton="false">
     <input type="time" searchWhenChanged="true" token="time">
    <label>Time picker</label>
    <default>
      <earliest>-7d@h</earliest>
      <latest>now</latest>
    </default>
  </input>
 <input type="radio" token="resetTokens" searchWhenChanged="true">
     <label></label>
     <choice value="reset">Reset Inputs</choice>
     <choice value="retain">Retain</choice>
     <default>retain</default>
     <change>
       <condition value="reset">
         <set token="indx">*</set>
         <set token="resetTokens">retain</set>
       </condition>
     </change>
 </input>
  </fieldset>
  <row>
  <panel>
    <title>Index size</title>
    <chart>
      <title>Index sizes over time</title>
      <search>
        <query>index=_internal source=*license_usage.log type=Usage | eval MB = b/1024/1024 | timechart span=1d useother=0  sum(MB) by idx | rename idx as Index, sum(MB) as Megabyte | sort – Megabyte</query>
        <earliest>$time.earliest$</earliest>
        <latest>$time.latest$</latest>
        <sampleRatio>1</sampleRatio>
      </search>
      <option name="charting.axisTitleX.text">Time</option>
      <option name="charting.axisTitleY.text">MB</option>
      <option name="charting.chart">area</option>
      <option name="charting.chart.showDataLabels">none</option>
      <option name="charting.chart.stackMode">stacked</option>
      <option name="charting.drilldown">all</option>
      <option name="charting.layout.splitSeries">0</option>
      <option name="refresh.display">progressbar</option>
      <drilldown>
        <set token="indx">$click.name2$</set>
        <set token="form.resetTokens">retain</set>
      </drilldown>
    </chart>
  </panel>
  <panel>
    <title>Sourcetype size</title>
    <chart id="detail" depends="$indx$">
      <title>Sourcetype detail for $indx$ index</title>
      <search>
        <query>index=_internal source=*license_usage.log type=Usage idx=$indx$ | eval MB = b/1024/1024 | timechart span=1d useother=0  sum(MB) by st | rename st as SourceType, sum(MB) as Megabyte | sort – Megabyte</query>
        <earliest>$time.earliest$</earliest>
        <latest>$time.latest$</latest>
        <sampleRatio>1</sampleRatio>
      </search>
      <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
      <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
      <option name="charting.axisTitleX.text">Time</option>
      <option name="charting.axisTitleX.visibility">visible</option>
      <option name="charting.axisTitleY.text">MB</option>
      <option name="charting.axisTitleY.visibility">visible</option>
      <option name="charting.axisTitleY2.visibility">visible</option>
      <option name="charting.axisX.scale">linear</option>
      <option name="charting.axisY.scale">linear</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.nullValueMode">gaps</option>
      <option name="charting.chart.showDataLabels">none</option>
      <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
      <option name="charting.chart.stackMode">stacked</option>
      <option name="charting.chart.style">shiny</option>
      <option name="charting.drilldown">none</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="refresh.display">progressbar</option>
    </chart>
  </panel>
  </row>
</form>

View solution in original post

0 Karma

laurie_gellatly
Communicator

Try this:

<form>
  <init>
    <set token="indx">*</set>
  </init>
  <label>License Galore</label>
  <description>all you ever wanted to know about license use</description>
  <fieldset autoRun="true" submitButton="false">
     <input type="time" searchWhenChanged="true" token="time">
    <label>Time picker</label>
    <default>
      <earliest>-7d@h</earliest>
      <latest>now</latest>
    </default>
  </input>
 <input type="radio" token="resetTokens" searchWhenChanged="true">
     <label></label>
     <choice value="reset">Reset Inputs</choice>
     <choice value="retain">Retain</choice>
     <default>retain</default>
     <change>
       <condition value="reset">
         <set token="indx">*</set>
         <set token="resetTokens">retain</set>
       </condition>
     </change>
 </input>
  </fieldset>
  <row>
  <panel>
    <title>Index size</title>
    <chart>
      <title>Index sizes over time</title>
      <search>
        <query>index=_internal source=*license_usage.log type=Usage | eval MB = b/1024/1024 | timechart span=1d useother=0  sum(MB) by idx | rename idx as Index, sum(MB) as Megabyte | sort – Megabyte</query>
        <earliest>$time.earliest$</earliest>
        <latest>$time.latest$</latest>
        <sampleRatio>1</sampleRatio>
      </search>
      <option name="charting.axisTitleX.text">Time</option>
      <option name="charting.axisTitleY.text">MB</option>
      <option name="charting.chart">area</option>
      <option name="charting.chart.showDataLabels">none</option>
      <option name="charting.chart.stackMode">stacked</option>
      <option name="charting.drilldown">all</option>
      <option name="charting.layout.splitSeries">0</option>
      <option name="refresh.display">progressbar</option>
      <drilldown>
        <set token="indx">$click.name2$</set>
        <set token="form.resetTokens">retain</set>
      </drilldown>
    </chart>
  </panel>
  <panel>
    <title>Sourcetype size</title>
    <chart id="detail" depends="$indx$">
      <title>Sourcetype detail for $indx$ index</title>
      <search>
        <query>index=_internal source=*license_usage.log type=Usage idx=$indx$ | eval MB = b/1024/1024 | timechart span=1d useother=0  sum(MB) by st | rename st as SourceType, sum(MB) as Megabyte | sort – Megabyte</query>
        <earliest>$time.earliest$</earliest>
        <latest>$time.latest$</latest>
        <sampleRatio>1</sampleRatio>
      </search>
      <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
      <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
      <option name="charting.axisTitleX.text">Time</option>
      <option name="charting.axisTitleX.visibility">visible</option>
      <option name="charting.axisTitleY.text">MB</option>
      <option name="charting.axisTitleY.visibility">visible</option>
      <option name="charting.axisTitleY2.visibility">visible</option>
      <option name="charting.axisX.scale">linear</option>
      <option name="charting.axisY.scale">linear</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.nullValueMode">gaps</option>
      <option name="charting.chart.showDataLabels">none</option>
      <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
      <option name="charting.chart.stackMode">stacked</option>
      <option name="charting.chart.style">shiny</option>
      <option name="charting.drilldown">none</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="refresh.display">progressbar</option>
    </chart>
  </panel>
  </row>
</form>
0 Karma

laurie_gellatly
Communicator

This is the complete source when you 'edit/source'.

...Laurie:{)

0 Karma

uthornander_spl
Splunk Employee
Splunk Employee

Ok - that is as you say not exactly what I was trying to do but anything that makes it roll is better than something that doesn't move 🙂
Thanks!

UT
0 Karma

laurie_gellatly
Communicator

Maybe not quite what you expected but it does work:

<set token="indx">*</set>

License Galore
all you ever wanted to know about license use

<input type="time" searchWhenChanged="true" token="time">
  <label>Time picker</label>
  <default>
    <earliest>-7d@h</earliest>
    <latest>now</latest>
  </default>
</input>
 <input type="radio" token="resetTokens" searchWhenChanged="true">
   <label></label>
   <choice value="reset">Reset Inputs</choice>
   <choice value="retain">Retain</choice>
   <default>retain</default>
   <change>
     <condition value="reset">
       <set token="indx">*</set>
       <set token="resetTokens">retain</set>
     </condition>
   </change>
 </input>


<panel>
  <title>Index size</title>
  <chart>
    <title>Index sizes over time</title>
    <search>
      <query>index=_internal source=*license_usage.log type=Usage | eval MB = b/1024/1024 | timechart span=1d useother=0  sum(MB) by idx | rename idx as Index, sum(MB) as Megabyte | sort – Megabyte</query>
      <earliest>$time.earliest$</earliest>
      <latest>$time.latest$</latest>
      <sampleRatio>1</sampleRatio>
    </search>
    <option name="charting.axisTitleX.text">Time</option>
    <option name="charting.axisTitleY.text">MB</option>
    <option name="charting.chart">area</option>
    <option name="charting.chart.showDataLabels">none</option>
    <option name="charting.chart.stackMode">stacked</option>
    <option name="charting.drilldown">all</option>
    <option name="charting.layout.splitSeries">0</option>
    <option name="refresh.display">progressbar</option>
    <drilldown>
      <set token="indx">$click.name2$</set>
      <set token="form.resetTokens">retain</set>
    </drilldown>
  </chart>
</panel>
<panel>
  <title>Sourcetype size</title>
  <chart id="detail" depends="$indx$">
    <title>Sourcetype detail for $indx$ index</title>
    <search>
      <query>index=_internal source=*license_usage.log type=Usage idx=$indx$ | eval MB = b/1024/1024 | timechart span=1d useother=0  sum(MB) by st | rename st as SourceType, sum(MB) as Megabyte | sort – Megabyte</query>
      <earliest>$time.earliest$</earliest>
      <latest>$time.latest$</latest>
      <sampleRatio>1</sampleRatio>
    </search>
    <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
    <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
    <option name="charting.axisTitleX.text">Time</option>
    <option name="charting.axisTitleX.visibility">visible</option>
    <option name="charting.axisTitleY.text">MB</option>
    <option name="charting.axisTitleY.visibility">visible</option>
    <option name="charting.axisTitleY2.visibility">visible</option>
    <option name="charting.axisX.scale">linear</option>
    <option name="charting.axisY.scale">linear</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.nullValueMode">gaps</option>
    <option name="charting.chart.showDataLabels">none</option>
    <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
    <option name="charting.chart.stackMode">stacked</option>
    <option name="charting.chart.style">shiny</option>
    <option name="charting.drilldown">none</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="refresh.display">progressbar</option>
  </chart>
</panel>

...Laurie:{)

0 Karma

uthornander_spl
Splunk Employee
Splunk Employee

OK - so slightly different approach - but I'm getting a problem with line 8 (Unexpected element after document end) and my XML'ish isn't good enough to crack that. What am I not seeing?

UT
0 Karma

laurie_gellatly
Communicator

I see that my xml post was broken (sorry).
Can you share your xml with the offending lines. Make sure to use the 101010 (reminder to self as well).

0 Karma

uthornander_spl
Splunk Employee
Splunk Employee

Sure - Here we go:

<input type="time" searchWhenChanged="true" token="time">
   <label>Time picker</label>
   <default>
     <earliest>-7d@h</earliest>
     <latest>now</latest>
   </default>
 </input>
<input type="radio" token="resetTokens" searchWhenChanged="true">
    <label></label>
    <choice value="reset">Reset Inputs</choice>
    <choice value="retain">Retain</choice>
    <default>retain</default>
    <change>
      <condition value="reset">
        <set token="indx">*</set>
        <set token="resetTokens">retain</set>
      </condition>
    </change>
</input>
 <panel>
   <title>Index size</title>
   <chart>
     <title>Index sizes over time</title>
     <search>
       <query>index=_internal source=*license_usage.log type=Usage | eval MB = b/1024/1024 | timechart span=1d useother=0  sum(MB) by idx | rename idx as Index, sum(MB) as Megabyte | sort – Megabyte</query>
       <earliest>$time.earliest$</earliest>
       <latest>$time.latest$</latest>
       <sampleRatio>1</sampleRatio>
     </search>
     <option name="charting.axisTitleX.text">Time</option>
     <option name="charting.axisTitleY.text">MB</option>
     <option name="charting.chart">area</option>
     <option name="charting.chart.showDataLabels">none</option>
     <option name="charting.chart.stackMode">stacked</option>
     <option name="charting.drilldown">all</option>
     <option name="charting.layout.splitSeries">0</option>
     <option name="refresh.display">progressbar</option>
     <drilldown>
       <set token="indx">$click.name2$</set>
       <set token="form.resetTokens">retain</set>
     </drilldown>
   </chart>
 </panel>
 <panel>
   <title>Sourcetype size</title>
   <chart id="detail" depends="$indx$">
     <title>Sourcetype detail for $indx$ index</title>
     <search>
       <query>index=_internal source=*license_usage.log type=Usage idx=$indx$ | eval MB = b/1024/1024 | timechart span=1d useother=0  sum(MB) by st | rename st as SourceType, sum(MB) as Megabyte | sort – Megabyte</query>
       <earliest>$time.earliest$</earliest>
       <latest>$time.latest$</latest>
       <sampleRatio>1</sampleRatio>
     </search>
     <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
     <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
     <option name="charting.axisTitleX.text">Time</option>
     <option name="charting.axisTitleX.visibility">visible</option>
     <option name="charting.axisTitleY.text">MB</option>
     <option name="charting.axisTitleY.visibility">visible</option>
     <option name="charting.axisTitleY2.visibility">visible</option>
     <option name="charting.axisX.scale">linear</option>
     <option name="charting.axisY.scale">linear</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.nullValueMode">gaps</option>
     <option name="charting.chart.showDataLabels">none</option>
     <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
     <option name="charting.chart.stackMode">stacked</option>
     <option name="charting.chart.style">shiny</option>
     <option name="charting.drilldown">none</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="refresh.display">progressbar</option>
   </chart>
 </panel>
UT
0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you leveraging automation to its fullest potential in your threat detection strategy?Our upcoming Security ...

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...