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!

More Ways To Control Your Costs With Archived Metrics | Register for Tech Talk

Tuesday, May 14, 2024  |  11AM PT / 2PM ET Register to Attend Join us for this Tech Talk and learn how to ...

.conf24 | Personalize your .conf experience with Learning Paths!

Personalize your .conf24 Experience Learning paths allow you to level up your skill sets and dive deeper ...

Threat Hunting Unlocked: How to Uplevel Your Threat Hunting With the PEAK Framework ...

WATCH NOWAs AI starts tackling low level alerts, it's more critical than ever to uplevel your threat hunting ...