Dashboards & Visualizations

HTML: How to create multiple charts in a single panel on the same row?

jedatt01
Builder

How can I use HTML to put 4 radial gauges on the same panel in the same row? I've removed the from 3 of my gauges below, but still not working please help!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ISE Enterprise Dashboard HTML | Splunk</title>
    <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/pages/dashboard-simple-bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
    <!--[if IE 7]><link rel="stylesheet" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/sprites-ie7.css" /><![endif]-->
</head>
<body class="simplexml preload">

<!-- 
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system. 
-->

<div class="header">
    <div id="placeholder-splunk-bar">
        <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk &gt; listen to your data">splunk<strong>&gt;</strong></a>
    </div>
    <div id="placeholder-app-bar"></div>
</div>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>ISE Enterprise Dashboard HTML</h2>
    </div>
    <div class="dashboard-row dashboard-row1">
        <div class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel clearfix">                
                <div class="panel-element-row">
                    <div class="dashboard-element chart" id="element1" style="width: 100%">
                        <div class="panel-head">
                            <h3>Passed Authentications %</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel clearfix">                
                <div class="panel-element-row">
                    <div class="dashboard-element chart" id="element2" style="width: 25%">
                        <div class="panel-head">
                            <h3>CPU</h3>
                        </div>
                    </div>
                    <div class="dashboard-element chart" id="element3" style="width: 25%">
                        <div class="panel-head">
                            <h3>MEMORY</h3>
                        </div>
                    </div>
                    <div class="dashboard-element chart" id="element4" style="width: 25%">
                        <div class="panel-head">
                            <h3>DISK SPACE</h3>
                        </div>
                    </div>
                    <div class="dashboard-element chart" id="element5" style="width: 25%">
                        <div class="panel-head">
                            <h3>DISK I/O</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer"></div>

<!-- 
END LAYOUT
-->

<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/build/simplexml.min/config.js"></script>
<script type="text/javascript">
require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0 // Disable require.js load timeout
});

