Using dynamic options in the UI
You can use dynamic coloring for a variety of visualizations. For example, to visualize changes in hourly site visitors, you can set color thresholds for different data ranges to illustrate if the hourly site visitor numbers met or fell short of hourly expectations. In this example, there are 5 color thresholds:
- Green: more than 1,800 visitors
- Light green: 1,500 to 1,800 visitors
- Yellow: 1,200 to 1,500 visitors
- Orange: 1,000 to 1,200 visitors
- Red: fewer than 1,000 visitors
The following image shows a single value visualization with dynamic coloring applied according to the example hourly site visitor metrics:
In the example, both the major and trend values are dynamically colored. The trend value is the change in visitor numbers from the previous hour to the current hour. In the current hour, visitor numbers declined by 111 visitors. Because the trend was negative, the number and arrow demonstrating trend are both dynamically colored red.
The values you provide for color thresholds are inclusive for lower bounds and noninclusive for upper bounds. For example, in the orange threshold from 1,000 to 1,200 visitors, a value of 1,000 visitors is colored orange, but a value of 1,200 is colored yellow, not orange.
For details about configuring single value visualizations, see Single value visualizations.
Dynamic options and dynamic options syntax
Whether you set dynamic options in the UI or write them in the source editor, all dynamic options follow dynamic options syntax (DOS). For example, when you set the majorValue dynamic element for a single value visualization in the UI, DOS is created in the source code to assess the value in the visualization against fixed color thresholds. You can use DOS to customize your dynamic visualizations in the source code editor.
The source code editor is a collapsible section accessible in the configuration panel after you select a visualization. You can edit the source code directly for the visualization and see your changes reflected in real time. If you edit source code in the dashboard source code editor, where you can edit source code for all dashboard components, you cannot test your edits until you exit the source code editor.
See What is a dashboard definition? for details about editing the visualization source code directly.
Dynamic options syntax structure
Dynamic options syntax is the written code used in Dashboard Studio for visualization options and dynamic menu options for inputs. DOS structure has several parts, each separated by a pipe ( | ).
| DOS part | What it does | Required? |
|---|---|---|
| Data source | An originating data source, which can be a visualization data source such as a primary data source or visualization options such as sparklineValues. The location of your data sources, searches, and options for each search that you create in the visual editor. |
Yes |
| Selector functions | Identifies the data from the data source associated with the visualization. A dynamic option can have one or multiple selector functions. | No |
| Formatting function | Formats the selected data. | Yes |
An option configured with DOS typically has the following structure:
[option]: "> [data source] | [selector function(s)] | [formatting function]"rowColors, which is configured using DOS. Here, this option uses the primary data source, the seriesByName selector function, and the pick formatting function:
"rowColors": "> primary | seriesByName(\"Purchases\") | pick(PurchasesRowColorsEditorConfig)"Conditional coloring example
The following example represents a single value visualization that dynamically updates the color of its trend value based on a change in the number of hourly site visitors. A downward change prompts the red threshold and an upward change prompts the green threshold. This example is fully configurable in the UI and the following source code is for illustrative purposes.
The following image shows a downward trend of site visitors.
The following source code block contains the source code for this single value visualization.
"viz_FOgBv9oe": {
"containerOptions": {},
"context": {
"majorColorEditorConfig": [
{
"to": 1000,
"value": "#D41F1F"
},
{
"from": 1000,
"to": 1200,
"value": "#D94E17"
},
{
"from": 1200,
"to": 1500,
"value": "#CBA700"
},
{
"from": 1500,
"to": 1800,
"value": "#669922"
},
{
"from": 1800,
"value": "#118832"
}
],
"trendColorEditorConfig": [
{
"to": 0,
"value": "#9E2520"
},
{
"from": 0,
"value": "#1C6B2D"
}
]
},
"dataSources": {
"primary": "ds_6IxLUIWS"
},
"options": {
"majorColor": "> majorValue | rangeValue(majorColorEditorConfig)",
"trendColor": "> trendValue | rangeValue(trendColorEditorConfig)"
},
"showLastUpdated": false,
"showProgressBar": true,
"title": "Hourly site visitors",
"type": "splunk.singlevalue"
}You can see that the trendColor option follows the DOS structure [option]: "> [data source] | [formatting function]". The trendColor option uses the data from trendValue as its data source and the formatting function rangeValue applies colors to the visualization based on a range of colors from trendColorEditorConfig:
"trendColor": "> trendValue | rangeValue(trendColorEditorConfig)"The trendColorEditorConfig option, found in the context sub-stanza, is defined as having the value #9E2520, a hexadecimal code for red, when the value passed from trendColor to rangeValue is below 0. Conversely, when the value passed from the trendColor to rangeValue option is 0 or higher, the trendColorEditorConfig option is defined in the source code as having the value #1C6B2D, a hexadecimal code for green.
When you initially create a visualization with the UI, default dynamic options and values, such as majorValue and trendValue, do not appear in the source editor until you change an option from its default. If you manually change an option from its default, the associated dynamic options and values appear in the source editor.
To learn about how you can customize DOS to your own needs, see Modify and write dynamic options syntax.
Copy and paste the dashboard definition into your own dashboard to see the example:
{
"title": "Hourly site visitors example",
"description": "",
"inputs": {
"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": {
"global": {
"showProgressBar": true
}
}
},
"visualizations": {
"viz_FOgBv9oe": {
"containerOptions": {},
"context": {
"majorColorEditorConfig": [
{
"to": 1000,
"value": "#D41F1F"
},
{
"from": 1000,
"to": 1200,
"value": "#D94E17"
},
{
"from": 1200,
"to": 1500,
"value": "#CBA700"
},
{
"from": 1500,
"to": 1800,
"value": "#669922"
},
{
"from": 1800,
"value": "#118832"
}
],
"trendColorEditorConfig": [
{
"to": 0,
"value": "#9E2520"
},
{
"from": 0,
"value": "#1C6B2D"
}
]
},
"dataSources": {
"primary": "ds_6IxLUIWS"
},
"options": {
"majorColor": "> majorValue | rangeValue(majorColorEditorConfig)",
"trendColor": "> trendValue | rangeValue(trendColorEditorConfig)"
},
"showLastUpdated": false,
"showProgressBar": true,
"title": "Hourly site visitors",
"type": "splunk.singlevalue"
}
},
"dataSources": {
"ds_6IxLUIWS": {
"name": "Hourly site visitors",
"options": {
"query": "| makeresults count=24\n| streamstats count\n| eval _time = relative_time(now(), \"-\" . (24-count) . \"h@h\")\n| eval visitors = case(\n count <= 8, 400 + (random() % 200),\n count > 8 AND count <= 16, 900 + (random() % 300),\n count > 16, 1600 + (random() % 400)\n )\n| fields _time visitors"
},
"type": "ds.search"
}
},
"layout": {
"globalInputs": [
"input_global_trp"
],
"layoutDefinitions": {
"layout_1": {
"options": {
"height": 960,
"width": 1440
},
"structure": [
{
"item": "viz_FOgBv9oe",
"position": {
"h": 400,
"w": 550,
"x": 890,
"y": 20
},
"type": "block"
}
],
"type": "absolute"
}
},
"options": {},
"tabs": {
"items": [
{
"label": "Overview",
"layoutId": "layout_1"
}
]
}
}
}