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>

  <row>
    <html>
      <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>
    </html>
  </row>

</dashboard>

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

/* customview.js */

require([
    "splunkjs/mvc",
    "/static/app/customviewtutorial/demoview.js",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/textinputview",
    "splunkjs/mvc/simplexml/ready!"
], function( 
    // Keep these variables in the same order as the libraries above:
    mvc,
    DemoView,
    SearchManager, 
    TextInputView
) {

    // 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")
    }).render();


    // 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")
    }).render();

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

});

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 = this.name + "-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;

});