Dashboards & Visualizations

How to customize the width of panels in an HTML dashboard?

Path Finder

Hi All,

I have a sample dashboard using HTML.

There's 3 panels in one row. And I would like to assign the different width to these panels..... say 20% for first panels, 30% for second panels, 50% for third panels.

After upload the HTML to Splunk and run the dashboard. The system will modify the width to 33.33% for these 3 panels like the following coding.....

So I would like to know how we can customize the width in dashboard.

<div class="dashboard-row dashboard-row1">
<div class="dashboard-cell" style="width: 33.3333%;">
<div class="dashboard-panel clearfix" style="min-height: 315px;">
<div class="panel-element-row">
<div id="element1" class="dashboard-element map" style="width: 100%;">
</div>
</div>
</div>
<div class="dashboard-cell" style="width: 33.3333%;">
<div class="dashboard-panel clearfix" style="min-height: 315px;">
<div class="panel-element-row">
<div id="element2" class="dashboard-element chart splunk-view" style="width: 100%">
</div>
</div>
</div>
<div class="dashboard-cell last-visible" style="width: 33.3333%;">
<div class="dashboard-panel clearfix" style="min-height: 315px;">
<div class="panel-element-row">
<div id="element3" class="dashboard-element chart" style="width: 100%">
</div>
</div>
</div>
Tags (3)

Splunk Employee
Splunk Employee

As a workaround try using min-width instead of width as an attribute or style=" width: 70% !important". I have tried this on chrome.

Builder

Just change the line:

<div class="dashboard-cell" style="width: 33.3333%;">

and define the "width: 20%;", it'll look like that:

<div class="dashboard-cell" style="width: 20%;">

I did that using the HTML Editor inside Splunk and works for me.

0 Karma

Contributor

I know the question specifically states a html dashboard, but I've used the following javascript detailed in this answer with Simple XML using Splunk 6.1.1 - could it also be applied to a HTML dashboard?

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

Dave

0 Karma

Path Finder

Tried. This method only worked in Chrome, but not worked in Firefox

0 Karma

Builder

Here the feedback from Splunk Support:
= = =
Hi xxxx,

It looks like a regression the fix will be shipped in the ver 6.1.5.
As a workaround for that - as updated in the splunk answers - try the below;

style=" width: 70% !important".

http://answers.splunk.com/answers/154120/how-to-customize-the-width-of-panels-in-an-html-dashboard

Hope it helps and feel free to ask should you need more assistance on this.

Best regards,
Sung | Splunk Support
= = =

Path Finder

OMG.......

0 Karma

Builder

Yes, I just opened my old VM running 6.0x and works there. I'll raise a support ticket to report this bug! If you have access to the support, pls do the same! Cheers

Path Finder

I am using 6.1 version.

0 Karma

Builder

Hi Chrismok,

What version of Splunk are you running?!

Asking that because it was working fine over here on 6.0.2 but I just upgrade the environment couple of weeks ago and now it's presenting the same error as you're describing. Maybe that's a bug introduced by the new feature of resizing SimpleXML width 😞

Now we're two looking for the same solution

Path Finder

Still not work, I cant create the dashboard and paste the following code to your splunk server. And you will see that the width will become 33.33333% again....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Testing HTML | Splunk</title>
    <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/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">
    <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>Testing HTML</h2>
        <p class="description"></p>
    </div>
    <div class="dashboard-row dashboard-row1">
        <div class="dashboard-cell" style="width: 20%;">
            <div class="dashboard-panel clearfix">                
                <div class="panel-element-row">
                    <div class="dashboard-element chart" id="element1" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-cell" style="width: 30%;">
            <div class="dashboard-panel clearfix">                
                <div class="panel-element-row">
                    <div class="dashboard-element chart" id="element2" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel clearfix">                
                <div class="panel-element-row">
                    <div class="dashboard-element chart" id="element3" style="width: 100%">
                        <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/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/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,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        FormUtils,
        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",
            "earliest_time": "",
            "cancelOnUnload": true,
            "latest_time": "",
            "status_buckets": 0,
            "search": "sourcetype=* |stats count by host| fields - host",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search2 = new SearchManager({
            "id": "search2",
            "earliest_time": "",
            "cancelOnUnload": true,
            "latest_time": "",
            "status_buckets": 0,
            "search": "sourcetype=* |stats count by host| fields - host",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search3 = new SearchManager({
            "id": "search3",
            "earliest_time": "",
            "cancelOnUnload": true,
            "latest_time": "",
            "status_buckets": 0,
            "search": "sourcetype=* |stats count by host| fields - host",
            "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
        }, {tokens: true}).render();

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


        //
        // DASHBOARD EDITOR
        //

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


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

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


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


        var element3 = new ChartElement({
            "id": "element3",
            "charting.axisX.scale": "linear",
            "charting.chart.style": "shiny",
            "charting.legend.placement": "right",
            "charting.axisTitleY2.visibility": "visible",
            "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
            "charting.drilldown": "all",
            "charting.chart.stackMode": "default",
            "charting.axisTitleX.visibility": "visible",
            "charting.chart.nullValueMode": "gaps",
            "charting.axisTitleY.visibility": "visible",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.layout.splitSeries": "0",
            "charting.axisY.scale": "linear",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "resizable": true,
            "charting.axisY2.scale": "inherit",
            "charting.axisY2.enabled": "0",
            "charting.axisLabelsX.majorLabelStyle.rotation": "0",
            "charting.chart": "fillerGauge",
            "managerid": "search3",
            "el": $('#element3')
        }, {tokens: true}).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
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!