Intro to creating pages using the Splunk Web Framework

myfirstpage.html

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

{% block content %}
    <div id="barchart"></div>
{% endblock content%}

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

            new SearchManager({
                id: "mysearch",
                search: "index=_internal | head 1000 | stats count by sourcetype"
            });

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

            // Event handler

            mychart.on("click:chart", function (e) {
                e.preventDefault();
                console.log("Clicked chart: ", e.value);
            });
        });
    </script>
{% endblock js %}