How to add a Splunk view using SplunkJS Stack

The Splunk Web Framework provides a variety of Splunk views you can use to display and interact with searches. For a list of Splunk views along with their library paths, properties, methods, and events, see the Splunk Web Framework Component Reference.

Instantiate and display a view

When you add a view programmatically, you must specify a unique ID for the view, along with other properties. Then, bind the view to a search manager by setting the view's managerid property to the value of the search manager id property. Any time the search manager changes (for example, the search changes and is run again), the view is updated. Multiple views can be bound to the same search manager.

The example below shows how to instantiate a Chart view along with its search manager in JavaScript. To bind the chart to the search, set the chart view's managerid property to the value of the search manager id property, "mysearch", as follows:

    require([
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/chartview",
        "splunkjs/mvc/simplexml/ready!"
    ], function(
        SearchManager,
        ChartView 
    ) {

        // Create a search manager
        var mysearch = new SearchManager({
            id: "mysearch",
            preview: true,
            search: "index=_internal | head 100 | stats count by sourcetype" 
        });

        // Create a chart view that is bound to the search manager
        var mychart = new ChartView({
            id: "mychart",
            managerid: "mysearch",
            type: "pie",
            el: $("#chart1")
        }).render();
    });

To display the view, use a <div> tag in your HTML layout indicating where to display the view on the page. This tag is a jQuery selector that corresponds to a location (element ID), which is passed in with the view's el property. Calling the render() method displays the view on the page.

    <h3>This chart displays the results of a search</h3>
    <div id="chart1"></div>

Set and change properties

Set properties when you instantiate the view. In the previous example, the type: "pie" property specifies the type of Chart view to display. You can also change properties after the view has been created. This next example shows how to change the properties of the Chart view that was created above (using the possible chart and legend properties):

    ...
        var myChartView = splunkjs.mvc.Components.get("mychart");

        myChartView.settings.set({
            "charting.axisTitleX.text": "My x-axis",
            "charting.legend.placement": "top"
        });
    ...

Access visualizations created in Simple XML

You can programmatically change properties for a visualization that was created using the Dashboard Editor in Simple XML. You must require the "splunkjs/mvc" library.

The example below shows the Simple XML code for an Events panel, an id property you must provide, and the JavaScript code for an extension that shows how to access and set the properties for the Events panel using this id.

Simple XML (dashboard panel)

  <row>
    <panel>
      <title>Events table</title>
      <event id="myevents">
          ...
    </panel>
  </row>

JavaScript (extension)

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function(mvc) {


    // Get the EventsViewer
    var myEventsViewer = mvc.Components.get('myevents');

    // Programmatically change a property in the EventsViewer
    myEventsViewer.getVisualization(function(eventsView) {
        eventsView.settings.set("count", 2);
    });

});