Setting a time range

You can configure the set time range interaction for a visualization. When a dashboard viewer zooms in on specific data in the visualization, this sets the specified time range token's value to the time range of the zoomed-in data. If other visualizations in the dashboard use this time range token, those visualizations now show data for the same time range.

The Set time range interaction is only available for area, bar, column, and line charts.

Configuring the set time range interaction

  1. Configure a chart to set a time range token:

    1. Click the desired chart.

    2. On the Configuration panel, under Interactions, select Add interaction.

    3. From the On click dropdown, select Set time range.

    4. From the Time range token dropdown, select the desired time range token for this chart to set the value of.

    5. Click Apply.

  2. Configure a chart's time range to be set by the time range token from step 1:

    1. Click the desired chart.

    2. On the Configuration panel, under Data sources, edit the data source.

    3. From the Time range dropdown, select Input.

    4. From the next dropdown, select the time range set by the token from step 1.

    5. Click Apply and close. When the dashboard viewer zooms in on data in the chart from step 1, this sets the time range token. The chart from step 2 updates to show data for the updated time range.

Dashboard example with setting a time range

The following example shows a dashboard with 4 inputs: the default global time range picker, a custom time range picker, a dropdown, and a multiselect, and 2 line charts: Activity by Status for Global Time Range and Activity by Status for Custom Time Range.

A dashboard with 4 inputs and 2 line charts.

There is a Set time range interaction configured for the Activity by Status for Global Time Range chart, which sets the Custom Time Range token. When the dashboard viewer zooms in on a specific time range in the Activity by Status for Global Time Range chart, the Activity by Status for Custom Time Range chart, which shows data based on the Custom Time Range token, shows data for the updated time range.

Copy and paste the dashboard definition into your own dashboard to see the example.
{
    "title": "Time range picker examples",
    "description": "",
    "inputs": {
        "input_08lrAW9u": {
            "context": {
                "formattedConfig": {
                    "number": {
                        "prefix": ""
                    }
                },
                "formattedStatics": ">statics | formatByType(formattedConfig)",
                "label": ">primary | seriesByName(\"method\") | renameSeries(\"label\") | formatByType(formattedConfig)",
                "statics": [
                    [
                        "All"
                    ],
                    [
                        "*"
                    ]
                ],
                "value": ">primary | seriesByName(\"method\") | renameSeries(\"value\") | formatByType(formattedConfig)"
            },
            "dataSources": {
                "primary": "ds_ljNWYr7J"
            },
            "options": {
                "defaultValue": "*",
                "items": ">frame(label, value) | prepend(formattedStatics) | objects()",
                "token": "method"
            },
            "title": "Select Method",
            "type": "input.dropdown"
        },
        "input_EhSfAyRc": {
            "options": {},
            "type": "input.button"
        },
        "input_RhQr1bEx": {
            "context": {
                "formattedConfig": {
                    "number": {
                        "prefix": ""
                    }
                },
                "formattedStatics": ">statics | formatByType(formattedConfig)",
                "label": ">primary | seriesByName(\"status\") | renameSeries(\"label\") | formatByType(formattedConfig)",
                "statics": [
                    [
                        "All"
                    ],
                    [
                        "*"
                    ]
                ],
                "value": ">primary | seriesByName(\"status\") | renameSeries(\"value\") | formatByType(formattedConfig)"
            },
            "dataSources": {
                "primary": "ds_neN4LNL4"
            },
            "options": {
                "defaultValue": "*",
                "items": ">frame(label, value) | prepend(formattedStatics) | objects()",
                "token": "status"
            },
            "title": "Select Status Code",
            "type": "input.multiselect"
        },
        "input_Y8d7RBfE": {
            "options": {
                "defaultValue": "-30d@d,now",
                "token": "custom_time_range"
            },
            "title": "Custom Time Range",
            "type": "input.timerange"
        },
        "input_global_trp": {
            "options": {
                "defaultValue": "-24h@h,now",
                "token": "global_time"
            },
            "title": "Global Time Range",
            "type": "input.timerange"
        }
    },
    "defaults": {
        "dataSources": {
            "ds.search": {
                "options": {
                    "queryParameters": {
                        "earliest": "$global_time.earliest$",
                        "latest": "$global_time.latest$"
                    }
                }
            }
        }
    },
    "visualizations": {
        "viz_1BAm6ljX": {
            "dataSources": {
                "primary": "ds_6v2nFTBZ"
            },
            "description": "Select Method and Status Codes",
            "showLastUpdated": false,
            "showProgressBar": false,
            "title": "Activity by Status for Custom Time Range",
            "type": "splunk.line"
        },
        "viz_uhDaw5WM": {
            "containerOptions": {},
            "context": {},
            "dataSources": {
                "primary": "ds_aUefmET4"
            },
            "description": "Select Method and Status Codes",
            "eventHandlers": [
                {
                    "options": {
                        "events": [
                            "range.select"
                        ],
                        "token": "custom_time_range"
                    },
                    "type": "drilldown.setTimeRange"
                }
            ],
            "options": {},
            "showLastUpdated": false,
            "showProgressBar": false,
            "title": "Activity by Status for Global Time Range",
            "type": "splunk.line"
        }
    },
    "dataSources": {
        "ds_6v2nFTBZ": {
            "name": "Status codes per method custom time range",
            "options": {
                "query": "index=_internal method=\"$method$\" \n| search status IN ($status$)\n| timechart count by status",
                "queryParameters": {
                    "earliest": "$custom_time_range.earliest$",
                    "latest": "$custom_time_range.latest$"
                }
            },
            "type": "ds.search"
        },
        "ds_aUefmET4": {
            "name": "Status codes per method global time range",
            "options": {
                "query": "index=_internal method=\"$method$\" \n| search status IN ($status$)\n| timechart count by status"
            },
            "type": "ds.search"
        },
        "ds_ljNWYr7J": {
            "name": "Method",
            "options": {
                "query": "index=_internal \n|  stats count by method"
            },
            "type": "ds.search"
        },
        "ds_neN4LNL4": {
            "name": "Status",
            "options": {
                "query": "index=_internal \n| stats count by status"
            },
            "type": "ds.search"
        }
    },
    "layout": {
        "globalInputs": [
            "input_global_trp",
            "input_Y8d7RBfE",
            "input_08lrAW9u",
            "input_RhQr1bEx",
            "input_EhSfAyRc"
        ],
        "layoutDefinitions": {
            "layout_1": {
                "structure": [
                    {
                        "item": "viz_uhDaw5WM",
                        "position": {
                            "h": 400,
                            "w": 584,
                            "x": 0,
                            "y": 0
                        },
                        "type": "block"
                    },
                    {
                        "item": "viz_1BAm6ljX",
                        "position": {
                            "h": 400,
                            "w": 616,
                            "x": 584,
                            "y": 0
                        },
                        "type": "block"
                    }
                ],
                "type": "grid"
            }
        },
        "tabs": {
            "items": [
                {
                    "label": "New tab",
                    "layoutId": "layout_1"
                }
            ]
        }
    }
}