Dashboards & Visualizations

How to move the timeline in a Splunk dashboard without manually entering a time in a time input?

tinhuty
Engager

I have a dashboard with a time input and a graph that is tied to that time control.

The default value of the time input is the last 5 minutes. I'd like to implement a convenient way to move the time line 5 minutes earlier based on current time selection. For example, if the current time value is last 5 minutes, then I'd like to quick way to select the time range of last 10 minutes to last 5 minutes (without manually enter value in the time input).

Looks like a button is not supported (version 6.4.4), I am thinking of a drop-down input. Select an option in drop-down will result move time line 5 minutes earlier and update the graph. Is this doable and how?

thanks.

0 Karma
1 Solution

somesoni2
Revered Legend

Try this run anywhere sample dashboard. I've include a time range picker to select the time (default to last 5min) and a dropdown to select how far you want to see the data from the current time range picker selection. If you select "Current time" it shows a line chart of data (used _internal index) for time range same as time range picker selection (earliest and latest). If you select 5 min, it will show data for earliest-5m and latest-5m, and so on.

<form>
  <label>Relative Timeline</label>
  <fieldset submitButton="false">
    <input type="time" token="timerange" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-5m</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="dropdown" token="gobackTime" searchWhenChanged="true">
      <label>Go Back Time</label>
      <choice value="0m">Current Selection</choice>
      <choice value="5m">5 Min</choice>
      <choice value="10m">10 Min</choice>
      <choice value="15m">15 Min</choice>
      <default>0m</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd [| gentimes start=-1 | addinfo | eval earliest=relative_time(info_min_time,"-$gobackTime$") | eval latest=relative_time(info_max_time, "-$gobackTime$") | table earliest latest | format "" "" "" "" "" "" ] | timechart count</query>
          <earliest>$timerange.earliest$</earliest>
          <latest>$timerange.latest$</latest>
        </search>
        <option name="charting.chart">line</option>
      </chart>
    </panel>
  </row>
</form>

View solution in original post

somesoni2
Revered Legend

Try this run anywhere sample dashboard. I've include a time range picker to select the time (default to last 5min) and a dropdown to select how far you want to see the data from the current time range picker selection. If you select "Current time" it shows a line chart of data (used _internal index) for time range same as time range picker selection (earliest and latest). If you select 5 min, it will show data for earliest-5m and latest-5m, and so on.

<form>
  <label>Relative Timeline</label>
  <fieldset submitButton="false">
    <input type="time" token="timerange" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-5m</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="dropdown" token="gobackTime" searchWhenChanged="true">
      <label>Go Back Time</label>
      <choice value="0m">Current Selection</choice>
      <choice value="5m">5 Min</choice>
      <choice value="10m">10 Min</choice>
      <choice value="15m">15 Min</choice>
      <default>0m</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd [| gentimes start=-1 | addinfo | eval earliest=relative_time(info_min_time,"-$gobackTime$") | eval latest=relative_time(info_max_time, "-$gobackTime$") | table earliest latest | format "" "" "" "" "" "" ] | timechart count</query>
          <earliest>$timerange.earliest$</earliest>
          <latest>$timerange.latest$</latest>
        </search>
        <option name="charting.chart">line</option>
      </chart>
    </panel>
  </row>
</form>

tinhuty
Engager

Tried this and worked beautifully! Thanks!

Now I think about it, there is a lightly change the question: how can we implement something that can be continuously move time line using similar way? For example, if the current time line is "-5m to now", what I want is the ability to move the time line to "-10m to -5m", then to "-15m to -10m" etc. (If there were a button available, just like click the button will move 5 minutes earlier on the current selection, click again will move another 5 minutes earlier).

0 Karma

tinhuty
Engager

Thanks! Will try this out.

0 Karma
Get Updates on the Splunk Community!

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...