Splunk® Enterprise

Dashboards and Visualizations

Download manual as PDF

This documentation does not apply to the most recent version of Splunk. Click here for the latest version.
Download topic as PDF

Customize Simple XML

There are various ways you can customize simple XML dashboards to modify the layout, add visualizations, and customize behavior of a dashboard or form. This topic discusses using custom CSS stylesheets and JavaScript files as well as an introduction to the common JavaScript API.

This topic also contains a few examples to highlight a few ways you can customize a dashboard.

Refer to the Splunk 6 Dashboard Examples app, available from Splunkbase, for a rich set of examples that show various ways to customize a dashboard.

CSS and JavaScript

Splunk apps reference the following files upon loading. These files define the default styling and behavior of the dashboards within the app context.

  • dashboard.css
  • dashboard.js

The location for these files are in an app's directory structure:

$SPLUNK_HOME/etc/apps/<app_name>/appserver/static/

You can modify these files to implement customized features for an app. However, keep in mind the following about these default files:

  • Customizations here affect every dashboard in an app
  • When you update an app your customized files could be overwritten during the update.

It is better to create your own custom CSS and JavaScript files and place them in the same directory as the default files. Then reference the files from your <dashboard> or <form> simple XML elements.

For example, to reference custom CSS and JavaScript files from the <dashboard> element:

<dashboard stylesheet="myStyleSheet.css" script="myJavaScript.js">
   . . .

Common JavaScript API

You can customize behavior and visualizations of a dashboard by writing JavaScript code that references the SplunkJS Stack libraries. An understanding of the framework of SplunkJS Stack is essential to using them in a customized simple XML dashboard.

Note: Documentation of SplunkJS Stack is out of scope for this manual. For details on using the SplunkJS Stack libraries to customize dashboards, refer to SplunkJS Stack on the Splunk developer portal.

JavaScript APIs of interest for customizing simple XML dashboards fall into the following categories:

  • Dashboard level APIs
  • Visualization element APIs
  • Custom table cell renderer APIs

Example customizations

Custom stylesheet

This example uses a custom stylesheet to change the appearance and behavior of the dashboard.

CustomLayout.png


Simple XML source

The dashboard element references the custom stylesheet, dark.css.

$SPLUNK_HOME/etc/apps/myApp/appserver/static/dark.css

<dashboard stylesheet="dark.css">
   . . .

Custom stylesheet

Here is a partial listing of dark.css. Download the Splunk 6 Dashboard Examples to view the full listing.

body,.dashboard-body,.footer,.header,.app-bar,
.dashboard-panel,.dashboard-cell {
background: #333 !important;
}
a {
color: #ccc;
}
a:hover {
color: #fff;
}
.dashboard-row .dashboard-panel .panel-head h3,
.dashboard-header h2, p.description, .nav-footer>li>a {
color: #ddd;
text-shadow: none;
}
. . .

Custom visualization

This example defines a custom visualization for the search results.

TagCloudExample.png

Key components of this customization:

  • simple XML source
    <dashboard> element references the JavaScript file, custom_viz.js.

    Uses an <html> panel to contain the custom visualization, referenced by its ID.
  • custom_viz.js
    Creates an instance of SearchManager to specify a search for the visualization

    Creates an instance of the TagCloud visualization, created by tagcloud.js.
  • tagcloud.js
    Creates the tag cloud visualization based on search results. Implements drilldown behavior.
  • tagcloud.css
    Specifies layout for tagcloud.js
PREVIOUS
Token usage in dashboards
  NEXT
Chart customization

This documentation applies to the following versions of Splunk® Enterprise: 6.1, 6.1.1, 6.1.2, 6.1.3, 6.1.4, 6.1.5, 6.1.6, 6.1.7, 6.1.8, 6.1.9, 6.1.10, 6.1.11, 6.1.12, 6.1.13, 6.2.0, 6.2.1, 6.2.2, 6.2.3, 6.2.4, 6.2.5, 6.2.6, 6.2.7, 6.2.8, 6.2.9, 6.2.10, 6.2.11, 6.2.12, 6.2.13, 6.2.14, 6.2.15, 6.3.0, 6.3.1, 6.3.2, 6.3.3, 6.3.4, 6.3.5, 6.3.6, 6.3.7, 6.3.8, 6.3.9, 6.3.10, 6.3.11, 6.3.12, 6.3.13, 6.3.14, 6.4.0, 6.4.1, 6.4.2, 6.4.3, 6.4.4, 6.4.5, 6.4.6, 6.4.7, 6.4.8, 6.4.9, 6.4.10, 6.4.11


Was this documentation topic helpful?

Enter your email address, and someone from the documentation team will respond to you:

Please provide your comments here. Ask a question or make a suggestion.

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