Simple XML Rendering

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<html>
        <ul id="tabs" class="nav nav-tabs">
         <li>
           <a href="#tech_app" class="toggle-tab" data-toggle="tab" data-elements="clientactions,activeusers,appversion,hubMem">App Availability</a>
         </li>
         <li>
           <a href="#tech_WLS" class="toggle-tab" data-toggle="tab" data-elements="zhubserver,adminserverstate,threads">WLS</a>
         </li>
         <li>
           <a href="#tech_JVM" class="toggle-tab" data-toggle="tab" data-elements="jvmtransport">JVM</a>
         </li>
         <li>
           <a href="#tech_DB" class="toggle-tab" data-toggle="tab" data-elements="dbmetrics,dbmetricsio,dbconnections,dbresponse,DBPhysReadWrite">DB</a>
         </li>
         <li>
           <a href="#tech_OS" class="toggle-tab" data-toggle="tab" data-elements="OSVMio,osload,oscpu,oscpuwait">OS Availability</a>
         </li>
         <li>
           <a href="#tech_VM" class="toggle-tab" data-toggle="tab" data-elements="freememory,freecpu,memarea">Virtual Machine</a>
         </li>
         <li>
           <a href="#tech_OVM" class="toggle-tab" data-toggle="tab" data-elements="ovmcpuram">OVM</a>
         </li>
         <li>
           <a href="#business_main" data-toggle="tab" data-elements="appversion,zhubserver,adminserverstate">Main</a>
         </li>
         <li>
           <a href="#business_secondary" data-toggle="tab" data-elements="clientactions,activeusers">Secondary</a>
         </li>
       </ul>
      </html>

CSS

#tabs{
    border-bottom: 0px;
}

#tabs > .dashboard-cell > .dashboard-panel{
    margin-bottom: 0px;
    border-bottom: 0px;
}

#element1 > .html{
    padding-left: 0px; /* This fixes some weirdness where the first tab doesn't look right due to the left part of the tab showing */
    padding-right: 0px;
    padding-top: 0px;
}

#tab_1 > .dashboard-cell > .dashboard-panel{
    border-top: 0px;
}

JavaScript

require(['jquery','underscore','splunkjs/mvc', 'bootstrap.tab', 'splunkjs/mvc/simplexml/ready!'],
                function($, _, mvc){

        /**
         * The below defines the tab handling logic.
         */

        // The normal, auto-magical Bootstrap tab processing doesn't work for us since it requires a particular
        // layout of HTML that we cannot use without converting the view entirely to simpleXML. So, we are
        // going to handle it ourselves.
        var hideTabTargets = function(){

                var tabs = $('a[data-elements]');

                // Go through each toggle tab
                for(var c = 0; c < tabs.length; c++){

                        // Hide the targets associated with the tab
                        var targets = $(tabs[c]).data("elements").split(",");

                        for(var d = 0; d < targets.length; d++){
                                $('#' + targets[d], this.$el).hide();
                        }
                }
        };

        $("ul.nav-tabs a").click(function (e) {
            e.preventDefault();
              $(this).tab('show');
        });

        var selectTab = function (e) {

                // Stop if the tabs have no elements
                if( $(e.target).data("elements") === undefined ){
                        console.warn("Yikes, the clicked tab has no elements to hide!");
                        return;
                }

                // Get the IDs that we should enable for this tab
                var toToggle = $(e.target).data("elements").split(",");

                // Hide the tab content by default
                hideTabTargets();

                // Now show this tabs toggle elements
                for(var c = 0; c < toToggle.length; c++){
                        $('#' + toToggle[c], this.$el).show();
                }

        };

        // Wire up the function to show the appropriate tab
        $('a[data-toggle="tab"]').on('shown', selectTab);

        //...