Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

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

HattrickNZ
Motivator
‎03-22-2015 07:00 PM

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
Reply
1 Solution
Solved! Jump to solution
Solution

HattrickNZ
Motivator
‎03-24-2015 01:43 PM

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
Reply
Solved! Jump to solution

butzowj
Path Finder
‎10-27-2015 05:17 AM

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
Reply
Solved! Jump to solution

ngatchasandra
Builder
‎03-26-2015 06:57 AM

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
Reply
Solved! Jump to solution

ngatchasandra
Builder
‎03-31-2015 08:37 AM

Please, let me know if you satisfy!

0 Karma
Reply
Solved! Jump to solution

ngatchasandra
Builder
‎03-10-2016 02:13 AM

Hi HattrickNZ,

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

0 Karma
Reply
Solved! Jump to solution
Solution

HattrickNZ
Motivator
‎03-24-2015 01:43 PM

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
Reply
Solved! Jump to solution

ngatchasandra
Builder
‎03-26-2015 06:56 AM

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
Reply
Solved! Jump to solution

ngatchasandra
Builder
‎03-24-2015 06:20 AM

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
Reply
Solved! Jump to solution

HattrickNZ
Motivator
‎03-24-2015 07:46 PM

@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
Reply
Solved! Jump to solution

HattrickNZ
Motivator
‎03-24-2015 01:40 PM

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

So I have posted it in the answer below

0 Karma
Reply
Solved! Jump to solution

ppablo
Retired
‎03-23-2015 05:00 PM

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
Reply
Solved! Jump to solution

davebrooking
Contributor
‎03-24-2015 03:18 PM

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
Reply
Solved! Jump to solution

HattrickNZ
Motivator
‎03-24-2015 04:48 PM

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
Reply
Solved! Jump to solution

ngatchasandra
Builder
‎03-23-2015 02:44 AM

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>
Reply
Solved! Jump to solution

HattrickNZ
Motivator
‎03-23-2015 06:43 PM

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
Reply
Get Updates on the Splunk Community!

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Survey for Splunk Admins and App Developers is open now! | Earn a $35 gift card!      Hello there,  Splunk ...

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

You’ve probably heard the latest about AppDynamics joining the Splunk Observability portfolio, deepening our ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...