Dashboards & Visualizations

How to control the whitespace or panels size in a dashboard?

HattrickNZ
Motivator

I have the following mockup dashboard:
Image and video hosting by TinyPic
with 3 panels on the 1 row.

What I would like to do is remove the whitespace for the marker gagues say 33% in total of the row would be for the 2 gauges and then the timechart panel on the right would have the remaining 66% of the row.

How can I achieve this? Can it be done in simple XML? Can it be done if I convert to HTML or advanced XML?

0 Karma
1 Solution

HattrickNZ
Motivator

I can't seem to post this as a comment above!!!

that kind of works but i am having difficulty getting exactly what I want. I may have to thinker with it somemore!!

I find removing

class="dashboard-cell" test >class="dashboard-cell"
from

``

*test >div id="panel1" class="dashboard-cell" style="width: 33.33%;"> *

giving me this
`` test >div id="panel1" style="width: 10%;">

this is a test as having issues with formatting think it is a splunk bug

allows me more control of the dashboard panel width. However it puts them all on different rows.

So what I have got is something line this, but each panel is on its own row, row1, row2 and row3.

<div id="panel1" style="width: 10%;">
<div id="panel2" style="width: 10%;">
<div id="panel3" style="width: 80%;">

Can I somehow do it this way but get them all on the same row? I thought this `` would put them all on the one row?

A snippet of My Code(let me know and I will put the whole code up):

<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Capacity_Gauges HTML</h2>
        <p class="description">looking at the gagues options here</p>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" style="width: 10%;"> <!--  class="dashboard-cell" style="width: 33.33%;" -->
            <div class="dashboard-panel clearfix" > <!-- style="width: 30%;" -->

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a 1st gague</h3>
                        </div>  
                      <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel2" style="width: 10%;">
            <div class="dashboard-panel clearfix" > <!-- style="width: 30%;" -->

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a 2nd gague</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel3" style="width: 80%;">
            <div class="dashboard-panel clearfix" >

                <div class="panel-element-row">
                    <div id="element3" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a timechart graph</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer"></div>

Here is my complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Capacity_Gauges HTML | Splunk</title>
    <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@255606/css/build/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@255606/css/build/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 locale-en">
