Code for the custom Splunk view tutorial

Here's the final version of the custom_view.xml dashboard:

 <dashboard script="customview.js">

  <label>Custom View</label>

      <h4>How many artists do you want to show? (1-21)</h4>
      <div id="txtNum"></div>

      <h2>Downloads per Artist</h2>
      <div id="mycustomview1"></div>

      <h2>Searches on Artist</h2>
      <div id="mycustomview2"></div>


Here's the final version of the customview.js extension:

/* customview.js */

], function( 
    // Keep these variables in the same order as the libraries above:
) {

    // Create a text input for the number of artists to show
    var myTextBox = new TextInputView({
        id: "txtNum",
        value: mvc.tokenSafe("$headNum$"),
        default: "10",
        el: $("#txtNum")

    // Set up the search managers

    // Downloads per artist
    var mySearch1 = new SearchManager({
        id: "mysearch1",
        preview: true,
        cache: true,
        search: mvc.tokenSafe("| inputlookup musicdata.csv | search bc_uri=/sync/addtolibrary* | stats count by artist_name | table artist_name, count | head $headNum$")

    // Searches on artist
    var mySearch2 = new SearchManager({
        id: "mysearch2",
        cache: true,
        search: mvc.tokenSafe("| inputlookup musicdata.csv | search bc_uri=/browse/search* | stats count by search_terms | table search_terms, count | head $headNum$")

    // Create the custom views for each search

    // Custom view showing search1
    var customView1 = new DemoView({
        id: "mycustomview1",
        managerid: "mysearch1",
        el: $("#mycustomview1")

    // Custom view showing search2
    var customView2 = new DemoView({
        id: "mycustomview2",
        managerid: "mysearch2",
        el: $("#mycustomview2")


Here's the final version of the demoview.js class:

/* demoview.js */

define(function(require, exports, module){
    // Base class for custom views
    var SimpleSplunkView = require('splunkjs/mvc/simplesplunkview');

    // Require Underscore.js to work with search results
    var _ = require("underscore"); 
    // Require the Chart.js library for the radar chart
    var chart = require("/static/app/customviewtutorial/chart.js");

    // Define the custom view class
    var DemoView = SimpleSplunkView.extend({

        className: "demoview",

        // Define our initial values, set the type of results to return
        options: {
            maxDload: 0,     // Chart scale
            mychartid: "",   // ID for the chart
            data: "results"  // Results type

        // Override this method to configure the view
        createView: function() {
            // Create a unique chart ID based on the view's unique ID
            mychartid = + "-radar";
            this.$el.html('<canvas id="' + mychartid + '" width="700" height="700"></canvas>');
            return this;

        // Override this method to format the data for the radar chart
        formatData: function(data) {

            // The data object contains the search results
            var chartLabels=[];
            var chartData=[];
            maxDload = 0;

            // Populate the chart (labels, data) with the search result data
            _.each(data, function(row, i){
                chartLabels[i] = row[0];
                chartData[i] = parseInt(row[1]) + 1;
                // Determine what the top download number is to set the chart scale
                if (chartData[i] > maxDload) {
                    maxDload = chartData[i];

            // Set the radar chart data
            var radarChartData = {
                labels: chartLabels,
                datasets: [
                        fillColor: "rgba(151,187,205,0.5)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        data: chartData

            return radarChartData;

        // Override this method to put the Splunk data into the view
        updateView: function(viz, radarData) {
            // Set radar chart options
            var radarOptions = {
                scaleOverride: true,
                scaleSteps: maxDload,
                scaleStepWidth: 1,
                scaleStartValue: 0,
                scaleShowLabels: true,
                scaleShowLabelBackdrop: false,

            // Create the radar chart
            var myRadar = new Chart(document.getElementById(mychartid).getContext("2d")).Radar(radarData, radarOptions);

    return DemoView;