Example: Drilldown properties using JavaScript in a template

This example uses JavaScript to show the result of setting different combinations of drilldown properties for the views that allow drilldown actions.


To use this code save it as an HTML file under an existing app in $SPLUNK_HOME/etc/apps/app_name/django/app_name/templates. 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. Then, view the page in Splunk. For example, to view mypage.html in mysplunkapp, go to http://localhost:8000/dj/mysplunkapp/mypage. For more about creating an app, see How to create a Web Framework app using SplunkJS Stack.

{% extends "splunkdj:base_with_app_bar.html" %}

{% load splunkmvc %}

{% block title %}Drilldown properties (JavaScript){% endblock title %}

{% block css %}
        .main-area {
            padding: 30px;
{% endblock css %}

{% block content %}
    <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>

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

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

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

    <h4>Disable redirect and display map-click info in the console:</h4>
    <div id="mymap"></div>
{% endblock content%}

{% block js %}
    var deps = [
    require(deps, function(mvc) {
        // Load individual components
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var PostProcessManager = require("splunkjs/mvc/postprocessmanager");
        var EventsViewer = require("splunkjs/mvc/eventsviewerview");
        var ChartView = require("splunkjs/mvc/chartview");
        var TableView = require("splunkjs/mvc/tableview");
        var SplunkMapView = require("splunkjs/mvc/splunkmapview");

        // 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
        myeventsviewer = new EventsViewer({
            id: "example-eventsviewer",
            managerid: "main-search",
            type: "raw",
            "raw.drilldown": "inner",
            count: 3,
            el: $("#myeventsviewer")

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

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

        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.count, " at lat: ", e.data.latitude, ", long:", e.data.longitude);

{% endblock js %}