Dashboards & Visualizations

Why does time picker display not changing when the $token.earliest$ and $token.latest$ tokens are changed?

JohnMurphyAus
Path Finder

Hi,

I have a dashboard with a column chart to display time ranges. I have set the drilldown to update the $timePicker.earliest$ and $timePicker.latest$ tokens within the dashboard. This works perfectly and there are no issues here. 

The issue is that the display of the time picker does not change, it always just says "All time" even though the tokens are set to a one-day range. 

As I mentioned, the whole dashboard recognizes the one-day range, all I need is the Time Picker display to also show this range. I have tried setting the default time range using the $timePicker.earliest$ and $timePicker.latest$ values, as you can do with a text input, but I have had no luck.

This is the code I have tried but didn't work.

JohnMurphyAus_0-1672883934066.png

This is the code for the column chart drilldown, which does work and changes the timePicker tokens appropriately.

JohnMurphyAus_1-1672884032282.png

 

This is the default screenshot when the app is loaded

JohnMurphyAus_3-1672884287099.png

 

This is a screenshot after a column is clicked in the bar chart. Note that everything changes due to the time picker tokens being changed, but the time picker display is not updated and still says "All Time".

JohnMurphyAus_4-1672884372383.png

Additionally, when I open the events in a search after I have selected a time column, the time picker in the search is displayed correctly. This is how I would expect the time picker in my App/Dashboad to display.

JohnMurphyAus_5-1672884512239.png

 

Pleease help!

Thanks,

John

Labels (4)
0 Karma
1 Solution

acharlieh
Influencer

in your drilldown, in addition to setting the normal timePicker tokens you want to also set the form.timePicker.tokens

Here's a quick example that seems to work nicely on my cloud 9.0.2209.2 stack. obviously you'd use the earliest and latest drilldowns you were using instead of the row ones I am but this should give you the idea. (I don't remember where I learned about this trick... I think it was Clara and Niket's conf talk all about dashboards from a few years ago.

<form version="1.1">
  <label>timepicker_tokens</label>
  <fieldset submitButton="false">
    <input type="time" token="timePicker">
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <title>Drilldown</title>
        <search>
          <query>| gentimes start=-7 | eval endtime=endtime+1 | addinfo</query>
          <earliest>$timePicker.earliest$</earliest>
          <latest>$timePicker.latest$</latest>
        </search>
        <drilldown>
          <set token="timePicker.earliest">$row.starttime$</set>
          <set token="timePicker.latest">$row.endtime$</set>
          <set token="form.timePicker.earliest">$row.starttime$</set>
          <set token="form.timePicker.latest">$row.endtime$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</form>

 

View solution in original post

acharlieh
Influencer

in your drilldown, in addition to setting the normal timePicker tokens you want to also set the form.timePicker.tokens

Here's a quick example that seems to work nicely on my cloud 9.0.2209.2 stack. obviously you'd use the earliest and latest drilldowns you were using instead of the row ones I am but this should give you the idea. (I don't remember where I learned about this trick... I think it was Clara and Niket's conf talk all about dashboards from a few years ago.

<form version="1.1">
  <label>timepicker_tokens</label>
  <fieldset submitButton="false">
    <input type="time" token="timePicker">
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <title>Drilldown</title>
        <search>
          <query>| gentimes start=-7 | eval endtime=endtime+1 | addinfo</query>
          <earliest>$timePicker.earliest$</earliest>
          <latest>$timePicker.latest$</latest>
        </search>
        <drilldown>
          <set token="timePicker.earliest">$row.starttime$</set>
          <set token="timePicker.latest">$row.endtime$</set>
          <set token="form.timePicker.earliest">$row.starttime$</set>
          <set token="form.timePicker.latest">$row.endtime$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</form>

 

JohnMurphyAus
Path Finder

Wow! As simple as that! Thank you!

Just to simplify. All I had to do was change my drilldown from this:

JohnMurphyAus_0-1672894966802.png

To this:

JohnMurphyAus_1-1672895005910.png

Now when I select a date column, my time picker changes!

JohnMurphyAus_2-1672895213524.png

Thanks @acharlieh !!

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 ...