Example: Basic template using JavaScript

This example shows how to use JavaScript to create a basic template with a chart and an events viewer that displays results from a search.

[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, 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 %}Basic template example (JavaScript){% endblock title %}

{% block content %}
    <h4>A chart and an events viewer displaying results of a search</h4>
    <div id="mychart"></div>
    <div id="myeventsviewer"></div>
{% endblock content %}

{% block js %}    
<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/chartview",
        "splunkjs/mvc/eventsviewerview"
    ];
    require(deps, function(mvc) {
        // Load individual components
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var ChartView = require("splunkjs/mvc/chartview");
        var EventsViewerView = require("splunkjs/mvc/eventsviewerview");

        // Instantiate the views and search manager
        var mysearch = new SearchManager({
            id: "search1",
            preview: true,
            cache: true,
            status_buckets: 300,
            search: "index=_internal | head 1000 | stats count by sourcetype" 
        });

        var mychart = new ChartView ({
            id: "chart1",
            managerid: "search1",
            type: "bar",
            el: $("#mychart")
        }).render();

        var myeventsviewer = new EventsViewerView ({
            id: "eviewer1",
            managerid: "search1",
            el: $("#myeventsviewer")
        }).render();
    });
</script>
{% endblock js %}