//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
// 
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/utils",
    "splunkjs/mvc/tokenutils",
    "underscore",
    "jquery",
    "splunkjs/mvc/simplexml",
    "splunkjs/mvc/headerview",
    "splunkjs/mvc/footerview",
    "splunkjs/mvc/simplexml/dashboard",
    "splunkjs/mvc/simplexml/element/chart",
    "splunkjs/mvc/simplexml/element/event",
    "splunkjs/mvc/simplexml/element/html",
    "splunkjs/mvc/simplexml/element/list",
    "splunkjs/mvc/simplexml/element/map",
    "splunkjs/mvc/simplexml/element/single",
    "splunkjs/mvc/simplexml/element/table",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/text",
    "splunkjs/mvc/simpleform/input/timerange",
    "splunkjs/mvc/simpleform/input/submit",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/savedsearchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/simplexml/urltokenmodel"
    // Add comma-separated libraries and modules manually here, for example:
    // ..."splunkjs/mvc/simplexml/urltokenmodel",
    // "splunkjs/mvc/checkboxview"
    ],
    function(
        mvc,
        utils,
        TokenUtils,
        _,
        $,
        DashboardController,
        HeaderView,
        FooterView,
        Dashboard,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        DropdownInput,
        RadioGroupInput,
        TextInput,
        TimeRangeInput,
        SubmitButton,
        SearchManager,
        SavedSearchManager,
        PostProcessManager,
        UrlTokenModel

        // Add comma-separated parameter names here, for example: 
        // ...UrlTokenModel, 
        // CheckboxView
        ) {



        var pageLoading = true;


        // 
        // TOKENS
        //

        // Create token namespaces
        var urlTokenModel = new UrlTokenModel();
        mvc.Components.registerInstance('url', urlTokenModel);
        var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
        var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});

        urlTokenModel.on('url:navigate', function() {
            defaultTokenModel.set(urlTokenModel.toJSON());
            if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
                submitTokens();
            } else {
                submittedTokenModel.clear();
            }
        });

        // Initialize tokens
        defaultTokenModel.set(urlTokenModel.toJSON());

        var defaultUpdate = {};

        var submitTokens = function() {
            submitTokensSoon(pageLoading);
        };

        var submitTokensSoon = _.debounce(function(replaceState) {
            submittedTokenModel.set(defaultTokenModel.toJSON());
            urlTokenModel.saveOnlyWithPrefix('form\\.', defaultTokenModel.toJSON(), {
                replaceState: replaceState
            });
        });


        //
        // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "latest_time": "now",
            "search": "index=ise tag=ise_prd MESSAGE_CLASS=\"Failed-Attempt\" OR MESSAGE_CLASS=\"Passed-Authentication\" NOT tag=probe  NOT tag=diagnostics | dedup host syslog_id _time | stats count(eval(_raw)) as Total, count(eval(MESSAGE_CLASS=\"Passed-Authentication\")) as Passed | eval percent=((Passed/Total)*100) | table percent",
            "earliest_time": "-15m",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true
        }, {tokens: true, tokenNamespace: "submitted"});

        var search2 = new SearchManager({
            "id": "search2",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "latest_time": "now",
            "search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time  | eval cpu=tonumber(substr(SysStatsUtilizationCpu,0,4)) | stats avg(cpu) AS CPU",
            "earliest_time": "-15m",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true
        }, {tokens: true, tokenNamespace: "submitted"});

        var search3 = new SearchManager({
            "id": "search3",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "latest_time": "now",
            "search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval memory=tonumber(substr(SysStatsUtilizationMemory,0,4)) | stats avg(memory) As MEMORY",
            "earliest_time": "-15m",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true
        }, {tokens: true, tokenNamespace: "submitted"});

        var search4 = new SearchManager({
            "id": "search4",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "latest_time": "now",
            "search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time  | eval diskspace=tonumber(substr(SysStatsUtilizationDiskSpace,0,4)) | stats avg(diskspace) AS DISKSPACE",
            "earliest_time": "-15m",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true
        }, {tokens: true, tokenNamespace: "submitted"});

        var search5 = new SearchManager({
            "id": "search5",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "latest_time": "now",
            "search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval diskio=tonumber(substr(SysStatsUtilizationDiskIO,0,4)) | stats avg(diskio) AS DISKIO",
            "earliest_time": "-15m",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true
        }, {tokens: true, tokenNamespace: "submitted"});



        //
        // SPLUNK HEADER AND FOOTER
        //

        new HeaderView({
            id: 'header',
            section: 'dashboards',
            el: $('.header'),
            acceleratedAppNav: true
        }, {tokens: true}).render();

        new FooterView({
            id: 'footer',
            el: $('.footer')
        }, {tokens: true}).render();


        //
        // DASHBOARD EDITOR
        //

        new Dashboard({
            id: 'dashboard',
            el: $('.dashboard-body')
        }, {tokens: true}).render();


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new ChartElement({
            "id": "element1",
            "charting.chart.rangeValues": "[\"0\",\"45\",\"65\",\"100\"]",
            "charting.axisTitleY.visibility": "visible",
            "charting.axisTitleX.visibility": "visible",
            "charting.chart.style": "minimal",
            "charting.layout.splitSeries": "0",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart": "markerGauge",
            "charting.chart.stackMode": "default",
            "charting.axisX.scale": "linear",
            "charting.legend.placement": "right",
            "charting.drilldown": "all",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "resizable": true,
            "charting.gaugeColors": "[0xd13b3b,0xebe42d,0x7e9f44]",
            "charting.axisY.scale": "linear",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true}).render();

        var element2 = new ChartElement({
            "id": "element2",
            "charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
            "charting.axisTitleY.visibility": "visible",
            "charting.axisTitleX.visibility": "visible",
            "charting.chart.style": "minimal",
            "charting.layout.splitSeries": "0",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart": "radialGauge",
            "charting.chart.stackMode": "default",
            "charting.axisX.scale": "linear",
            "charting.legend.placement": "right",
            "charting.drilldown": "all",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "resizable": true,
            "charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
            "charting.axisY.scale": "linear",
            "managerid": "search2",
            "el": $('#element2')
        }, {tokens: true}).render();

        var element3 = new ChartElement({
            "id": "element3",
            "charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
            "charting.axisTitleY.visibility": "visible",
            "charting.axisTitleX.visibility": "visible",
            "charting.chart.style": "minimal",
            "charting.layout.splitSeries": "0",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart": "radialGauge",
            "charting.chart.stackMode": "default",
            "charting.axisX.scale": "linear",
            "charting.legend.placement": "right",
            "charting.drilldown": "all",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "resizable": true,
            "charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
            "charting.axisY.scale": "linear",
            "managerid": "search3",
            "el": $('#element3')
        }, {tokens: true}).render();

        var element4 = new ChartElement({
            "id": "element4",
            "charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
            "charting.axisTitleY.visibility": "visible",
            "charting.axisTitleX.visibility": "visible",
            "charting.chart.style": "minimal",
            "charting.layout.splitSeries": "0",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart": "radialGauge",
            "charting.chart.stackMode": "default",
            "charting.axisX.scale": "linear",
            "charting.legend.placement": "right",
            "charting.drilldown": "all",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "resizable": true,
            "charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
            "charting.axisY.scale": "linear",
            "managerid": "search4",
            "el": $('#element4')
        }, {tokens: true}).render();

        var element5 = new ChartElement({
            "id": "element5",
            "charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
            "charting.axisTitleY.visibility": "visible",
            "charting.axisTitleX.visibility": "visible",
            "charting.chart.style": "minimal",
            "charting.layout.splitSeries": "0",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart": "radialGauge",
            "charting.chart.stackMode": "default",
            "charting.axisX.scale": "linear",
            "charting.legend.placement": "right",
            "charting.drilldown": "all",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "resizable": true,
            "charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
            "charting.axisY.scale": "linear",
            "managerid": "search5",
            "el": $('#element5')
        }, {tokens: true}).render();


        submitTokens();


        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;

    }
);
</script>
</body>
</html>

 