<!-- 
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system. 
-->
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-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>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Capacity_Gauges HTML</h2>
        <p class="description">looking at the gagues options here</p>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" style="width: 10%;"> <!--  class="dashboard-cell" style="width: 33.33%;" -->
            <div class="dashboard-panel clearfix" > <!-- style="width: 30%;" -->

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a 1st gague</h3>
                        </div>  
                      <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel2" style="width: 10%;">
            <div class="dashboard-panel clearfix" > <!-- style="width: 30%;" -->

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a 2nd gague</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel3" style="width: 80%;">
            <div class="dashboard-panel clearfix" >

                <div class="panel-element-row">
                    <div id="element3" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a timechart graph</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/dashboardview",
    "splunkjs/mvc/simplexml/dashboard/panelref",
    "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/formutils",
    "splunkjs/mvc/simplexml/eventhandler",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "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,
        PanelRef,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        FormUtils,
        EventHandler,
        DropdownInput,
        RadioGroupInput,
        MultiSelectInput,
        CheckboxGroupInput,
        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());

        function submitTokens() {
            // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
            FormUtils.submitForm({ replaceState: pageLoading });
        }

        function setToken(name, value) {
            defaultTokenModel.set(name, value);
            submittedTokenModel.set(name, value);
        }

        function unsetToken(name) {
            defaultTokenModel.unset(name);
            submittedTokenModel.unset(name);
        }



        //
        // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "cancelOnUnload": true,
            "latest_time": "$latest$",
            "status_buckets": 0,
            "search": "index=_internal sourcetype=\"splunk_web_access\"  user=admin | eval limit=if(user==\"admin\",700,if(user==\"-\",500,\"NULL\")) | stats  count(uri) as Usage max(limit) as Limit by user  | eval  percent=Usage/Limit*100  | eval  limit4Graph=Limit-Usage  | fields  percent",
            "earliest_time": "0",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search2 = new SearchManager({
            "id": "search2",
            "cancelOnUnload": true,
            "latest_time": "$latest$",
            "status_buckets": 0,
            "search": "index=_internal sourcetype=\"splunk_web_access\"  user=admin | eval limit=if(user==\"admin\",700,if(user==\"-\",500,\"NULL\")) | stats  count(uri) as Usage max(limit) as Limit by user  | eval  percent=Usage/Limit*100  | eval  limit4Graph=Limit-Usage  | fields  percent",
            "earliest_time": "0",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search3 = new SearchManager({
            "id": "search3",
            "cancelOnUnload": true,
            "latest_time": "$latest$",
            "status_buckets": 0,
            "search": "index=_internal sourcetype=\"splunk_web_access\"  user=admin | eval limit=if(user==\"admin\",700,if(user==\"-\",500,\"NULL\")) | timechart count(uri)",
            "earliest_time": "0",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});



        //
        // SPLUNK HEADER AND FOOTER
        //

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

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


        //
        // DASHBOARD EDITOR
        //

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


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new ChartElement({
            "id": "element1",
            "charting.legend.placement": "right",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart.stackMode": "stacked",
            "charting.chart": "markerGauge",
            "charting.axisY2.scale": "inherit",
            "charting.axisY2.enabled": "0",
            "charting.axisTitleY.visibility": "visible",
            "charting.layout.splitSeries": "0",
            "charting.chart.bubbleSizeBy": "area",
            "charting.axisY.scale": "linear",
            "charting.axisLabelsX.majorLabelStyle.rotation": "0",
            "charting.chart.style": "shiny",
            "charting.drilldown": "all",
            "charting.axisTitleY2.visibility": "visible",
            "resizable": true,
            "charting.chart.bubbleMaximumSize": "50",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
            "charting.chart.bubbleMinimumSize": "10",
            "charting.axisTitleX.visibility": "visible",
            "charting.axisX.scale": "linear",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();


        var element2 = new ChartElement({
            "id": "element2",
            "charting.legend.placement": "right",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart.stackMode": "stacked",
            "charting.chart": "fillerGauge",
            "charting.axisY2.scale": "inherit",
            "charting.axisY2.enabled": "false",
            "charting.axisTitleY.visibility": "visible",
            "charting.layout.splitSeries": "0",
            "charting.chart.bubbleSizeBy": "area",
            "charting.axisY.scale": "linear",
            "charting.axisLabelsX.majorLabelStyle.rotation": "0",
            "charting.chart.style": "shiny",
            "charting.drilldown": "all",
            "charting.axisTitleY2.visibility": "visible",
            "resizable": true,
            "charting.chart.bubbleMaximumSize": "50",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
            "charting.chart.bubbleMinimumSize": "10",
            "charting.axisTitleX.visibility": "visible",
            "charting.axisX.scale": "linear",
            "managerid": "search2",
            "el": $('#element2')
        }, {tokens: true, tokenNamespace: "submitted"}).render();


        var element3 = new ChartElement({
            "id": "element3",
            "charting.legend.placement": "right",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart.stackMode": "stacked",
            "charting.chart": "line",
            "charting.axisY2.scale": "inherit",
            "charting.axisY2.enabled": "0",
            "charting.axisTitleY.visibility": "visible",
            "charting.layout.splitSeries": "0",
            "charting.chart.bubbleSizeBy": "area",
            "charting.axisY.scale": "linear",
            "charting.axisLabelsX.majorLabelStyle.rotation": "0",
            "charting.chart.style": "shiny",
            "charting.drilldown": "all",
            "charting.axisTitleY2.visibility": "visible",
            "resizable": true,
            "charting.chart.bubbleMaximumSize": "50",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
            "charting.chart.bubbleMinimumSize": "10",
            "charting.axisTitleX.visibility": "visible",
            "charting.axisX.scale": "linear",
            "managerid": "search3",
            "el": $('#element3')
        }, {tokens: true, tokenNamespace: "submitted"}).render();



        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }

        submitTokens();


        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;

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

View solution in original post

0 Karma

butzowj
Path Finder

What I did here was add the following line to my CSS file (this was for a single-value chart type):

.dashboard-element {
width: 100% !important;
}

This overrides the default width of 33.33% with "100%".

0 Karma

ngatchasandra
Builder

Here is the HTML code:

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Capacity_Gauges HTML | Splunk</title>
     <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
         <link rel="stylesheet" type="text/css" href="/en-US/static/@255606/css/build/bootstrap.min.css" />
         <link rel="stylesheet" type="text/css" href="/en-US/static/@255606/css/build/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 locale-en">
 <!-- 
 BEGIN LAYOUT
 This section contains the layout for the dashboard. Splunk uses proprietary
 styles in <div> tags, similar to Bootstrap's grid system. 
 -->
 <a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
 <div class="header splunk-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>
 <a id="navSkip"></a>
 <div class="dashboard-body container-fluid main-section-body" data-role="main">
     <div class="dashboard-header clearfix">
         <h2>Capacity_Gauges HTML</h2>
         <p class="description">looking at the gagues options here</p>
     </div>


     <div id="row1" class="dashboard-row dashboard-row1" style="display:block;">
         <div id="panel1" style="width: 10%; display: inline-block; float: left;"> <!--  class="dashboard-cell" style="width: 33.33%;" -->
             <div class="dashboard-panel clearfix" > <!-- style="width: 30%;" -->

                 <div class="panel-element-row">
                     <div id="element1" class="dashboard-element chart" style="width: 100%">
                         <div class="panel-head">
                             <h3>a 1st gague</h3>
                         </div>  
                       <div class="panel-body"></div>
                     </div>
                 </div>
             </div>
         </div>


         <div id="panel2" style="width: 10%;  margin-left: 2%; display: inline-block; float: left;">
             <div class="dashboard-panel clearfix"  > <!-- style="width: 30%;" -->

                 <div class="panel-element-row">
                     <div id="element2" class="dashboard-element chart" style="width: 100%;">
                         <div class="panel-head" >
                             <h3>a 2nd gague</h3>
                         </div>
                         <div class="panel-body" ></div>
                     </div>
                 </div>
             </div>

          </div>


         <div id="panel3" style="width: 70%; margin-left: 4%; display: inline-block; ">
             <div class="dashboard-panel clearfix" >

                 <div class="panel-element-row">
                     <div id="element3" class="dashboard-element chart" style="width: 100%">
                         <div class="panel-head">
                             <h3>a timechart graph</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/dashboardview",
     "splunkjs/mvc/simplexml/dashboard/panelref",
     "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/formutils",
     "splunkjs/mvc/simplexml/eventhandler",
     "splunkjs/mvc/simpleform/input/dropdown",
     "splunkjs/mvc/simpleform/input/radiogroup",
     "splunkjs/mvc/simpleform/input/multiselect",
     "splunkjs/mvc/simpleform/input/checkboxgroup",
     "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,
         PanelRef,
         ChartElement,
         EventElement,
         HtmlElement,
         ListElement,
         MapElement,
         SingleElement,
         TableElement,
         FormUtils,
         EventHandler,
         DropdownInput,
         RadioGroupInput,
         MultiSelectInput,
         CheckboxGroupInput,
         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());

         function submitTokens() {
             // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
             FormUtils.submitForm({ replaceState: pageLoading });
         }

         function setToken(name, value) {
             defaultTokenModel.set(name, value);
             submittedTokenModel.set(name, value);
         }

         function unsetToken(name) {
             defaultTokenModel.unset(name);
             submittedTokenModel.unset(name);
         }



         //
         // SEARCH MANAGERS
         //

         var search1 = new SearchManager({
             "id": "search1",
             "cancelOnUnload": true,
             "latest_time": "$latest$",
             "status_buckets": 0,
             "search": "index=_internal sourcetype=\"splunk_web_access\"  user=admin | eval limit=if(user==\"admin\",700,if(user==\"-\",500,\"NULL\")) | stats  count(uri) as Usage max(limit) as Limit by user  | eval  percent=Usage/Limit*100  | eval  limit4Graph=Limit-Usage  | fields  percent",
             "earliest_time": "0",
             "app": utils.getCurrentApp(),
             "auto_cancel": 90,
             "preview": true,
             "runWhenTimeIsUndefined": false
         }, {tokens: true, tokenNamespace: "submitted"});

         var search2 = new SearchManager({
             "id": "search2",
             "cancelOnUnload": true,
             "latest_time": "$latest$",
             "status_buckets": 0,
             "search": "index=_internal sourcetype=\"splunk_web_access\"  user=admin | eval limit=if(user==\"admin\",700,if(user==\"-\",500,\"NULL\")) | stats  count(uri) as Usage max(limit) as Limit by user  | eval  percent=Usage/Limit*100  | eval  limit4Graph=Limit-Usage  | fields  percent",
             "earliest_time": "0",
             "app": utils.getCurrentApp(),
             "auto_cancel": 90,
             "preview": true,
             "runWhenTimeIsUndefined": false
         }, {tokens: true, tokenNamespace: "submitted"});

         var search3 = new SearchManager({
             "id": "search3",
             "cancelOnUnload": true,
             "latest_time": "$latest$",
             "status_buckets": 0,
             "search": "index=_internal sourcetype=\"splunk_web_access\"  user=admin | eval limit=if(user==\"admin\",700,if(user==\"-\",500,\"NULL\")) | timechart count(uri)",
             "earliest_time": "0",
             "app": utils.getCurrentApp(),
             "auto_cancel": 90,
             "preview": true,
             "runWhenTimeIsUndefined": false
         }, {tokens: true, tokenNamespace: "submitted"});



         //
         // SPLUNK HEADER AND FOOTER
         //

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

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


         //
         // DASHBOARD EDITOR
         //

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


         //
         // VIEWS: VISUALIZATION ELEMENTS
         //

         var element1 = new ChartElement({
             "id": "element1",
             "charting.legend.placement": "right",
             "charting.chart.nullValueMode": "gaps",
             "charting.chart.stackMode": "stacked",
             "charting.chart": "markerGauge",
             "charting.axisY2.scale": "inherit",
             "charting.axisY2.enabled": "0",
             "charting.axisTitleY.visibility": "visible",
             "charting.layout.splitSeries": "0",
             "charting.chart.bubbleSizeBy": "area",
             "charting.axisY.scale": "linear",
             "charting.axisLabelsX.majorLabelStyle.rotation": "0",
             "charting.chart.style": "shiny",
             "charting.drilldown": "all",
             "charting.axisTitleY2.visibility": "visible",
             "resizable": true,
             "charting.chart.bubbleMaximumSize": "50",
             "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
             "charting.chart.sliceCollapsingThreshold": "0.01",
             "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
             "charting.chart.bubbleMinimumSize": "10",
             "charting.axisTitleX.visibility": "visible",
             "charting.axisX.scale": "linear",
             "managerid": "search1",
             "el": $('#element1')
         }, {tokens: true, tokenNamespace: "submitted"}).render();


         var element2 = new ChartElement({
             "id": "element2",
             "charting.legend.placement": "right",
             "charting.chart.nullValueMode": "gaps",
             "charting.chart.stackMode": "stacked",
             "charting.chart": "fillerGauge",
             "charting.axisY2.scale": "inherit",
             "charting.axisY2.enabled": "false",
             "charting.axisTitleY.visibility": "visible",
             "charting.layout.splitSeries": "0",
             "charting.chart.bubbleSizeBy": "area",
             "charting.axisY.scale": "linear",
             "charting.axisLabelsX.majorLabelStyle.rotation": "0",
             "charting.chart.style": "shiny",
             "charting.drilldown": "all",
             "charting.axisTitleY2.visibility": "visible",
             "resizable": true,
             "charting.chart.bubbleMaximumSize": "50",
             "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
             "charting.chart.sliceCollapsingThreshold": "0.01",
             "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
             "charting.chart.bubbleMinimumSize": "10",
             "charting.axisTitleX.visibility": "visible",
             "charting.axisX.scale": "linear",
             "managerid": "search2",
             "el": $('#element2')
         }, {tokens: true, tokenNamespace: "submitted"}).render();


         var element3 = new ChartElement({
             "id": "element3",
             "charting.legend.placement": "right",
             "charting.chart.nullValueMode": "gaps",
             "charting.chart.stackMode": "stacked",
             "charting.chart": "line",
             "charting.axisY2.scale": "inherit",
             "charting.axisY2.enabled": "0",
             "charting.axisTitleY.visibility": "visible",
             "charting.layout.splitSeries": "0",
             "charting.chart.bubbleSizeBy": "area",
             "charting.axisY.scale": "linear",
             "charting.axisLabelsX.majorLabelStyle.rotation": "0",
             "charting.chart.style": "shiny",
             "charting.drilldown": "all",
             "charting.axisTitleY2.visibility": "visible",
             "resizable": true,
             "charting.chart.bubbleMaximumSize": "50",
             "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
             "charting.chart.sliceCollapsingThreshold": "0.01",
             "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
             "charting.chart.bubbleMinimumSize": "10",
             "charting.axisTitleX.visibility": "visible",
             "charting.axisX.scale": "linear",
             "managerid": "search3",
             "el": $('#element3')
         }, {tokens: true, tokenNamespace: "submitted"}).render();



         // Initialize time tokens to default
         if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
             defaultTokenModel.set({ earliest: '0', latest: '' });
         }

         submitTokens();


         //
         // DASHBOARD READY
         //

         DashboardController.ready();
         pageLoading = false;

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

ngatchasandra
Builder

Please, let me know if you satisfy!

0 Karma

ngatchasandra
Builder

Hi HattrickNZ,

Please,You have forget to accept my answer! This work fine.

0 Karma

HattrickNZ
Motivator

I can't seem to post this as a comment above!!!

that kind of works but i am having difficulty getting exactly what I want. I may have to thinker with it somemore!!

I find removing

class="dashboard-cell" test >class="dashboard-cell"
from

``

*test >div id="panel1" class="dashboard-cell" style="width: 33.33%;"> *

giving me this
`` test >div id="panel1" style="width: 10%;">

this is a test as having issues with formatting think it is a splunk bug

allows me more control of the dashboard panel width. However it puts them all on different rows.

So what I have got is something line this, but each panel is on its own row, row1, row2 and row3.

<div id="panel1" style="width: 10%;">
<div id="panel2" style="width: 10%;">
<div id="panel3" style="width: 80%;">

Can I somehow do it this way but get them all on the same row? I thought this `` would put them all on the one row?

A snippet of My Code(let me know and I will put the whole code up):

<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Capacity_Gauges HTML</h2>
        <p class="description">looking at the gagues options here</p>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" style="width: 10%;"> <!--  class="dashboard-cell" style="width: 33.33%;" -->
            <div class="dashboard-panel clearfix" > <!-- style="width: 30%;" -->

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a 1st gague</h3>
                        </div>  
                      <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel2" style="width: 10%;">
            <div class="dashboard-panel clearfix" > <!-- style="width: 30%;" -->

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a 2nd gague</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel3" style="width: 80%;">
            <div class="dashboard-panel clearfix" >

                <div class="panel-element-row">
                    <div id="element3" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a timechart graph</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer"></div>

Here is my complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Capacity_Gauges HTML | Splunk</title>
    <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@255606/css/build/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@255606/css/build/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 locale-en">
<!-- 
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system. 
-->
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-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>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Capacity_Gauges HTML</h2>
        <p class="description">looking at the gagues options here</p>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" style="width: 10%;"> <!--  class="dashboard-cell" style="width: 33.33%;" -->
            <div class="dashboard-panel clearfix" > <!-- style="width: 30%;" -->

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a 1st gague</h3>
                        </div>  
                      <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel2" style="width: 10%;">
            <div class="dashboard-panel clearfix" > <!-- style="width: 30%;" -->

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a 2nd gague</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel3" style="width: 80%;">
            <div class="dashboard-panel clearfix" >

                <div class="panel-element-row">
                    <div id="element3" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>a timechart graph</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/dashboardview",
    "splunkjs/mvc/simplexml/dashboard/panelref",
    "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/formutils",
    "splunkjs/mvc/simplexml/eventhandler",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "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,
        PanelRef,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        FormUtils,
        EventHandler,
        DropdownInput,
        RadioGroupInput,
        MultiSelectInput,
        CheckboxGroupInput,
        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());

        function submitTokens() {
            // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
            FormUtils.submitForm({ replaceState: pageLoading });
        }

        function setToken(name, value) {
            defaultTokenModel.set(name, value);
            submittedTokenModel.set(name, value);
        }

        function unsetToken(name) {
            defaultTokenModel.unset(name);
            submittedTokenModel.unset(name);
        }



        //
        // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "cancelOnUnload": true,
            "latest_time": "$latest$",
            "status_buckets": 0,
            "search": "index=_internal sourcetype=\"splunk_web_access\"  user=admin | eval limit=if(user==\"admin\",700,if(user==\"-\",500,\"NULL\")) | stats  count(uri) as Usage max(limit) as Limit by user  | eval  percent=Usage/Limit*100  | eval  limit4Graph=Limit-Usage  | fields  percent",
            "earliest_time": "0",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search2 = new SearchManager({
            "id": "search2",
            "cancelOnUnload": true,
            "latest_time": "$latest$",
            "status_buckets": 0,
            "search": "index=_internal sourcetype=\"splunk_web_access\"  user=admin | eval limit=if(user==\"admin\",700,if(user==\"-\",500,\"NULL\")) | stats  count(uri) as Usage max(limit) as Limit by user  | eval  percent=Usage/Limit*100  | eval  limit4Graph=Limit-Usage  | fields  percent",
            "earliest_time": "0",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search3 = new SearchManager({
            "id": "search3",
            "cancelOnUnload": true,
            "latest_time": "$latest$",
            "status_buckets": 0,
            "search": "index=_internal sourcetype=\"splunk_web_access\"  user=admin | eval limit=if(user==\"admin\",700,if(user==\"-\",500,\"NULL\")) | timechart count(uri)",
            "earliest_time": "0",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});



        //
        // SPLUNK HEADER AND FOOTER
        //

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

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


        //
        // DASHBOARD EDITOR
        //

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


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new ChartElement({
            "id": "element1",
            "charting.legend.placement": "right",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart.stackMode": "stacked",
            "charting.chart": "markerGauge",
            "charting.axisY2.scale": "inherit",
            "charting.axisY2.enabled": "0",
            "charting.axisTitleY.visibility": "visible",
            "charting.layout.splitSeries": "0",
            "charting.chart.bubbleSizeBy": "area",
            "charting.axisY.scale": "linear",
            "charting.axisLabelsX.majorLabelStyle.rotation": "0",
            "charting.chart.style": "shiny",
            "charting.drilldown": "all",
            "charting.axisTitleY2.visibility": "visible",
            "resizable": true,
            "charting.chart.bubbleMaximumSize": "50",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
            "charting.chart.bubbleMinimumSize": "10",
            "charting.axisTitleX.visibility": "visible",
            "charting.axisX.scale": "linear",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();


        var element2 = new ChartElement({
            "id": "element2",
            "charting.legend.placement": "right",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart.stackMode": "stacked",
            "charting.chart": "fillerGauge",
            "charting.axisY2.scale": "inherit",
            "charting.axisY2.enabled": "false",
            "charting.axisTitleY.visibility": "visible",
            "charting.layout.splitSeries": "0",
            "charting.chart.bubbleSizeBy": "area",
            "charting.axisY.scale": "linear",
            "charting.axisLabelsX.majorLabelStyle.rotation": "0",
            "charting.chart.style": "shiny",
            "charting.drilldown": "all",
            "charting.axisTitleY2.visibility": "visible",
            "resizable": true,
            "charting.chart.bubbleMaximumSize": "50",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
            "charting.chart.bubbleMinimumSize": "10",
            "charting.axisTitleX.visibility": "visible",
            "charting.axisX.scale": "linear",
            "managerid": "search2",
            "el": $('#element2')
        }, {tokens: true, tokenNamespace: "submitted"}).render();


        var element3 = new ChartElement({
            "id": "element3",
            "charting.legend.placement": "right",
            "charting.chart.nullValueMode": "gaps",
            "charting.chart.stackMode": "stacked",
            "charting.chart": "line",
            "charting.axisY2.scale": "inherit",
            "charting.axisY2.enabled": "0",
            "charting.axisTitleY.visibility": "visible",
            "charting.layout.splitSeries": "0",
            "charting.chart.bubbleSizeBy": "area",
            "charting.axisY.scale": "linear",
            "charting.axisLabelsX.majorLabelStyle.rotation": "0",
            "charting.chart.style": "shiny",
            "charting.drilldown": "all",
            "charting.axisTitleY2.visibility": "visible",
            "resizable": true,
            "charting.chart.bubbleMaximumSize": "50",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
            "charting.chart.bubbleMinimumSize": "10",
            "charting.axisTitleX.visibility": "visible",
            "charting.axisX.scale": "linear",
            "managerid": "search3",
            "el": $('#element3')
        }, {tokens: true, tokenNamespace: "submitted"}).render();



        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }

        submitTokens();


        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;

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

ngatchasandra
Builder

Hi HattrickNZ,
I tried to do that you want with CSS property Displayto display panels in the same line. In the div that match id=row1, i put Display: block, div that match id=panel1 , i put display: inline-block; float: left; , div that match id=panel2 with margin-left: 2%;, i putdisplay: inline-block; float: left; and div that match id=panel3 i put display: inline-block; with margin-left: 4%;
I have reduced the with of panel3 i put it at 70%.

See the code that match in answer. Try to run it.

0 Karma

ngatchasandra
Builder

Hi HattrickNZ,

Try with margin-left property insise the same marker like follow margin-left: y%;. Here is my xml code which do that you want:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>dashboard_with_panel2 HTML | Splunk</title>
    <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@255606/css/build/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@255606/css/build/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 locale-en">
<!-- 
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system. 
-->
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-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>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>dashboard_with_panel2 HTML</h2>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix" style="width: 33%; margin-left: 95%;">

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>Filler Gauge</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
       <div id="panel2" class="dashboard-cell" style="width: 33.33%; ">
            <div class="dashboard-panel clearfix" style="width: 66%; margin-left: 32%;">

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>Radial Gauge</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel3" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix" style="width: 33%; ">

                <div class="panel-element-row">
                    <div id="element3" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>Marker Gauge</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/contrib/require.js"></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/profiles/shared.js"></script>
<script type="text/javascript">
require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js"
});

//
// 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/dashboardview",
    "splunkjs/mvc/simplexml/dashboard/panelref",
    "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/formutils",
    "splunkjs/mvc/simplexml/eventhandler",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "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,
        PanelRef,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        FormUtils,
        EventHandler,
        DropdownInput,
        RadioGroupInput,
        MultiSelectInput,
        CheckboxGroupInput,
        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());

        function submitTokens() {
            // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
            FormUtils.submitForm({ replaceState: pageLoading });
        }

        function setToken(name, value) {
            defaultTokenModel.set(name, value);
            submittedTokenModel.set(name, value);
        }

        function unsetToken(name) {
            defaultTokenModel.unset(name);
            submittedTokenModel.unset(name);
        }



        //
        // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "latest_time": "$latest$",
            "earliest_time": "$earliest$",
            "search": "index=_internal sourcetype=splunk_web_access | stats count",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search2 = new SearchManager({
            "id": "search2",
            "latest_time": "$latest$",
            "earliest_time": "$earliest$",
            "search": "index=_internal sourcetype=splunk_web_access | stats count",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search3 = new SearchManager({
            "id": "search3",
            "latest_time": "$latest$",
            "earliest_time": "$earliest$",
            "search": "index=_internal sourcetype=splunk_web_access | stats count",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});



        //
        // SPLUNK HEADER AND FOOTER
        //

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

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


        //
        // DASHBOARD EDITOR
        //

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


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new ChartElement({
            "id": "element1",
            "charting.chart": "fillerGauge",
            "resizable": true,
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();


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


        var element3 = new ChartElement({
            "id": "element3",
            "charting.chart": "markerGauge",
            "resizable": true,
            "charting.chart.rangeValues": "[0,\"333333\",\"666666\",\"1000000\"]",
            "charting.gaugeColors": "[0x6cb8ca,0x956e96,0x324969]",
            "charting.chart.style": "shiny",
            "managerid": "search3",
            "el": $('#element3')
        }, {tokens: true, tokenNamespace: "submitted"}).render();



        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }

        submitTokens();


        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;

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

HattrickNZ
Motivator

@ngatchasandra tks very much for that. I think I can get it to what I want. but I have to do alot of paying with these values style="width: 25%; margin-left: 0%; for each row.

style="width: 25%; margin-left: -70%;
style="width: 230%; margin-left: -140%;

Is this the best way of doing this? tks again

0 Karma

HattrickNZ
Motivator

I can't seem to post this as a comment above!!!

So I have posted it in the answer below

0 Karma

ppablo
Retired

Hi @HattrickNZ

Here's a previous answers post on a similar topic you might find useful. It highlights the Splunk 6.x Dashboard Examples app (https://splunkbase.splunk.com/app/1603/ ) that has some useful Simple XML examples, including a Layout Customization example.
http://answers.splunk.com/answers/180028/how-to-change-the-width-of-two-dashboard-panels-in.html

0 Karma

davebrooking
Contributor

Here's another answer that uses the example in the Splunk 6.x Dashboard examples app using Simple XML and a js snippet.

http://answers.splunk.com/answers/149563/simple-xml-display-2-panels-in-a-row-with-different-widths....

Dave

0 Karma

HattrickNZ
Motivator

tks that is basically a js file working on an xml dashboard.

The best I can do is get it to this:
Image and video hosting by TinyPic

snippet from custom_layout_width.js

    // Adjust the cells' width
    $(panelCells[0]).css('width', '20%');
    $(panelCells[1]).css('width', '20%');
   $(panelCells[2]).css('width', '60%');

if I want to do a 10%,10%,80%, setup, it won't work so there is something else at play. Any ideas? Or is there something silly I am doing?

0 Karma

ngatchasandra
Builder

Hi HattrickNZ,
This is very easy if you convert your dashboard in HTML.

After do this, add to the marker div class="dashboard-panel clearfix" that macth the panelx(x=1 or 2 or 3) the style style="width: Y%;" like this div class="dashboard-panel clearfix" style="width: Y%;" and it will to control the panels size. Here is an HTML code example with _internal index. where panel1 and panel3 have 33% and panel2 have 66%. Try to run it!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>dashboard_with_panel2 HTML | Splunk</title>
    <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@255606/css/build/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@255606/css/build/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 locale-en">
<!-- 
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system. 
-->
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-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>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>dashboard_with_panel2 HTML</h2>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix" style="width: 33%;">

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>Filler Gauge</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel2" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix" style="width: 66%;">

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>Radial Gauge</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panel3" class="dashboard-cell" style="width: 33.33%;">
            <div class="dashboard-panel clearfix" style="width: 33%;">

                <div class="panel-element-row">
                    <div id="element3" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>Marker Gauge</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/contrib/require.js"></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/profiles/shared.js"></script>
<script type="text/javascript">
require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js"
});

//
// 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/dashboardview",
    "splunkjs/mvc/simplexml/dashboard/panelref",
    "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/formutils",
    "splunkjs/mvc/simplexml/eventhandler",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "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,
        PanelRef,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        FormUtils,
        EventHandler,
        DropdownInput,
        RadioGroupInput,
        MultiSelectInput,
        CheckboxGroupInput,
        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());

        function submitTokens() {
            // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
            FormUtils.submitForm({ replaceState: pageLoading });
        }

        function setToken(name, value) {
            defaultTokenModel.set(name, value);
            submittedTokenModel.set(name, value);
        }

        function unsetToken(name) {
            defaultTokenModel.unset(name);
            submittedTokenModel.unset(name);
        }



        //
        // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "latest_time": "$latest$",
            "earliest_time": "$earliest$",
            "search": "index=_internal sourcetype=splunk_web_access | stats count",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search2 = new SearchManager({
            "id": "search2",
            "latest_time": "$latest$",
            "earliest_time": "$earliest$",
            "search": "index=_internal sourcetype=splunk_web_access | stats count",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search3 = new SearchManager({
            "id": "search3",
            "latest_time": "$latest$",
            "earliest_time": "$earliest$",
            "search": "index=_internal sourcetype=splunk_web_access | stats count",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});



        //
        // SPLUNK HEADER AND FOOTER
        //

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

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


        //
        // DASHBOARD EDITOR
        //

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


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new ChartElement({
            "id": "element1",
            "charting.chart": "fillerGauge",
            "resizable": true,
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();


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


        var element3 = new ChartElement({
            "id": "element3",
            "charting.chart": "markerGauge",
            "resizable": true,
            "charting.chart.rangeValues": "[0,\"333333\",\"666666\",\"1000000\"]",
            "charting.gaugeColors": "[0x6cb8ca,0x956e96,0x324969]",
            "charting.chart.style": "shiny",
            "managerid": "search3",
            "el": $('#element3')
        }, {tokens: true, tokenNamespace: "submitted"}).render();



        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }

        submitTokens();


        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;

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

HattrickNZ
Motivator

tksm that works but now, how do I group them together, so they fill the grey space.

Image and video hosting by TinyPic

Is this straightforward?

tks

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...