Example: Drilldown properties using a Simple XML extension

This example uses a Simple XML extension to show the result of setting different combinations of drilldown properties for the views that allow drilldown actions.


To use this code:

  1. Save the XML file under an existing app in $SPLUNK_HOME/etc/apps/app_name/local/data/ui/views/.
  2. Save the JS file under $SPLUNK_HOME/etc/apps/app_name/appserver/static/.
  3. This example also uses search results from a sample earthquakes lookup table for the SplunkMap view, and includes lat and lon fields in the search query. To try it for yourself, download earthquakes.csv to a /lookups directory under $SPLUNK_HOME/etc/apps/your_app_name.
  4. Restart Splunk.
  5. Open Splunk Web and view the dashboard in your app. For example, to view myexample in mysplunkapp, go to http://<localhost:port>/app/mysplunkapp/myexample.


<dashboard script="example_drilldown.js">
  <label>Drilldown properties</label>
            <div class="main-area">
                <p>You can set drilldown properties for the EventsViewer, Chart, Table, and SplunkMap views. This example shows different ways to set these properties in JavaScript.</p>

            <h2>EVENTS: Change drilldown to "inner", allow redirect to Search:</h2>
            <div id="myeventsviewer"></div>

            <h2>CHART: Disable redirect using the <tt>drilldownRedirect</tt> property,
            display chart-click and legend-click info in the console:</h2>
            <div id="mychart"></div>

            <h2>TABLE: Enable drilldown for table cells, disable redirect using the <tt>preventDefault</tt>
            method, and display table-click info in the console:</h2>
            <div id="mytable"></div>

            <h2>MAP: Disable redirect and display map-click info in the console:</h2>
            <div id="mymap"></div>


], function(
) {

    // Define the search managers and postprocess search managers
    var searchmain = new SearchManager({
        id: "main-search",
        search: "index=_internal | head 100 | fields *",
        preview: true,
        cache: true

    var searchsub1 = new PostProcessManager({
        id: "subsearch1",
        managerid: "main-search",
        search: " | stats count by sourcetype"

    var searchsub2 = new PostProcessManager({
        id: "subsearch2",
        managerid: "main-search",
        search: " | fields sourcetype, source, host"

    var searchmap = new SearchManager({
        id: "map-search",
        search: "| inputlookup earthquakes.csv | rename Lat as lat Lon as lon | geostats count",
        preview: true,
        cache: true

    // Set up the views
    var myeventsviewer = new EventsViewer({
        id: "example-eventsviewer",
        managerid: "main-search",
        type: "raw",
        "raw.drilldown": "inner",
        count: 3,
        el: $("#myeventsviewer")

    var mychart = new ChartView({
        id: "example-chart",
        managerid: "subsearch1",
        type: "bar",
        drilldown: "all",
        drilldownRedirect: false,
        el: $("#mychart")

    var mytable = new TableView({
        id: "example-table",
        managerid: "subsearch2",
        pageSize: 3,
        wrap: true,
        drilldown: "cell",
        el: $("#mytable")

    var mymap = new SplunkMapView({
        id: "example-splunkmap",
        managerid: "map-search",
        drilldownRedirect: false,
        el: $("#mymap")

    // Set up event handlers to customize drilldown behavior
    mychart.on("click:legend", function(e) {
        // Displays a data object in the console--the legend text
        console.log("Clicked the chart legend: ", e.name2);

    mychart.on("click:chart", function(e) {
        // Displays a data object in the console
        console.log("Clicked the chart: ", e.value);

    mytable.on("click", function(e) {
        // Bypass the default behavior

        // Displays a data object in the console
        console.log("Clicked the table:", e.data);

    mymap.on("click:marker", function(e) {
        // Displays a data object in the console
        console.log("Clicked the map: ", e.data['row.count'] + " earthquakes near (" + e.data['row.latitude'] + ", " +e .data['row.longitude'] + ")");