4: Modify visualizations

Our current HTML dashboard has a few problems: first, without the Submit button, the first search doesn't run. But we can modify the search so that it runs automatically without having to click Submit. And, while we're at it, let's remove the x button from the dropdown list, and disable drilldown behavior for the pie chart so that clicking it doesn't redirect away from the page.

  1. In the HTML file, find this code in the SEARCH MANAGERS section:
  2. var search1 = new SearchManager({
        "id": "search1",
        "cancelOnUnload": true,
        "status_buckets": 0,
        "search": "index=_internal sourcetype=$sourcetype$ | head $headcount$",
        "latest_time": "$latest$",
        "earliest_time": "$earliest$",
        "app": utils.getCurrentApp(),
        "auto_cancel": 90,
        "preview": true,
        "runWhenTimeIsUndefined": false
    }, {tokens: true, tokenNamespace: "submitted"});
    
    var search2 = new SearchManager({
        "id": "search2",
        "cancelOnUnload": true,
        "status_buckets": 0,
        "search": "index=_internal | stats count by sourcetype",
        "latest_time": "$latest$",
        "earliest_time": "$earliest$",
        "app": utils.getCurrentApp(),
        "auto_cancel": 90,
        "preview": true,
        "runWhenTimeIsUndefined": false
    }, {tokens: true, tokenNamespace: "submitted"});
    

    The first search corresponds to the result table, which has a search query that takes two token values: $headcount$ as the value of the dropdown choice for the number of results to display, and $sourcetype$ as the value of the radio button choice for the source type to search on.

    The second search corresponds to the pie chart.

    These search managers are currently using the submitted token model, which means that when a token value changes, the new values are not passed to the search until they are deliberately submitted (which happens when the Submit button is clicked). Instead, we can use the default token model, which submits new token values immediately when they change. For more about tokens, see Bind data using tokens.

  3. Change the last line of code in both search managers as follows to use the default token model―we just need to remove tokenNamespace: "submitted":
  4. }, {tokens: true});
    
  5. Now, to remove the x button from the dropdown list, find this code:
  6. var input1 = new DropdownInput({
        "id": "input1",
        "choices": [
        {"value": "1", "label": "1"},
        {"value": "2", "label": "2"},
        {"value": "3", "label": "3"}
        ],
        "selectFirstChoice": false,
        "default": "1",
        "showClearButton": true,
        "value": "$form.headcount$",
        "el": $('#input1')
    }, {tokens: true}).render();
    

    DropdownInput is a wrapper around the Dropdown view. If you look at the reference for the Dropdown view, you'll see that the "showClearButton" property is responsible for displaying that x button. Set the property to false to hide the button as follows:

        "showClearButton": false,
    
  7. To disable drilldown functionality on the pie chart, find this code:
  8. var element2 = new ChartElement({
        "id": "element2",
        "resizable": true,
        "charting.chart": "pie",
        "managerid": "search2",
        "el": $('#element2')
    }, {tokens: true, tokenNamespace: "submitted"}).render();
    

    ChartElement is a wrapper around the Chart view. If you look at the reference for the Chart view, you'll see that you can set charting.* properties, which are described in Chart Configuration Reference. The charting.drilldown property is enabled by default. To turn it off, add this property to the code and set it to "none" as follows:

    var element2 = new ChartElement({
        "id": "element2",
        "resizable": true,
        "charting.chart": "pie",
        "charting.drilldown": "none",
        "managerid": "search2",
        "el": $('#element2')
    }, {tokens: true, tokenNamespace: "submitted"}).render();
    

    After you save the page, refresh Splunk Web, and reload the dashboard, here's the result:

    HTML dashboard

    The search for the result table now runs without needing to click Submit―and it runs immediately when the page is loaded.

You can modify properties of other visualizations, too. See the Splunk Web Framework Component Reference to see what you can set.

Continue to 5: Replace radio buttons with checkboxes.