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!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

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

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...