How to add a visualization to an HTML dashboard

You can add SplunkJS Stack views to your HTML dashboard when you want to display a visualization and link it to a search, for example a chart or table. You can also add form controls for user input. For more about all the types of views you can add, see Splunk views.

To add a view to an existing HTML dashboard, you'll need to do the following:

  • Add a requirement for the view library, if the view is not one that is already included. For example, all Simple XML wrappers are included, but SplunkJS Stack views are not. For a list of wrappers and views, see Converting visualizations to views in HTML dashboards.
  • Add a code block for the view, set its properties, and optionally link it to a search.
  • Add the view to the layout.

This section provides the basic steps for adding a view to an HTML dashboard. For more specific examples including how to work with event handlers, see the HTML Dashboard Tutorial for a walkthrough of modifying an existing dashboard.

  1. Open your HTML dashboard in a text editor or in Splunk's Source Editor (see How to convert a Simple XML dashboard to HTML to learn how).
  2. To add a requirement for a view library, find this block of code:
  3. require([
        "splunkjs/mvc",
        "splunkjs/mvc/utils",
        "splunkjs/mvc/tokenutils",
        "underscore",
        "jquery",
        "splunkjs/mvc/simplexml",
        "splunkjs/mvc/layoutview",
        "splunkjs/mvc/simplexml/dashboardview",
        "splunkjs/mvc/simplexml/element/chart",
        "splunkjs/mvc/simplexml/element/event",
        "splunkjs/mvc/simplexml/element/html",
        "splunkjs/mvc/simplexml/element/list",
        "splunkjs/mvc/simplexml/element/map",
        "splunkjs/mvc/simplexml/element/single",
        "splunkjs/mvc/simplexml/element/table",
        "splunkjs/mvc/simpleform/formutils",
        "splunkjs/mvc/simpleform/input/dropdown",
        "splunkjs/mvc/simpleform/input/radiogroup",
        "splunkjs/mvc/simpleform/input/multiselect",
        "splunkjs/mvc/simpleform/input/checkboxgroup",
        "splunkjs/mvc/simpleform/input/text",
        "splunkjs/mvc/simpleform/input/timerange",
        "splunkjs/mvc/simpleform/input/submit",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/savedsearchmanager",
        "splunkjs/mvc/postprocessmanager",
        "splunkjs/mvc/simplexml/urltokenmodel"
        // Add comma-separated libraries and modules manually here, for example:
        // ..."splunkjs/mvc/simplexml/urltokenmodel",
        // "splunkjs/mvc/checkboxview"
        ],
        function(
            mvc,
            utils,
            TokenUtils,
            _,
            $,
            DashboardController,
            LayoutView,
            Dashboard,
            ChartElement,
            EventElement,
            HtmlElement,
            ListElement,
            MapElement,
            SingleElement,
            TableElement,
            FormUtils,
            DropdownInput,
            RadioGroupInput,
            MultiSelectInput,
            CheckboxGroupInput,
            TextInput,
            TimeRangeInput,
            SubmitButton,
            SearchManager,
            SavedSearchManager,
            PostProcessManager,
            UrlTokenModel
    
            // Add comma-separated parameter names here, for example: 
            // ...UrlTokenModel, 
            // CheckboxView
            ) {
    

    Add a requirement for the view and a corresponding function parameter as follows:

    require([
        "splunkjs/mvc",
        "splunkjs/mvc/utils",
        "splunkjs/mvc/tokenutils",
        "underscore",
        "jquery",
        "splunkjs/mvc/simplexml",
        "splunkjs/mvc/layoutview",
        "splunkjs/mvc/simplexml/dashboardview",
        "splunkjs/mvc/simplexml/element/chart",
        "splunkjs/mvc/simplexml/element/event",
        "splunkjs/mvc/simplexml/element/html",
        "splunkjs/mvc/simplexml/element/list",
        "splunkjs/mvc/simplexml/element/map",
        "splunkjs/mvc/simplexml/element/single",
        "splunkjs/mvc/simplexml/element/table",
        "splunkjs/mvc/simpleform/formutils",
        "splunkjs/mvc/simpleform/input/dropdown",
        "splunkjs/mvc/simpleform/input/radiogroup",
        "splunkjs/mvc/simpleform/input/multiselect",
        "splunkjs/mvc/simpleform/input/checkboxgroup",
        "splunkjs/mvc/simpleform/input/text",
        "splunkjs/mvc/simpleform/input/timerange",
        "splunkjs/mvc/simpleform/input/submit",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/savedsearchmanager",
        "splunkjs/mvc/postprocessmanager",
        "splunkjs/mvc/simplexml/urltokenmodel",
        "REPLACE WITH LIBRARY PATH"
        ],
        function(
            mvc,
            utils,
            TokenUtils,
            _,
            $,
            DashboardController,
            LayoutView,
            Dashboard,
            ChartElement,
            EventElement,
            HtmlElement,
            ListElement,
            MapElement,
            SingleElement,
            TableElement,
            FormUtils,
            DropdownInput,
            RadioGroupInput,
            MultiSelectInput,
            CheckboxGroupInput,
            TextInput,
            TimeRangeInput,
            SubmitButton,
            SearchManager,
            SavedSearchManager,
            PostProcessManager,
            UrlTokenModel,
            REPLACE WITH VAR NAME
        ) {
    

    For the path to use, see the Splunk Web Framework Component Reference. For example, to add a chart, the path would be "splunkjs/mvc/chart".

  4. To add a code block for the view, find the comment that starts with "// VIEWS:". It's not absolutely necessary to organize your code blocks the same as the auto-generated JavaScript, but it helps to keep things tidy.
  5. Add a block using this pattern:

    var REPLACE_ID = new ViewName({
        "id": "REPLACE_ID",
        "managerid": "REPLACE_SEARCHID",
        "el": $('#REPLACE_ID')
    }, {tokens: true}).render();
    

    Replace these variables for the required properties:

    • ViewName: Replace this with the same variable you created in step 2 if you added one manually, or one of the properties if the view is included automatically (such as ChartElement).
    • REPLACE_ID: Provide a unique ID for this view. Use the same value for all instances.
    • REPLACE_SEARCHID: Provide the ID of the related search, if appropriate.

    For example, to add a new chart, you could add a block like this:

    var mynewchart = new ChartElement({
        "id": "mynewchart",
        "managerid": "mysearch",
        "type": "pie",
        "el": $('#mynewchart')
    }, {tokens: true}).render();
    
  6. To add the view to the layout, add an HTML element to the main body of the page, using the same ID as you specified for the el property in the view's code block.
  7. For example, in the simplest case, you could add this to the page under the <body> tag, where the view's ID is "mynewview":

    <p id="mynewview"/>
    

    Or, if you are preserving the Splunk styles of the original dashboard, you could add a new row to an existing dashboard by inserting this code within the closing tag of the dashboard container, as follows:

    <div class="dashboard-body container-fluid main-section-body" data-role="main">
    ...
        <!-- A new Nth row -->
        <div class="dashboard-row dashboard-rowN">
            <div class="dashboard-cell" style="width: 100%;">
                <div class="dashboard-panel clearfix">
                    <div class="panel-element-row">
                        <div class="dashboard-element chart" id="mynewview" style="width: 100%">
                            <div class="panel-head">
                                <h3>New View</h3>
                            </div>
                            <div class="panel-body"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    ...
    </div>