Splunk Cloud Platform

Splunk Dashboard Studio

Acrobat logo Download manual as PDF


This documentation does not apply to the most recent version of Splunk Cloud Platform. For documentation on the most recent version, go to the latest release.
Acrobat logo Download topic as PDF

Part 2: Create a dashboard

To tell a story about the revenue and purchasing trends of Buttercup Games, you can create a dashboard in Splunk Dashboard Studio with compelling visualizations powered by insightful searches.

Select a layout option

Splunk Dashboard Studio provides two different layout options: grid and absolute. In the grid layout, visualizations have automatic, snap-to alignment. This means that charts will snap to your specified rows without any manual input. The grid layout is best for a quick dashboard building experience. The absolute layout provides more flexibility with pixel-perfect control and customizable backgrounds, shapes, and icons. For this tutorial, select the absolute layout. To learn more about both layouts, see Compare absolute and grid layouts.

  1. Select Create New Dashboard from the Dashboards tab of the Search & Reporting app.
  2. Title your dashboard Buttercup Games Online Store and add Dashboard Studio Tutorial in the description box.
  3. Choose Private or Shared in App in the Permissions drop-down menu. Other app users can see your dashboard with the Shared in App option.
  4. Select the Dashboard Studio option for this dashboard.
  5. Select the Absolute layout.
  6. Select Create. This opens the visual editor.

How to navigate the visual editor and the source code editor

There are two editing options available in Splunk Dashboard Studio: the visual editor and the source code editor. Although it's not always necessary to use the source code editor to build a dashboard, you can edit the source code for more customizability beyond the visual editor.

About the visual editor

In this tutorial, you will practice using tools in the editing toolbar to customize a dashboard. The editing toolbar is shown in the following screenshot: A white toolbar with many icons on it such as an undo and redo icon, an add chart icon, and an add input icon.

In the editing toolbar, you can add objects to a dashboard, adjust visual formatting options, access the data source overview panel, and more.

Use the following table as a reference for all tools in the editing toolbar:

Tool Description Notes
Undo and redo (One arrow curving left and the other curving right.) Undo or redo actions while building your dashboard.
Add chart (A bar graph as an icon.) Add visualizations to your dashboard such as single value visualizations, tables, area charts, line charts, bar charts, and more.
Add input (Three horizontal sliding toggles as an icon.) Allow users to interact with your dashboard by adding inputs, such as drop-down menus and time range pickers.
Add icon (Four small squares making a larger square in a two by two configuration.) Choose from a list of popular icons, add your own custom icons, or include a single value icon. Available only in the absolute layout.
Add shape (A square, triangle, circle, and backslash configured to form a larger square.) Add rectangles, ellipses, and lines.
Add image (A mountain and sun landscape as an icon.) Upload a local image or paste a link to an image URL. Available only in the absolute layout.
Add Markdown (An uppercase letter M and an arrow pointing downward as an icon.) Add Markdown formatting to your dashboard.
Configuration (A gear as an icon.) Open/close a configuration panel to adjust dashboard preferences and canvas options.
Data source overview (A cylinder as an icon.) Create or view your available data sources and searches.
Source code editor (A forward slash between two outward carrots as an icon.) View the JSON-based dashboard source code or apply options that are not available in the visual editor.
Zoom level Choose a zoom percentage. You can select Auto or Fit for automatic dashboard sizing. Available only in the absolute layout.
View or Edit Toggle between View and Edit mode to see how your changes appear in the dashboard.
Theme Choose either a Light or Dark theme.
Save Save your changes. Dashboards in Splunk Dashboard Studio do not save automatically.
Fullscreen (Two carrots pointed outwards diagonally as an icon.) View your dashboard in full screen. Press esc to exit full screen. Available only in View mode.
Actions panel Download, clone, or delete your dashboard. You can also view the dashboard on mobile or change editing permissions. Available only in View mode.

In the Configuration panel, only visible in Edit mode, you can adjust canvas settings, preferences, and view options. See Set up a dashboard.

About the source code editor

The source code for Splunk Dashboard Studio is JSON-based. In this tutorial, you will not use the source code editor to edit your dashboard. To learn more about the source code editor and how to write and edit dashboard source code, see What is a dashboard definition.

Set up the dashboard canvas

Before adding visualizations to your dashboard, prepare the canvas by adding a background image and some shapes. Preparing the dashboard canvas with design elements can help you later when choosing visual formatting options for visualizations.

  1. Select the Global Time Range element.
  2. In the Configuration panel, select Last 7 Days as the value for the Default Value dropdown. This sets the default setting for Global Time Range to be 7 days rather than 24 hours.
  3. Set the Global Time Range dropdown on the canvas to Last 7 Days. Although you already set the default value of the Global Time Range to 7 days, this only changes the time range when a dashboard is freshly loaded. Since you've already loaded this dashboard, you need to select Last 7 Days again to update this specific dashboard. By default, searches use the global time range picker. You will use the default time range for all your visualizations in this dashboard.
  4. Select anywhere on the canvas away from the Global Time Range element to return to the main Configuration panel. Using the Configuration panel, which now displays information about the canvas, make sure the Display Mode is set to Fit to Width.
  5. Make sure that Canvas Width is set to 1440 and Canvas Height to 960. To learn more, see Compare absolute and grid layouts.
  6. Open the Buttercup Games background image in a new tab and download the image to your computer.
  7. In the Background Image section of the Configuration panel, upload the Buttercup Games background image.
  8. The image size limit for Dashboard Studio is 16 MB.

  9. In the Configuration panel, change the background image size setting from Contain to Cover.

After completing Part 2, your dashboard will look similar to the following:

Dashboard with a purple background, a time range, a title, and five light purple rectangles.

Next step

You've completed Part 2 of the Splunk Dashboard Studio tutorial.

Now you have a canvas ready for visualizations. Next, add a new data source and assign it to a table visualization. Continue to Part 3: Add a table with column formatting.

Last modified on 25 January, 2024
PREVIOUS
Part 1: Configure data sources for the Splunk Dashboard Studio tutorial
  NEXT
Part 3: Add a table with column formatting

This documentation applies to the following versions of Splunk Cloud Platform: 9.1.2308


Was this documentation topic helpful?


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