
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
- Add an icon (
) from the icon tray in the editing panel.
- Add a data source search that results in a number. You can do this at any point in the procedure.
- Make sure the visualization type is correct.
Find the icon you added in thevisualizations
section of the dashboard definition. If the type isviz.icon
, change it toviz.singlevalueicon
. - Use the settings in the Object options reference for Single value icon to configure the visualization.
Make sure that you add the optionshowValue
and set it totrue
. If it is not there already, make sure that you add the optionshowIcon
set it totrue
. 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" }
PREVIOUS Single value and single value radial |
NEXT Table |
This documentation applies to the following versions of Splunk® Dashboards App: 0.6.0, 0.7.0, 0.8.0, 0.9.0
Feedback submitted, thanks!