Labels (1)
Tags (1)

jsharma123
Explorer

You can also use HTML table to do this

e.g.

<table style="width:100%">
             <tr>
              <td colspan="2">
                <row>
                 <panel>

                         <style>.btn-primary { margin: 5px 10px 5px 0; }</style>
                         <a href="oil_timeline_chart_view_html" class="btn btn-primary" target="_blank">TimeLine dashboard</a>

                 </panel>
             </row>
              </td>
            </tr>
          <tr>
            <th>First</th>
            <th>Second</th>
          </tr>
            <tr>
             <td>
            <div class="fieldset">
                <div class="input input-text" id="input1">
                    <label>First</label>
                </div>
            </div>

              </td>
               <td>
             <div class="fieldset">
                <div class="input input-text" id="input2">
                    <label>Second</label>
                </div>
            </div>

              </td>
            </tr>
            <tr>
              <td>

               <div id="row2" class="dashboard-row dashboard-row2">

              <div class="dashboard-row">
                <div class="dashboard-cell" style="width: 100%;">
                   <div class="dashboard-panel">
                        <div class="panel-element-row">
                            <div class="dashboard-element">
                                <div class="panel-head">
                                    <h3>Transaction Graph</h3>
                                </div>
                                <div class="panel-body">
                                    <p id="chart"></p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
                </td>

                <td>

               <div id="row2" class="dashboard-row dashboard-row2">

              <div class="dashboard-row">
                <div class="dashboard-cell" style="width: 100%;">
                   <div class="dashboard-panel">
                        <div class="panel-element-row">
                            <div class="dashboard-element">
                                <div class="panel-head">
                                    <h3>Transaction Graph</h3>
                                </div>
                                <div class="panel-body">
                                    <p id="chart2"></p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
                </td>

              </tr>
              </table>
