Dashboards & Visualizations

How can we set the values of Time ranger picker according to the value selected from a dropdown?

Arminder_Bhalla
New Member

Hi everyone,

I have a below requirement :

1) A dropdown is there on a dashboard displaying Offer IDs. Each Offer ID has Offer Name, Start Date and End Date. A lookup file is being used to populate the dropdown.

2) When we select an Offer ID from the dropdown, its corresponding Start date and End Date should populate in the Time Range picker as earliest and latest respectively.

3) Then the queries in panels should get executed based on Time Range values.

Kindly help xxx

0 Karma
1 Solution

vnravikumar
Champion

Hi @Arminder_Bhalla

Try this and let me know

<form>
  <label>dropdowntime</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="offerid" searchWhenChanged="true">
      <label>Offer ID</label>
      <fieldForLabel>Offer ID</fieldForLabel>
      <fieldForValue>Offer ID</fieldForValue>
      <search>
        <query>| inputlookup offer 

| table "Offer ID"</query>
      </search>
      <selectFirstChoice>true</selectFirstChoice>
    </input>
    <input type="dropdown" token="field1" depends="$hide$">
      <label>field1</label>
      <fieldForLabel>Offer ID</fieldForLabel>
      <fieldForValue>Offer ID</fieldForValue>
      <search>
        <query>| inputlookup offer |search "Offer ID"=$offerid$
| rename "Start Date" as start_epoch,"End Date" as end_epoch 
| eval start_epoch = strptime(start_epoch,"%d-%m-%Y") 
| eval end_epoch = relative_time(strptime(end_epoch,"%d-%m-%Y"),"+1d") 
| table "Offer ID","Offer Name",start_epoch,end_epoch</query>
        <done>
          <condition>
            <set token="form.timepicker.earliest">$result.start_epoch$</set>
            <set token="form.timepicker.latest">$result.end_epoch$</set>
          </condition>
        </done>
      </search>
    </input>
    <input type="time" token="timepicker">
      <label>Date</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>index="_internal" |stats count by host</query>
          <earliest>$timepicker.earliest$</earliest>
          <latest>$timepicker.latest$</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

lookup:

Offer ID,Offer Name, Start Date,End Date
1,offer1,11-03-2019,12-03-2019
2,offer2,10-03-2019,13-03-2019
3,offer3,01-03-2019,09-03-2019

View solution in original post

vnravikumar
Champion

Hi @Arminder_Bhalla

Try this and let me know

<form>
  <label>dropdowntime</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="offerid" searchWhenChanged="true">
      <label>Offer ID</label>
      <fieldForLabel>Offer ID</fieldForLabel>
      <fieldForValue>Offer ID</fieldForValue>
      <search>
        <query>| inputlookup offer 

| table "Offer ID"</query>
      </search>
      <selectFirstChoice>true</selectFirstChoice>
    </input>
    <input type="dropdown" token="field1" depends="$hide$">
      <label>field1</label>
      <fieldForLabel>Offer ID</fieldForLabel>
      <fieldForValue>Offer ID</fieldForValue>
      <search>
        <query>| inputlookup offer |search "Offer ID"=$offerid$
| rename "Start Date" as start_epoch,"End Date" as end_epoch 
| eval start_epoch = strptime(start_epoch,"%d-%m-%Y") 
| eval end_epoch = relative_time(strptime(end_epoch,"%d-%m-%Y"),"+1d") 
| table "Offer ID","Offer Name",start_epoch,end_epoch</query>
        <done>
          <condition>
            <set token="form.timepicker.earliest">$result.start_epoch$</set>
            <set token="form.timepicker.latest">$result.end_epoch$</set>
          </condition>
        </done>
      </search>
    </input>
    <input type="time" token="timepicker">
      <label>Date</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>index="_internal" |stats count by host</query>
          <earliest>$timepicker.earliest$</earliest>
          <latest>$timepicker.latest$</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

lookup:

Offer ID,Offer Name, Start Date,End Date
1,offer1,11-03-2019,12-03-2019
2,offer2,10-03-2019,13-03-2019
3,offer3,01-03-2019,09-03-2019

Arminder_Bhalla
New Member

Thank you so much. It worked !!!

0 Karma
Get Updates on the Splunk Community!

CX Day is Coming!

Customer Experience (CX) Day is on October 7th!! We're so excited to bring back another day full of wonderful ...

Strengthen Your Future: A Look Back at Splunk 10 Innovations and .conf25 Highlights!

The Big One: Splunk 10 is Here!  The moment many of you have been waiting for has arrived! We are thrilled to ...

Now Offering the AI Assistant Usage Dashboard in Cloud Monitoring Console

Today, we’re excited to announce the release of a brand new AI assistant usage dashboard in Cloud Monitoring ...