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.

[example]

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 %}
    <style>
        .main-area {
            padding: 30px;
        }
    </style>
{% endblock css %}

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

    <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>
</div>
{% endblock content%}

{% block js %}
<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/postprocessmanager",
        "splunkjs/mvc/eventsviewerview",
        "splunkjs/mvc/chartview",
        "splunkjs/mvc/tableview",
        "splunkjs/mvc/splunkmapview"
    ];
    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")
        }).render();

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

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

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

        // 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
            e.preventDefault();

            // 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);
        });

    });
</script>
{% endblock js %}