Setting tokens on a visualization click
Use predefined tokens to turn a dashboard experience from viewing to interactive discovery. Tokens capture information when a user selects different visualization elements. You can then use the token elsewhere in the dashboard to control the data for a different visualization. Setting tokens on a visualization click updates associated inputs using the same token, but multiple inputs cannot set the same token.
Dashboard Studio supports the following predefined tokens for the majority of visualizations:
- name
- value
- row.<fieldname>.value
For more information about tokens, see the following:
The following table represents the predefined token availability and how captured values vary according to visualization type.
| Visualization | name | value | row.<fieldname>.value |
|---|---|---|---|
| Area chart | Y-axis field name of the series/location clicked | Y-axis value of the series/location clicked | Value in the specified series corresponding to the location clicked |
| Bar chart | Y-axis field name of the series/location clicked | Y-axis value of the series/location clicked | Value in the specified series corresponding to the location clicked |
| Bubble chart | Y-axis field name of the series/location clicked | Y-axis value of the series/location clicked | Value in the specified series corresponding to the location clicked |
| Choropleth SVG | Name of the area clicked | Value of the area clicked | n/a |
| Column chart | Y-axis field name of the series/location clicked | Y-axis value of the series/location clicked | Value in the specified series corresponding to the location clicked |
| Ellipse | n/a | n/a | n/a |
| Marker map | n/a | n/a | Value in the specified series corresponding to the location clicked |
| Bubble map* | Name of the area clicked | Value of the area clicked | Value in the specified series corresponding to the location clicked |
| Choropleth map | Name of the area clicked | Value of the area clicked | Value in the specified series corresponding to the location clicked |
| Pie chart | Field name of the value clicked | Value of the location clicked | Value in the specified series corresponding to the location clicked |
| Rectangle | n/a | n/a | n/a |
| Sankey diagram | Field name of the value clicked | Value of the area clicked | n/a |
| Scatter chart | Y-axis field name of the series/location clicked | Y-axis value of the series/location clicked | Value in the specified series corresponding to the location clicked |
| Single value visualization | Field name of the majorValue | Value of the majorValue | n/a |
| Icon | Field name of the majorValue | Value of the majorValue | n/a |
| Table** | Field name of the cell clicked | Value of the cell clicked | Value in the specified series in the same row as the cell clicked |
* Bubble maps support the following pre-defined tokens in addition to the pre-defined tokens that all visualizations support. See Bubble map pre-defined tokens.
** For a table, you can configure different interactions, including setting tokens, on a field-level basis. See Configure field-level interactions in a table.
Configuring a visualization with a set token interaction
- Select the desired visualization.
- Navigate to the Interactions section of the Configuration panel.
- Click + Add interaction.
- In the On click dropdown, select Set tokens.
- In the Set token dropdown, select one of the following:
- Use predefined token: set the token to a predefined token, which captures information from the visualization to set as the token value. This value can change dynamically.
- Enter static value: set the token a predefined static string.
- In the Token name field, type a name for your token. You can use the token name to reference the token elsewhere in the dashboard with the
$token_name$syntax. - In the Token value field, do one of the following:
- If you selected Use predefined token, select one of the following:
- name: field name of the value/location clicked
- value: value of the location clicked
- row.<fieldname>.value: value in the specified series corresponding to the location clicked
- If you selected Enter static value, enter the desired string to set the token value to.
- If you selected Use predefined token, select one of the following:
- (Optional) In the Default value field, enter a default value. For details about default token values, see Defaults for tokens.
- Click Apply. You can now reference the token elsewhere on the dashboard and the token value will be updated when the dashboard viewer clicks the visualization.
Example of a visualization setting a token
You can specify a token that passes along information between different visualizations. The following example shows 2 charts. One is a column chart that displays HTTP methods and their usage frequency, and the other is a pie chart that shows the analysis of HTTP response codes for a given HTTP method. When users click a column in the column chart, the pie chart shows a breakdown of all response codes for the method corresponding to that column. The data connection between the visualizations is achieved by configuring the column chart to set the method token to row.method.value ($method$=row.method.value), with method being the field name, and passing the method token value to the search in the pie chart.
Source code
The following provides the source code for the example for configuring a visualization to set a token. Notice how the token is given the name method in the column chart's options and how that name is used in the token name syntax as $method$ in Search_2.
The example also sets the default value POST on the token method. Before any user clicks a visualization, the pie chart displays the results for POST, preventing an empty visualization.
Notice the following stanas:
eventHandlerscontains a token calledmethoddefaultscontains atokensstanza that sets the valuePOSTonmethodviz_pie_chartcontains a description that filters for$method$
{
"visualizations": {
"viz_column_chart": {
"type": "splunk.column",
"dataSources": {
"primary": "ds_qBGlESX2"
},
"eventHandlers": [
{
"type": "drilldown.setToken",
"options": {
"tokens": [
{
"token": "method",
"key": "row.method.value"
}
]
}
}
],
"showProgressBar": false,
"showLastUpdated": false,
"title": "HTTP Request Method"
},
"viz_pie_chart": {
"type": "splunk.pie",
"dataSources": {
"primary": "ds_c8AfQapt"
},
"title": "Response Codes for Method $method$"
}
},
"dataSources": {
"ds_qBGlESX2": {
"type": "ds.search",
"options": {
"query": "index=_internal \n| stats count by method"
},
"name": "Search_1"
},
"ds_c8AfQapt": {
"type": "ds.search",
"options": {
"query": "index=_internal method=$method$\n| stats count by status"
},
"name": "Search_2"
}
},
"defaults": {
"dataSources": {
"ds.search": {
"options": {
"queryParameters": {
"latest": "$global_time.latest$",
"earliest": "$global_time.earliest$"
}
}
}
},
"tokens": {
"default": {
"method": {
"value": "GET"
}
}
}
},
"inputs": {
"input_global_trp": {
"type": "input.timerange",
"options": {
"token": "global_time",
"defaultValue": "-24h@h,now"
},
"title": "Global Time Range"
}
},
"layout": {
"tabs": {
"items": [
{
"layoutId": "layout_1",
"label": "New tab"
}
]
},
"layoutDefinitions": {
"layout_1": {
"type": "grid",
"structure": [
{
"item": "viz_column_chart",
"type": "block",
"position": {
"x": 0,
"y": 0,
"w": 600,
"h": 400
}
},
{
"item": "viz_pie_chart",
"type": "block",
"position": {
"x": 600,
"y": 0,
"w": 600,
"h": 400
}
}
]
}
},
"globalInputs": [
"input_global_trp"
]
},
"description": "",
"title": "Set Tokens on Click - Example"
}