Single value icon

The single value icon image allows an icon to be shown in relation to a single value returned by a search.

This visualization can only be configured in the source editor. Single value icon follows all the same search logic as single value. For more information, see Single value and single value radial.

Because it can only be configured in the source editor, however, the way to configure it is different than the other visualizations. Some of the Splunk default icons that come in the preset icon tray are already of type viz.singlevalueicon, some are of type viz.icon, and any icons you have added will be of type viz.icon.

Create a single value icon

1. Add an icon () from the icon tray in the editing panel.
2. Add a data source search that results in a number. You can do this at any point in the procedure.
3. Make sure the visualization type is correct.
   Find the icon you added in the visualizations section of the dashboard definition. If the type is viz.icon, change it to viz.singlevalueicon.
4. Use the settings in the Object options reference for Single value icon to configure the visualization.
   Make sure that you add the option showValue and set it to true. If it is not there already, make sure that you add the option showIcon set it to true. For more information on the options available, see: Source options for the single value icon.

Example

The visualization uses a simple ad hoc search:

index=_internal | stats count

The dashboard definition is beneath the image. Note that encoding is used to enable thresholding. You'll see in the example that the color ranges are set manually. For more on using encoding with single value visualizations, see Single value thresholding.

The value returned comes from field setting in the fill section of encoding. It is almost always the case that you want this value to be set to the default "primary[0]". This corresponds to the first column returned in the search. You have to do this manually in the source.

The following is the dashboard definition:

{
	"visualizations": {
		"viz_KGD5BVtZ": {
			"type": "viz.singlevalueicon",
			"title": "",
			"options": {
				"showValue": true,
				"unitPosition": "after",
				"icon": "splunk-enterprise-kvstore://icon-active-directory__e03b60f5-d599-485e-bc89-67b86f2f80c7.svg"
			},
			"dataSources": {
				"primary": "ds_suta9Hac"
			},
			"encoding": {
				"fill": {
					"field": "primary[0]",
					"format": {
						"type": "rangevalue",
						"ranges": [
							{
								"from": 1000,
								"value": "#cb3b43"
							},
							{
								"from": 700,
								"to": 1000,
								"value": "#ff7152"
							},
							{
								"from": 500,
								"to": 700,
								"value": "#fc9850"
							},
							{
								"from": 300,
								"to": 500,
								"value": "#f4df7a"
							},
							{
								"from": 100,
								"to": 300,
								"value": "#4beba8"
							},
							{
								"to": 100,
								"value": "#5fbcff"
							}
						]
					}
				}
			}
		}
	},
	"dataSources": {
		"ds_fpjLrmqg": {
			"type": "ds.search",
			"options": {
				"query": "index=_internal \n|  timechart count",
				"queryParameters": {
					"earliest": "-24h@h",
					"latest": "now"
				}
			},
			"name": "Search_1"
		},
		"ds_suta9Hac": {
			"type": "ds.search",
			"options": {
				"query": "index=_internal \n|  stats count",
				"queryParameters": {
					"earliest": "rt-1m",
					"latest": "rt"
				}
			},
			"name": "Search_2"
		}
	},
	"inputs": {},
	"layout": {
		"type": "absolute",
		"options": {},
		"structure": [
			{
				"item": "viz_KGD5BVtZ",
				"type": "block",
				"position": {
					"x": 210,
					"y": 90,
					"w": 410,
					"h": 190
				}
			}
		]
	},
	"description": "",
	"title": "SV Icon"
}

Source options for the single value icon

While some of these options can be set using the visual editor, there are additional options that can only be set in the source editor for viz.singlevalueicon. These options are added to the options field of the visualization stanza. For example, the following example shows the addition of background color using a hex code and the location of the icon you want to use.

"viz_25NNIqLF": {
			"type": "viz.singlevalueicon",
			"options": {
				"backgroundColor": "#0000FF",
                                "icon": "splunk-enterprise-kvstore://icon-active-directory__e03b60f5-d599-485e-bc89-67b86f2f80c7.svg"
			},
			"dataSources": {
				"primary": "ds_gcEN4c7Q"
			}
		} 

To read more on how visualization stanzas are structured see Elements of a visualization. Below are all of the options available.

Single value icon options

The following options are available for the single value icon visualization:

Property	Type	Default	Description
unit	string	N/A	Specify label text to show next to the single value.
unitPosition	(before | after)	after	Specify whether you want the unit label to appear before or after the single value.
underLabel	string	N/A	Specify the label text that appears below the value.
backgroundColor	string	transparent	Specify a color to use for the single value background. For example, "#FFA500".
showTrendIndicator	boolean	true	Specify whether to show or hide the single value trend indicator.
trendColorInterpretation	(standard | inverse)	standard	Specify how the trend indicator is colored.
useTrendUnits	boolean	false	Specify whether to truncate the trend value to two significant digits. A magnitude unit is displayed.
trendDisplayMode	(percent | absolute)	absolute	Specify whether the trend value is displayed as a percentage or an absolute count.
numberPrecision	number	0	Specify the number of decimal places to display. For example, to display three decimal places, enter a value of 3. The maximum value is 20.
useThousandSeparators	boolean	true	Specify whether numeric values use commas as thousandths separators.
icon	string	default	Specify an icon. To use one of the default icons, specify the name: activity, clock, pencil, star, or default. To use an icon you've uploaded, use the icon ID from the localStorage. For example icon: local://iconID....
iconPosition	(before | after | top | below)	before	Specify where to display the icon in relation to the single value.
iconOpacity	number	1	Specify the opacity for the icon using numbers between and including 0 and 1. This relates to the opacity percentages in the visual editor.
showValue	boolean	true	Specify whether to enable or disable the value and trend indicator display.
iconColor	string	transparent	Specify the icon color. Use color hex codes. For example, "#FF0000".
majorFontSize	number	calculated based on available space	Specify the font size (px) for the major value of single value icon. By default the major value font size is calculated dynamically based on the available space.
deltaFontSize	number	Font size depends on available space.	Specify the font size (px) for the delta value of the single value icon.

Default properties

In addition to the settings in the options field, there are two default fields that you can set. These are not options, but should be placed at the same level as the options field.

showProgressBar is set to true by default and shows a progress bar as a visualization loads. showLastUpdated is set to true by default and shows the last time the visualization was refreshed. You can disable this feature by adding these properties to a visualization, and changing the settings to false.

In the following example, the single value icon visualization will override the default for showProgressBar and not show a progress bar when it loads.

	"viz_tpRnLS1I": {
		"type": "viz.singlevalueicon",
		"showProgressBar": false,
		"options": {
			"showSparkline": false,
			"backgroundColor": "#ffffff"
		},
		"title": "Does not have a progress bar",
		"description": "Due to viz override",
		"dataSources": {
			"primary": "ds_o7IqGHcO"
		}