Dashboards & Visualizations

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

chrismok
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)

josesolis
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.

musskopf
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

davebrooking
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

chrismok
Path Finder

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

0 Karma

musskopf
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
= = =

chrismok
Path Finder

OMG.......

0 Karma

musskopf
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

chrismok
Path Finder

I am using 6.1 version.

0 Karma

musskopf
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

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

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

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

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

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

Extending Observability Content to Splunk Cloud

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