Custom visualizations in SplunkJS

Custom visualization components registered with the system are accessible from SplunkJS.

Visualizations published in an app can be used in SplunkJS dashboard extensions and SplunkJS pages. Apps can use their own visualizations in SplunkJS as well as visualizations from other installed apps. Custom visualizations that are built in the Splunk platform can be reused only within a Splunk software environment.

Access and instantiate a visualization

Here are the steps for accessing and instantiating a visualization from a SplunkJS page.

  1. Require the visualization registry, splunkjs/mvc/visualizationregistry.
  2. Call visualizationregistry.getVisualizer(<app_name>, <visualization_name>). Use the name of the app that contains the visualization and the visualization name. The function returns a constructor.
  3. Use the constructor to instantiate the visualization. Pass it an id, managerid, and an el.

Example

This example SplunkJS page instantiates the customViz visualization from an app called viz_sample_app. The visualization renders in a div with the id content. 

require([
    'jquery',
    'splunkjs/ready!',
    'splunkjs/mvc/visualizationregistry',
    'splunkjs/mvc/searchmanager'
    ],
    function($, mvc, VisualizationRegistry, SearchManager){
 
        var customViz = VisualizationRegistry.getVisualizer('viz_sample_app', 'customViz');
 
        var mainManager = new SearchManager({
            id: 'mainManager',
            search: 'index = _internal | stats count'
        });
 
         var myViz = new customViz({
            id: 'myViz',
            managerid: 'mainManager',
            el: $('#content')
        }).render();
});