0 Karma

ngatchasandra
Builder

1- First time, i created a css file as follow:

#element3{
float: left;
}

#element4{
float: left;
}

#element5{
float: left;
}

#element2{
float: left;
}

and name it gauge.css which location is in directory : ...\Splunk\etc\apps\"your app"\appserver\static

2-Second time, i added a mark in my code head as follow:

<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/gauge.css" />

3- Third time, because the width panel who contain the four gauge is very small, i created a new row and put them into as follow:

 <div class="dashboard-row dashboard-row2">
         <div class="dashboard-cell" style="width: 50%;">
             <div class="dashboard-panel clearfix">                
                 <div class="panel-element-row">
                     <div class="dashboard-element chart" id="element2" style="width: 25%">
                         <div class="panel-head">
                             <h3>CPU</h3>
                         </div>
                     </div>
                     <div class="dashboard-element chart" id="element3" style="width: 25%">
                         <div class="panel-head">
                             <h3>MEMORY</h3>
                         </div>
                     </div>
                     <div class="dashboard-element chart" id="element4" style="width: 25%">
                         <div class="panel-head">
                             <h3>DISK SPACE</h3>
                         </div>
                     </div>
                     <div class="dashboard-element chart" id="element5" style="width: 25%">
                         <div class="panel-head">
                             <h3>DISK I/O</h3>
                         </div>
                         <div class="panel-body"></div>
                       </div>  
                  </div>
             </div>
         </div>
     </div>

The end code is:

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>ISE Enterprise Dashboard HTML | Splunk</title>
     <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/pages/dashboard-simple-bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/styl.css" />
     <!--[if IE 7]><link rel="stylesheet" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/sprites-ie7.css" /><![endif]-->
 </head>
 <body class="simplexml preload">

 <!-- 
 BEGIN LAYOUT
 This section contains the layout for the dashboard. Splunk uses proprietary
 styles in <div> tags, similar to Bootstrap's grid system. 
 -->

 <div class="header">
     <div id="placeholder-splunk-bar">
         <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk &gt; listen to your data">splunk<strong>&gt;</strong></a>
     </div>
     <div id="placeholder-app-bar"></div>
 </div>
 <div class="dashboard-body container-fluid main-section-body" data-role="main">
     <div class="dashboard-header clearfix">
         <h2>ISE Enterprise Dashboard HTML</h2>
     </div>
     <div class="dashboard-row dashboard-row1">
         <div class="dashboard-cell" style="width: 50%;">
             <div class="dashboard-panel clearfix">                
                 <div class="panel-element-row">
                     <div class="dashboard-element chart" id="element1" style="width: 100%">
                         <div class="panel-head">
                             <h3>Passed Authentications %</h3>
                         </div>
                         <div class="panel-body"></div>
                     </div>
                 </div>
             </div>
         </div>
        <div class="dashboard-row dashboard-row2">
          <div class="dashboard-cell" style="width: 100%;">
          <div class="dashboard-panel clearfix">                
              <div class="panel-element-row">
                  <div class="dashboard-element chart" id="element2" style="width: 25%">
                      <div class="panel-head">
                          <h3>CPU</h3>
                      </div>
                  </div>
                  <div class="dashboard-element chart" id="element3" style="width: 25%">
                      <div class="panel-head">
                          <h3>MEMORY</h3>
                      </div>
                  </div>
                  <div class="dashboard-element chart" id="element4" style="width: 25%">
                      <div class="panel-head">
                          <h3>DISK SPACE</h3>
                      </div>
                  </div>
                  <div class="dashboard-element chart" id="element5" style="width: 25%">
                      <div class="panel-head">
                          <h3>DISK I/O</h3>
                      </div>
                      <div class="panel-body"></div>
                    </div>  
               </div>
          </div>
      </div>
  </div>
 </div>
