Skip to main content
Splunk® Enterprise

Splunk Dashboard Studio

Splunk® Enterprise
9.0.0
This documentation does not apply to the most recent version of Splunk® Enterprise. For documentation on the most recent version, go to the latest release.

Shapes

In addition to using charts and classic Splunk visualizations, you can add images, rectangles, ellipses, and connecting lines. You can only use shapes if you are using the absolute layout. Complete the following steps to create a dashboard with this layout type.

  1. Click Create New Dashboard.
  2. Click Dashboard Studio.
  3. Select Absolute in the Select layout mode section.

There are two editing elements in the visual editor: the editing toolbar, located at the top of the canvas, and a Configuration panel, located to the right of the canvas.

The options available to you in the Configuration panel depend on the object you've selected. Each chart has its own topic that expands on the formatting information in this topic.

An image displaying the configuration panel in the visual editor.

When you select an object, you can use the Configuration panel to format the object and also add a search-powered ad hoc data source to drive it in the form of a search string. For example, if you've selected an ellipse, you can use the Position & Size section to edit the position and the Border section to modify the color, opacity, thickness, and border style of the shape. You can also add a data source and enable thresholding.


You can perform the following actions using the toolbar and Configuration panel in the visual editor:

Action Description
Create and customize visualizations For more information on how to work with shapes and other visualizations see Create and customize visualizations.
Configure source code within the visual editor For more information see Access visualization source code in the visual editor.
Configure thresholding You can use the visual editor to make shapes and many other visualizations change color according to value ranges. For more information, see Configure thresholding.
Add drilldown to a visualization For more information on how to add drilldown, see Use drilldown to connect a visualization to a URL.
Select multiple objects and modify them all at once For more information, see Select multiple visualizations at once.
Change a visualization by using the visualization picker For more information, see Change a visualization by using the visualization picker.
Use keyboard shortcuts When you select an object in the canvas, you can customize it using the Configuration panel or with keyboard shortcuts. For more information on the available keyboard shortcuts, see Use keyboard shortcuts to edit your dashboard.
Use reference options for shapes You can format most shapes using the Configuration panel. Some options are only available by adding them in the source editor. To see a complete list of options available for shapes, see Source options for shapes.
Use reference options for charts and other visualizations. Some options are only available by adding them in the source editor. To see a complete list of options available for these objects, select the object topic from the Table of Contents and scroll down to the reference section.

Create and customize visualizations

Use the editing toolbar to add charts, ellipses, lines, and rectangles to your dashboard. Use the Configuration panel to format your visualizations.

When an object, such as a shape, is placed at (0,0) on the canvas axis, the top left corner of the object is placed in the top left corner of the canvas. When you increase the X value, the object moves to the right. When you increase the Y value, the object moves down. The (0,0) location is the default for background images.

For example, to add a shape:

  1. On the editing toolbar, click the shapes icon (Shapes icon.).
  2. Select a shape to add it to the dashboard. When a shape is selected in the canvas, you can customize using the Configuration panel or you can use keyboard shortcuts. For more information on keyboard shortcuts see keyboard shortcuts.

Change the position and size of visualizations

Expand Position & Size section of the Configuration panel.

  • Change the object's position on the canvas by entering the position of the shape in pixels in the X and Y fields. You can also drag the object to reposition it.
  • Change the height or width by entering the dimensions of the shape in pixels in the W and H fields. You can also drag the edges to adjust the size.

Change the color and opacity of ellipses and rectangles

Expand the Fill section of the Configuration panel.

  • To change the fill color, enter a color hexadecimal code, such as #FFFF00. You can also choose a default color from the color palette.
  • Adjust the opacity by specifying a percentage in the Opacity (%) field.

Change the border of ellipses and rectangles

You can customize the color, thickness, and dash style of ellipses and rectangles. You can also round the corners of rectangles by changing the border radius.

