Dashboards & Visualizations

Dynamic dashboard - time range, span and others

xradim
Explorer

Is possible to add into Dashboard graph drop down menus where could be definition of time range? I am looking for similar option which is available in search itself. I would like to have time range as variable I can change in graph itself so I don't have to update searches.

Thanks

Radim

Tags (1)

BobM
Builder

If you don't want to resort to advanced xml, convert your dashboard to a form and add the input type of time. Below is a simple example.

<form>
  <label>My Dashboard as a form</label>
  <fieldset autoRun="true" >
       <input type="time" />
  </fieldset> 

  <row>
    <single>
      <searchTemplate>mysearch | stats count | rangemap field=count low=0-0 elevated=1-10 default=severe</searchTemplate>
      <title>Responses outside SLA</title>
      <option name="classField">range</option>
    </single>
  </row>

  <row>
    <chart>
      <searchName>MySavedSearch</searchName>
      <title>My Saved Search</title>
      <option name="charting.chart">line</option>
      <option name="charting.legend.placement">bottom</option>
    </chart>
  </row>

<form>

Ayn
Legend

Sure. Not sure you can achieve this with simple XML, but it can certainly be done with advanced XML by wrapping your panels within TimeRangePicker modules.

The following example takes the saved search "Requests over time" and presents the results as an area chart, where the timerange for this chart is defined by the timerange picker chosen by the user.

 <module name="TimeRangePicker" layoutPanel="panel_row2_col1" group="Requests per second by action">
  <param name="searchWhenChanged">True</param>
  <param name="selected">Last 60 minutes</param>
  <module name="HiddenSavedSearch" autoRun="True">
   <param name="useHistory">false</param>
   <param name="savedSearch">Requests over time</param>
   <module name="EnablePreview">
    <param name="enable">true</param>
    <param name="display">false</param>
    <module name="HiddenChartFormatter">
     <param name="chart">area</param>
     <param name="chart.stackMode">stacked</param>
     <param name="chart.nullValueMode">zero</param>
     <module name="FlashChart">
      <param name="height">300px</param>
      <module name="ViewRedirectorLink">
       <param name="viewTarget">flashtimeline</param>
       <param name="label">View full results</param>
      </module>
     </module>
    </module>
   </module>
  </module>
 </module>

You can also have one TimeRangePicker that drives all charts in a dashboard instead of having one TimeRangePicker per chart. All you need to do to get that behaviour is to give the TimeRangePicker its own layoutPanel that is separate from the chart panels, and then wrap them all in, as in the following example.

 <module name="TimeRangePicker" layoutPanel="panel_row1_col1">
  <param name="searchWhenChanged">True</param>
  <param name="selected">Last 60 minutes</param>
  <module name="HiddenSavedSearch" layoutPanel="panel_row2_col1" group="Requests per second by action" autoRun="True">
   <param name="useHistory">false</param>
   <param name="savedSearch">Requests over time</param>
   <module name="EnablePreview">
    <param name="enable">true</param>
    <param name="display">false</param>
    <module name="HiddenChartFormatter">
     <param name="chart">area</param>
     <param name="chart.stackMode">stacked</param>
     <param name="chart.nullValueMode">zero</param>
     <module name="FlashChart">
      <param name="height">300px</param>
      <module name="ViewRedirectorLink">
       <param name="viewTarget">flashtimeline</param>
       <param name="label">View full results</param>
      </module>
     </module>
    </module>
   </module>
  </module>

  <module name="HiddenSavedSearch" layoutPanel="panel_row2_col2" group="Bandwidth over time" autoRun="True">
   <param name="useHistory">false</param>
   <param name="savedSearch">Bandwidth over time</param>
   <module name="EnablePreview">
    <param name="enable">true</param>
    <param name="display">false</param>
    <module name="HiddenChartFormatter">
     <param name="chart">line</param>
     <param name="chart.nullValueMode">zero</param>
     <module name="FlashChart">
      <param name="height">300px</param>
      <module name="ViewRedirectorLink">
       <param name="viewTarget">flashtimeline</param>
       <param name="label">View full results</param>
      </module>
     </module>
    </module>
   </module>
  </module>
 </module>
Get Updates on the Splunk Community!

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...

Wondering How to Build Resiliency in the Cloud?

IT leaders are choosing Splunk Cloud as an ideal cloud transformation platform to drive business resilience,  ...

Updated Data Management and AWS GDI Inventory in Splunk Observability

We’re making some changes to Data Management and Infrastructure Inventory for AWS. The Data Management page, ...