Add visualizations

You can use the editing bar to add objects and the Configuration panel in the visual editor to use most of the formatting options for visualizations. There are some options, however, that you must set using the source editor, which contains the dashboard definition. To learn more about the dashboard definition, see How the dashboard definition is structured in the source editor.

If you are using the grid layout, the only visualizations available are charts.

The elements of a visualization

When you add a visualization to your dashboard, a corresponding JSON stanza is created in the dashboard definition and given a unique ID. To find your visualization in the source code later, you might want to change this ID, but the ID must only appear once in the dashboard definition. You can also give the visualization a title using the title option.

The source code format of the visualization

Most visualizations follow the same general format. For example, the following stanza represents a table:

		"viz_25NNIqLF": {
			"type": "viz.table",
			"options": {
				"numberPrecision": 1
			},
			"dataSources": {
				"primary": "ds_gcEN4c7Q"
			}
		}

This is an example of a stanza like the previous one.

Visualization fields and settings

Each visualization can have the following fields:

Field	Description	Required
The unique ID	The unique ID is automatically generated, but can be changed. If you change it, however, you must also change the visualization ID in the layout.	Yes
type	The type is the kind of visualization you are using. For example, the table visualization type is viz.table. You can change the type in the source code, much like using the Visualization Picker in the visual editor. It might or might not render depending on the way your data is structured.	Yes
title	This is the title name you can give your visualization. It is not the same as the unique ID and will not change the unique ID.	No
description	You can use this field to describe your visualization within the visualization panel.	No
options	List your options in this field. The formatting depends on the type of option and its setting format. For example, boolean values and integer values don't have quotes, strings require quotes, and arrays and objects have their own formatting requirements. Each value that you can only add to a visualization through the source editor has an example and its correct formatting in the visualization's topic section.	No
dataSources.primary	This is where the unique ID of your primary data source is listed. A visualization can have only one primary data source.	No
dataSources.secondary	This is where the unique ID of all secondary data sources is listed.	No
dataSources.annotation	This is where the unique ID of your annotation data source is listed. Currently, "annotation" is the only secondary data source that has its own designated name.	No

Example of setting a visualization option

You can set some visualization options in the visual editor. For example, the option numberPrecision is set using the Configuration panel in the visual editor by selecting the table and navigating to Number Formatting > Digit Precision.

However, if you want to set an overlay that colors the highest and lowest values only, you can't find the option in the Configuration panel. To set this overlay, find the correct option in the Object options reference by expanding the code window for the table visualization. This option is dataOverlayMode, and in this example, it is set to highlow. The resulting stanza looks like the following:

		"viz_25NNIqLF": {
			"type": "viz.table",
			"options": {
				"numberPrecision": 1,
				"dataOverlayMode": "highlow"
			},
			"dataSources": {
				"primary": "ds_7n1a0kLP"
			}
		}
	},

Connect a visualization to a data source

To create data-driven visualizations, you must associate them with a data source through a search.

1. Using the visual editor, Select the visualization you want to add by clicking the Add Chart ( ) or Add Shape ( ) icon in the editing toolbar. Browse through the available visualizations or use the search option.
2. Click the visualization on your dashboard so that it's highlighted with the blue editing outline.
3. Set up a new data source by adding a search to the Search window if you are selecting a chart, or by clicking + Setup Primary Data Source if you've selected a shape.
4. To choose an existing search for a chart, close the Configuration window, to bring up the Configuration panel and click +Setup Primary Data Source to choose an existing search. To create a new search from this panel, click + Create Ad hoc Search to create a new search from this window.

Use drilldown to connect a visualization to a URL

You can drilldown from either a visualization or a shape to a custom URL. The URL can be relative, pointing to a local site, or absolute, pointing to an external site. Adding drilldown to an object allows a user to click on the object to be directed to the URL you specify.

To add drilldown to an object complete the following steps:

1. Select the object you want to drill down from.
2. In the Configuration panel, click +Add Drilldown.
3. For On Click, choose Link to custom URL.
4. Provide a relative or absolute URL.

   If you do not provide an http:// address, the generated URL is considered internal to Splunk Enterprise and uses a localhost URL, such as localhost:8000//. If you provide an http:// prefix, such as http://splunk.com, the drilldown directs to that external URL.

5. (Optional) Select Open in new tab so the drilldown link opens in a new tab.
6. Click Save.

When drilling down from a visualization with data, you must click the actual value in the visualization, not just anywhere in the visualization, in order to go to the link.

Available visualizations

You can configure the following visualization types using the source editor:

Visualization type	Syntax
Area chart	viz.area
Bar chart	viz.bar
Bubble chart	viz.bubble
Choropleth map (US or world)	geo://default/us or geo://default/world
Column chart	viz.column
Ellipse	viz.ellipse
Filler gauge	viz.fillergauge
Image	viz.img
Line chart	viz.line
Line shape	abslayout.line
Marker gauge	viz.markergauge
Pie chart	viz.pie
Punchcard	viz.punchcard
Rectangle	viz.rectangle
Scatter chart	viz.scatter
Single value chart	viz.singlevalue
Single value radial chart	viz.singlevalueradial
Table	viz.table
Text box	viz.text