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
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...