
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.
- 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.
- Click the visualization on your dashboard so that it's highlighted with the blue editing outline.
- 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.
- 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:
- Select the object you want to drill down from.
- In the Configuration panel, click +Add Drilldown.
- For On Click, choose Link to custom URL.
- 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. - (Optional) Select Open in new tab so the drilldown link opens in a new tab.
- 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
|
PREVIOUS Download a dashboard |
NEXT Use the action panel to layer, clone, and delete objects |
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!