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

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

jedatt01 — Mon, 06 Jul 2020 22:47:04 GMT

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>

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

Tanefo — Thu, 11 Dec 2014 11:12:04 GMT

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

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

ngatchasandra — Tue, 06 Jan 2015 09:11:44 GMT

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>

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

jsharma123 — Thu, 26 Oct 2017 10:11:21 GMT

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>