Add views from the Web Framework Toolkit

In addition to the Splunk views that are included in the Web Framework, you can also use views that are provided in the Splunk Web Framework Toolkit. The Toolkit is a Splunk app that contains reusable views based on open-source libraries. The Toolkit also includes code examples and templates to help you get started.

To use the Toolkit, download the app here and install the app file:

  1. In Splunk Web, click the Gear icon next to Apps.
  2. Click Install app from file and follow the onscreen instructions.

Once installed, open the Web Framework Toolkit app in Splunk Web. Under the Toolkit Components menu, you'll find a list of chart views with additional usage information.

Adding a Toolkit view to an existing app

Here is an example that shows how to add a few Toolkit views to an existing app.

The following code shows HTML and JavaScript code that contains a Splunk bar chart and pie chart:

HTML, no layout

<!-- Search 1 -->
<h3>Search 1</h3>
<h3>Bar chart</h3>
<div id="mybarchart"></div>

<!-- TODO: Add a Sankey and Sunburst chart here -->

<!-- Search 2 -->
<h3>Search 2</h3>
<h3>Pie chart</h3>
<div id="mypiechart"></div>

<!-- TODO: Add a couple of Bubble charts here -->

JavaScript

    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/chartview"
    ];
    require(deps, function(mvc) {
        // Load individual components
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var ChartView = require("splunkjs/mvc/chartview");

        // Create search managers and views
        var mysearch1 = new SearchManager({
            id: "example-search1",
            preview: true,
            cache: true,
            search: "index=_internal | head 100 | stats count by sourcetype status" 
        });

        var mysearch2 = new SearchManager({
            id: "example-search2",
            preview: true,
            cache: true,
            search: "index=_internal | head 5000 | stats count(sourcetype) by file" 
        });

        var mybarchart = new ChartView ({
            id: "example-chart-bar",
            managerid: "example-search1",
            type: "bar",
            el: $("#mybarchart")
        }).render();

        var mypiechart = new ChartView ({
            id: "example-chart-pie",
            managerid: "example-search2",
            type: "pie",
            el: $("#mypiechart")
        }).render();

        // TODO: Add Toolkit charts here

    });

For this example, copy the Toolkit libraries to your own app: copy the contents of $SPLUNK_HOME/etc/apps/splunk_wftoolkit/appserver/static directory to your app's $SPLUNK_HOME/etc/apps/your_app_name/appserver/static/ directory. The updated code below shows how to load and add three chart views from the Toolkit: Sankey, Sunburst, and Bubble. (The Bubble chart appears twice to demonstrate different settings.)

    Note  Remember to replace the your_app_name variable with your app's name.

The code below also shows HTML with and without the dashboard styles layout.

HTML, no layout

<!-- Search 1 -->
<h3>Search 1</h3>
<h3>Bar chart</h3>
<div id="mybarchart"></div>

<!-- Add a sankey and sunburst chart here -->
<h3>Sankey chart</h3>
<div id="mysankeychart"></div>

<h3>Sunburst chart</h3>
<div id="mysunburstchart"></div>

<!-- Search 2 -->
<h3>Search 2</h3>
<h3>Pie chart</h3>
<div id="mypiechart"></div>

<!-- Add a couple of bubble charts here -->
<h3>Bubble chart (set valueField to count)</h3>
<div id="mybubblechart1"></div>

<h3>Bubble chart (set valueField and categoryField to count)</h3>
<div id="mybubblechart2"></div>

HTML, with dashboard styles layout

    <style>
        #mypiechart {
            height: 250px;
        }
        /*Page styles for the Toolkit charts*/
        #mysankeychart, #mysunburstchart, #mybubblechart1, #mybubblechart2 {
            height: 250px;
        }
    </style>

<div class="dashboard-body container-fluid main-section-body">
    <!-- Search 1 -->
    <div class="row">
        <div class="dashboard-header">
            <h3>Search 1</h3>
        </div>
    </div>

    <div class="dashboard-row">
        <div class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Bar chart</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mybarchart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add a sankey and sunburst chart here -->
    <div class="dashboard-row">
        <div class="dashboard-cell" style="width: 70%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Sankey chart</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mysankeychart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-cell" style="width: 30%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Sunburst chart</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mysunburstchart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search 2 -->
    <div class="row">
        <div class="dashboard-header clearfix">
            <h3>Search 2</h3>
        </div>
    </div>

    <div class="dashboard-row">
        <div class="dashboard-cell" style="width: 33%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Pie chart</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mypiechart"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add a couple of bubble charts here -->
        <div class="dashboard-cell" style="width: 34%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Bubble chart (set valueField to count)</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mybubblechart1"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-cell" style="width: 33%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Bubble chart (set valueField and categoryField to count)</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mybubblechart2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 

JavaScript

    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/chartview",

        // Assumes the Toolkit's /appserver/static folder is copied to your app:
        "jquery",
        "your_app_name/components/sankey/sankey",
        "your_app_name/components/bubblechart/bubblechart",
        "your_app_name/components/sunburst/sunburst"
    ];
    require(deps, function(mvc) {
        // Load individual components
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var ChartView = require("splunkjs/mvc/chartview");

        var SankeyChart = require("your_app_name/components/sankey/sankey");
        var BubbleChart = require("your_app_name/components/bubblechart/bubblechart");
        var SunburstChart = require("your_app_name/components/sunburst/sunburst");


        // Create search managers and views

        var mysearch1 = new SearchManager({
            id: "example-search1",
            preview: true,
            cache: true,
            search: "index=_internal | head 100 | stats count by sourcetype status" 
        });

        var mysearch2 = new SearchManager({
            id: "example-search2",
            preview: true,
            cache: true,
            search: "index=_internal | head 5000 | stats count(sourcetype) by file" 
        });

        var mybarchart = new ChartView ({
            id: "example-chart-bar",
            managerid: "example-search1",
            type: "bar",
            el: $("#mybarchart")
        }).render();

        var mypiechart = new ChartView ({
            id: "example-chart-pie",
            managerid: "example-search2",
            type: "pie",
            el: $("#mypiechart")
        }).render();

        // Create Toolkit charts here
        var mysankeychart = new SankeyChart({
            id: "example-chart-sankey",
            managerid: "example-search1",
            el: $("#mysankeychart")
        }).render();

        var mysunburstchart = new SunburstChart({
            id: "example-chart-sunburst",
            managerid: "example-search1",
            el: $("#mysunburstchart")
        }).render();

        var mybubblechart1 = new BubbleChart({
            id: "example-chart-bubble1",
            managerid: "example-search2",
            valueField: "count(sourcetype)", // Use the count for bubble values
            el: $("#mybubblechart1")
        }).render();

        var mybubblechart2 = new BubbleChart({
            id: "example-chart-bubble2",
            managerid: "example-search2",
            valueField: "count(sourcetype)", // Use the count for bubble values
            categoryField: "count(sourcetype)", // Group (color) bubbles by the count 
            el: $("#mybubblechart2")
        }).render();

    });