2. Build a basic dashboard

In this step, we'll build a basic dashboard with visualizations to display the sample music data, and then we'll convert the dashboard to HTML so we can customize it.

Let's build a basic dashboard:

  1. In Splunk Web, open the Music Dashboard Tutorial app from the apps list (open http://<localhost:port>/app/musicdashboardtutorial).
  2. On the navigation bar at the top of the page, click Dashboards.
  3. Click Create New Dashboard, then fill out the dashboard properties:
    • For Title, enter "Music".
    • For Permissions, click Shared in App.
  4. Click Create Dashboard.
  5. The new Music dashboard is displayed in edit mode:

    Music dashboard

    Now let's add a couple of charts and a table with searches using the inputlookup command to read from the sample music data.

  6. Click + Add Panel > New > Bar to create a bar chart:
    • For Content Title, enter "Top Artist Searches".
    • For Search String, enter:
      | inputlookup musicdata.csv | search bc_uri=/browse/search/* | top search_terms | fields - percent | rex field=search_terms mode=sed "s/\+/ /g"
    • Click Add to Dashboard.
  7. Click + Add Panel > New > Statistics Table to create a table:
    • For Content Title, enter "Top Song Downloads".
    • For Search String, enter:
      | inputlookup musicdata.csv | search bc_uri=/sync/addtolibrary* | stats count by track_name | sort count desc | table track_name count
    • Click Add to Dashboard.
  8. Click + Add Panel > New > Column to create a column chart:
    • For Content Title, enter "Top Artist Downloads".
    • For Search String, enter:
      | inputlookup musicdata.csv | search bc_uri=/sync/addtolibrary* | timechart useother=f usenull=f span=20s count by artist_name
    • Click Add to Dashboard.
  9. Close the Add Panel sidebar, then click Done.

Your dashboard should look like this:

Music dashboard

Now, let's change the layout.

  1. On the dashboard, click Edit > Edit Panels.
  2. Click and drag the middle panel to the top row next to the first chart, then click Done.
  3. Music dashboard

Now let's make some adjustments to the dashboard by setting a couple of properties for the "Top Artist Downloads" chart. We could accomplish this by using a Simple XML extension, but because we'll be doing more advanced layout modifications later in this tutorial, let's convert this dashboard to HTML and modify this code directly.

Convert the dashboard to HTML:

  1. On the dashboard, click Edit > Convert to HTML.
  2. Set the properties for the converted dashboard:
    • Change the Title to "Music".
    • For ID enter "music_html".
    • Change the permissions by clicking Shared (this keeps the HTML file in the app's folder, $SPLUNK_HOME/etc/apps/musicdashboardtutorial).
  3. Click Convert Dashboard.
  4. Let's see the HTML version of the dashboard—click View.
  5. The dashboard looks and works the same as the Simple XML version.

Now let's make an adjustment to the "Top Artist Downloads" chart to display it as a stacked chart.

  1. Open the HTML source code for the Music dashboard by doing one of the following:
    • To edit the HTML in Splunk's Source Editor, click Edit, and then click Source. When you save changes, the editor closes so you can view your changes in the dashboard.
    • To use your own text editor, open
      $SPLUNK_HOME/etc/apps/musicdashboardtutorial/local/data/ui/html/music_html.html.
      Each time you save the HTML file with changes, refresh the app's views by opening the http://<localhost:port>/debug/refresh URL in your web browser and clicking Refresh, then reload the dashboard in your browser.
  2. Find this code:
  3.         var element3 = new ChartElement({
                "id": "element3",
                "resizable": true,
                "charting.chart": "column",
                "managerid": "search3",
                "el": $('#element3')
            }, {tokens: true, tokenNamespace: "submitted"}).render();
    

    Replace it with the following, which contains two new properties:

            var element3 = new ChartElement({
                "id": "element3",
                "resizable": true,
                "charting.chart": "column",
                "charting.chart.nullValueMode": "zero",
                "charting.chart.stackMode": "stacked100",
                "managerid": "search3",
                "el": $('#element3')
            }, {tokens: true, tokenNamespace: "submitted"}).render();
    

    For more about the chart properties you can set, see the Chart Configuration Reference in the Dashboards and Visualizations manual.

  4. Save this page. If you're using your own text editor, refresh Splunk Web (open http://<localhost:port>/debug/refresh in your web browser and click Refresh), then reload the dashboard (open http://<localhost:port>/app/musicdashboardtutorial/music).
  5. Music dashboard

    Tip If you don't see changes when you reload modified dashboards, you might need to clear your browser cache. For example, in Google Chrome you can use the developer console DevTools and select the Disable cache (while DevTools is open) option to always clear the cache. For more, see About file precedence and caching.

Continue to 3. Add a jQuery UI Accordion.