topic Re: How to customize the width of panels in an HTML dashboard? in Dashboards & Visualizations

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

chrismok — Thu, 04 Sep 2014 09:21:40 GMT

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>

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

musskopf — Thu, 04 Sep 2014 23:46:53 GMT

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.

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

chrismok — Fri, 05 Sep 2014 01:57:21 GMT

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>

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

musskopf — Fri, 05 Sep 2014 02:28:53 GMT

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

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

chrismok — Fri, 05 Sep 2014 02:31:58 GMT

I am using 6.1 version.

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

musskopf — Fri, 05 Sep 2014 02:58:39 GMT

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

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

chrismok — Thu, 11 Sep 2014 16:21:59 GMT

OMG.......

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

josesolis — Thu, 11 Sep 2014 20:13:18 GMT

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

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

musskopf — Fri, 12 Sep 2014 01:15:53 GMT

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

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

davebrooking — Fri, 12 Sep 2014 04:19:19 GMT

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

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

chrismok — Mon, 15 Sep 2014 03:22:59 GMT

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