Example: Basic dashboard using a Simple XML extension

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

[example]

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. Restart Splunk.
  4. Open Splunk Web and view the dashboard in your app. For example, to view examplename in mysplunkapp, go to http://<localhost:port>/app/mysplunkapp/examplename.

example_basicpage.xml

<dashboard script="example_basicpage.js">
  <label>Basic example</label>
  <row>
    <panel>
      <html>
        <h3>A chart and an events viewer displaying results of a search</h3>
        <div id="mychart"></div>
        <div id="myeventsviewer"></div>
      </html>
    </panel>
  </row>
</dashboard>

example_basicpage.js

require([
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/chartview",
    "splunkjs/mvc/eventsviewerview",
    "splunkjs/mvc/simplexml/ready!"
], function(
    SearchManager,
    ChartView, 
    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();
});