Expand the Border section of the Configuration panel.

  • Change the border Color by entering a hexadecimal code such as #FFFF00. You can also choose a color from the color palette.
  • Adjust the border Opacity by specifying an opacity percentage. The higher the percentage, the less opaque (darker) the border becomes.
  • Adjust the border Thickness by specifying a number in pixels.
  • Adjust the Radius to change the corner curvature percentage of a rectangle. You can specify a number from 0-100. All corners are affected by this setting.
  • Adjust the border Dash style by specifying a number representing the length of the dashes as well as the spaces between them in pixels. For example, specifying a 4 will result in a border composed of dashes 4 pixels long and spaces of 4 pixels.

Format lines and use them to connect objects

Add a line using the shapes button (The shapes icon.). A blue dot appears on the ends of the line when it is selected.

  • To change the color and opacity of the line, expand the Stroke section.
    To change the stroke color, enter a hexadecimal code such as #FFFF00. You can also choose a color from the color palette.
  • Change the opacity by specifying a percentage in the Opacity field.
  • Change the line thickness by specifying a number in pixels in the Thickness field.
  • Change the style of the line by specifying a number in the Line Dash Style field.
    The number of pixels you specify is the length of the dashes, as well as the spaces between them.
  • Hide or show arrows at either end of the line by expanding the Arrows section of the Configuration panel.
  • To change the length of a line, select the line, click the blue circle, and drag the end of the line to the position you want.
  • You can also snap to arbitrary points or objects.
    When you hover over the blue circle of a line, a four-sided arrow appears. Use this arrow to snap the line to one of the plus (+) symbols placed in convenient areas on the canvas or to an object, such as a chart, visualization, shape, or icon.

Lines are unlike the other visualizations because they have anchoring options in the layout instead of just positions. When you anchor a line to a plus (+) symbol of an object, the layout position structure for the line position is the first letter of the cardinal coordinates using the position.from.port and position.to.port fields. For example, the following layout snippet shows a line that is anchored to the northern side of one visualization, and the western of another visualization: 

{
  "item": "viz_aVKLvBZJ",
  "type": "line",
  "position": {
    "from": {
      "item": "viz_mOyNaOqn",
      "port": "n"
    },
    "to": {
      "item": "viz_wwVMhJey",
      "port": "w"
    }
  }
}

The following shows a complete dashboard definition that uses one line connecting two objects with cardinal coordinates and one line that is not attached to an object. The unattached line is positioned by pixel placement.

Dashboard definition example

Expand

Source code

Expand the box to view the complete definition. You can copy/paste the code into your own instance to see the connected options.

Source options for shapes

While most of these options are available using the visual editor, some must be added to the visualization stanza in the source editor in the options field. The general anatomy of a shape visualization is similar to the following: 

"viz_65TNIqLF": {
			"type": "splunk.rectangle",
			"options": {
				"fillColor": "#0000FF"
			},
			"dataSources": {
				"primary": "ds_gcEN4c7Q"
			}
		}


Ellipses

Expand

The following options are available for editing an ellipse:

Line shape

Expand

The following options are available for editing a line:

Rectangles

Expand

The following options are available for editing a rectangle:

Last modified on 08 August, 2024
Scatter charts   Single value visualizations

This documentation applies to the following versions of Splunk® Enterprise: 9.0.0, 9.0.1, 9.0.2, 9.0.3, 9.0.4, 9.0.5, 9.0.6, 9.0.7, 9.0.8, 9.0.9, 9.0.10, 9.1.0, 9.1.1, 9.1.2, 9.1.3, 9.1.4, 9.1.5, 9.1.6, 9.1.7, 9.1.8, 9.2.0, 9.2.1, 9.2.2, 9.2.3, 9.2.4, 9.2.5, 9.3.0, 9.3.1, 9.3.2, 9.3.3

Acrobat logo Download manual
Acrobat logo Download this page

Please expect delayed responses to documentation feedback while the team migrates content to a new system. We value your input and thank you for your patience as we work to provide you with an improved content experience!

Was this topic useful?







You must be logged into splunk.com in order to post comments. Log in now.

Please try to keep this discussion focused on the content covered in this documentation topic. If you have a more general question about Splunk functionality or are experiencing a difficulty with Splunk, consider posting a question to Splunkbase Answers.

0 out of 1000 Characters