</div>
 <div class="footer"></div>

 <!-- 
 END LAYOUT
 -->

 <script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1"></script>
 <script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
 <script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
 <script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/build/simplexml.min/config.js"></script>
 <script type="text/javascript">
 require.config({
     baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
     waitSeconds: 0 // Disable require.js load timeout
 });

 //
 // LIBRARY REQUIREMENTS
 //
 // In the require function, we include the necessary libraries and modules for
 // the HTML dashboard. Then, we pass variable names for these libraries and
 // modules as function parameters, in order.
 // 
 // When you add libraries or modules, remember to retain this mapping order
 // between the library or module and its function parameter. You can do this by
 // adding to the end of these lists, as shown in the commented examples below.

 require([
     "splunkjs/mvc",
     "splunkjs/mvc/utils",
     "splunkjs/mvc/tokenutils",
     "underscore",
     "jquery",
     "splunkjs/mvc/simplexml",
     "splunkjs/mvc/headerview",
     "splunkjs/mvc/footerview",
     "splunkjs/mvc/simplexml/dashboard",
     "splunkjs/mvc/simplexml/element/chart",
     "splunkjs/mvc/simplexml/element/event",
     "splunkjs/mvc/simplexml/element/html",
     "splunkjs/mvc/simplexml/element/list",
     "splunkjs/mvc/simplexml/element/map",
     "splunkjs/mvc/simplexml/element/single",
     "splunkjs/mvc/simplexml/element/table",
     "splunkjs/mvc/simpleform/input/dropdown",
     "splunkjs/mvc/simpleform/input/radiogroup",
     "splunkjs/mvc/simpleform/input/text",
     "splunkjs/mvc/simpleform/input/timerange",
     "splunkjs/mvc/simpleform/input/submit",
     "splunkjs/mvc/searchmanager",
     "splunkjs/mvc/savedsearchmanager",
     "splunkjs/mvc/postprocessmanager",
     "splunkjs/mvc/simplexml/urltokenmodel"
     // Add comma-separated libraries and modules manually here, for example:
     // ..."splunkjs/mvc/simplexml/urltokenmodel",
     // "splunkjs/mvc/checkboxview"
     ],
     function(
         mvc,
         utils,
         TokenUtils,
         _,
         $,
         DashboardController,
         HeaderView,
         FooterView,
         Dashboard,
         ChartElement,
         EventElement,
         HtmlElement,
         ListElement,
         MapElement,
         SingleElement,
         TableElement,
         DropdownInput,
         RadioGroupInput,
         TextInput,
         TimeRangeInput,
         SubmitButton,
         SearchManager,
         SavedSearchManager,
         PostProcessManager,
         UrlTokenModel

         // Add comma-separated parameter names here, for example: 
         // ...UrlTokenModel, 
         // CheckboxView
         ) {



         var pageLoading = true;


         // 
         // TOKENS
         //

         // Create token namespaces
         var urlTokenModel = new UrlTokenModel();
         mvc.Components.registerInstance('url', urlTokenModel);
         var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
         var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});

         urlTokenModel.on('url:navigate', function() {
             defaultTokenModel.set(urlTokenModel.toJSON());
             if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
                 submitTokens();
             } else {
                 submittedTokenModel.clear();
             }
         });

         // Initialize tokens
         defaultTokenModel.set(urlTokenModel.toJSON());

         var defaultUpdate = {};

         var submitTokens = function() {
             submitTokensSoon(pageLoading);
         };

         var submitTokensSoon = _.debounce(function(replaceState) {
             submittedTokenModel.set(defaultTokenModel.toJSON());
             urlTokenModel.saveOnlyWithPrefix('form\\.', defaultTokenModel.toJSON(), {
                 replaceState: replaceState
             });
         });


         //
         // SEARCH MANAGERS
         //

         var search1 = new SearchManager({
             "id": "search1",
             "status_buckets": 0,
             "cancelOnUnload": true,
             "latest_time": "now",
             "search": "index=ise tag=ise_prd MESSAGE_CLASS=\"Failed-Attempt\" OR MESSAGE_CLASS=\"Passed-Authentication\" NOT tag=probe  NOT tag=diagnostics | dedup host syslog_id _time | stats count(eval(_raw)) as Total, count(eval(MESSAGE_CLASS=\"Passed-Authentication\")) as Passed | eval percent=((Passed/Total)*100) | table percent",
             "earliest_time": "-15m",
             "app": utils.getCurrentApp(),
             "auto_cancel": 90,
             "preview": true
         }, {tokens: true, tokenNamespace: "submitted"});

         var search2 = new SearchManager({
             "id": "search2",
             "status_buckets": 0,
             "cancelOnUnload": true,
             "latest_time": "now",
             "search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time  | eval cpu=tonumber(substr(SysStatsUtilizationCpu,0,4)) | stats avg(cpu) AS CPU",
             "earliest_time": "-15m",
             "app": utils.getCurrentApp(),
             "auto_cancel": 90,
             "preview": true
         }, {tokens: true, tokenNamespace: "submitted"});

         var search3 = new SearchManager({
             "id": "search3",
             "status_buckets": 0,
             "cancelOnUnload": true,
             "latest_time": "now",
             "search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval memory=tonumber(substr(SysStatsUtilizationMemory,0,4)) | stats avg(memory) As MEMORY",
             "earliest_time": "-15m",
             "app": utils.getCurrentApp(),
             "auto_cancel": 90,
             "preview": true
         }, {tokens: true, tokenNamespace: "submitted"});

         var search4 = new SearchManager({
             "id": "search4",
             "status_buckets": 0,
             "cancelOnUnload": true,
             "latest_time": "now",
             "search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time  | eval diskspace=tonumber(substr(SysStatsUtilizationDiskSpace,0,4)) | stats avg(diskspace) AS DISKSPACE",
             "earliest_time": "-15m",
             "app": utils.getCurrentApp(),
             "auto_cancel": 90,
             "preview": true
         }, {tokens: true, tokenNamespace: "submitted"});

         var search5 = new SearchManager({
             "id": "search5",
             "status_buckets": 0,
             "cancelOnUnload": true,
             "latest_time": "now",
             "search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval diskio=tonumber(substr(SysStatsUtilizationDiskIO,0,4)) | stats avg(diskio) AS DISKIO",
             "earliest_time": "-15m",
             "app": utils.getCurrentApp(),
             "auto_cancel": 90,
             "preview": true
         }, {tokens: true, tokenNamespace: "submitted"});



         //
         // SPLUNK HEADER AND FOOTER
         //

         new HeaderView({
             id: 'header',
             section: 'dashboards',
             el: $('.header'),
             acceleratedAppNav: true
         }, {tokens: true}).render();

         new FooterView({
             id: 'footer',
             el: $('.footer')
         }, {tokens: true}).render();


         //
         // DASHBOARD EDITOR
         //

         new Dashboard({
             id: 'dashboard',
             el: $('.dashboard-body')
         }, {tokens: true}).render();


         //
         // VIEWS: VISUALIZATION ELEMENTS
         //

         var element1 = new ChartElement({
             "id": "element1",
             "charting.chart.rangeValues": "[\"0\",\"45\",\"65\",\"100\"]",
             "charting.axisTitleY.visibility": "visible",
             "charting.axisTitleX.visibility": "visible",
             "charting.chart.style": "minimal",
             "charting.layout.splitSeries": "0",
             "charting.chart.nullValueMode": "gaps",
             "charting.chart": "markerGauge",
             "charting.chart.stackMode": "default",
             "charting.axisX.scale": "linear",
             "charting.legend.placement": "right",
             "charting.drilldown": "all",
             "charting.chart.sliceCollapsingThreshold": "0.01",
             "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
             "resizable": true,
             "charting.gaugeColors": "[0xd13b3b,0xebe42d,0x7e9f44]",
             "charting.axisY.scale": "linear",
             "managerid": "search1",
             "el": $('#element1')
         }, {tokens: true}).render();

         var element2 = new ChartElement({
             "id": "element2",
             "charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
             "charting.axisTitleY.visibility": "visible",
             "charting.axisTitleX.visibility": "visible",
             "charting.chart.style": "minimal",
             "charting.layout.splitSeries": "0",
             "charting.chart.nullValueMode": "gaps",
             "charting.chart": "radialGauge",
             "charting.chart.stackMode": "default",
             "charting.axisX.scale": "linear",
             "charting.legend.placement": "right",
             "charting.drilldown": "all",
             "charting.chart.sliceCollapsingThreshold": "0.01",
             "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
             "resizable": true,
             "charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
             "charting.axisY.scale": "linear",
             "managerid": "search2",
             "el": $('#element2')
         }, {tokens: true}).render();

         var element3 = new ChartElement({
             "id": "element3",
             "charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
             "charting.axisTitleY.visibility": "visible",
             "charting.axisTitleX.visibility": "visible",
             "charting.chart.style": "minimal",
             "charting.layout.splitSeries": "0",
             "charting.chart.nullValueMode": "gaps",
             "charting.chart": "radialGauge",
             "charting.chart.stackMode": "default",
             "charting.axisX.scale": "linear",
             "charting.legend.placement": "right",
             "charting.drilldown": "all",
             "charting.chart.sliceCollapsingThreshold": "0.01",
             "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
             "resizable": true,
             "charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
             "charting.axisY.scale": "linear",
             "managerid": "search3",
             "el": $('#element3')
         }, {tokens: true}).render();

         var element4 = new ChartElement({
             "id": "element4",
             "charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
             "charting.axisTitleY.visibility": "visible",
             "charting.axisTitleX.visibility": "visible",
             "charting.chart.style": "minimal",
             "charting.layout.splitSeries": "0",
             "charting.chart.nullValueMode": "gaps",
             "charting.chart": "radialGauge",
             "charting.chart.stackMode": "default",
             "charting.axisX.scale": "linear",
             "charting.legend.placement": "right",
             "charting.drilldown": "all",
             "charting.chart.sliceCollapsingThreshold": "0.01",
             "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
             "resizable": true,
             "charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
             "charting.axisY.scale": "linear",
             "managerid": "search4",
             "el": $('#element4')
         }, {tokens: true}).render();

         var element5 = new ChartElement({
             "id": "element5",
             "charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
             "charting.axisTitleY.visibility": "visible",
             "charting.axisTitleX.visibility": "visible",
             "charting.chart.style": "minimal",
             "charting.layout.splitSeries": "0",
             "charting.chart.nullValueMode": "gaps",
             "charting.chart": "radialGauge",
             "charting.chart.stackMode": "default",
             "charting.axisX.scale": "linear",
             "charting.legend.placement": "right",
             "charting.drilldown": "all",
             "charting.chart.sliceCollapsingThreshold": "0.01",
             "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
             "resizable": true,
             "charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
             "charting.axisY.scale": "linear",
             "managerid": "search5",
             "el": $('#element5')
         }, {tokens: true}).render();


         submitTokens();


         //
         // DASHBOARD READY
         //

         DashboardController.ready();
         pageLoading = false;

     }
 );
 </script>
 </body>
 </html>
0 Karma

Tanefo
Path Finder

see very well this:


do this action or delete it in your code , it's to remove the from 3 of your gauges correctly in your dashbord

splunk>

ISE Enterprise Dashboard HTML

Passed Authentications %

CPU

DISK SPACE

DISK I/O

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...