Dashboards & Visualizations
Highlighted

Can I change panel width in a dashboard using Simple XML?

Path Finder

I have 3 single panels and a table on a row in a dashboard

<dashboard>
   *...*
   *...*
   *...*
   <row>
      <panel><single><search base="Results"><query>table $TheGood$</query></search></single&gt;</panel>
      <panel><single><search base="Results"><query>table $TheBad$</query></search></single></panel>
      <panel><single><search base="Results"><query>table $TheUgly$</query></search></single></panel>
      <panel>
         <table>
            <search base="Results">
               <query>table This, That, and More;</query>
            </search>
         </table>
      </panel>
   <row>
</dashboard> 

However, I would like to have each single only take up 15% of the row, and the remaining 55% taken up by the table. Currently, the row gives each panel 25% space for its content (4 panels split 4-ways gives 25% for each panel). Is there any way to override the defaults using simple xml?

0 Karma
Highlighted

Re: Can I change panel width in a dashboard using Simple XML?

Contributor

There are some examples in the developer's docs: Charts Using Simple XML. You may also wish to download the Dashboard Examples for Splunk 6. So you can do it, but it's not as simple as plugging in an option tag, unfortunately, as you can do for height. Dashboards and Visualizations Reference.

0 Karma
Highlighted

Re: Can I change panel width in a dashboard using Simple XML?

Path Finder

Yes, it is not easy. So far, the simplest method has been to just make two panels on the row, and setup an html table in the first one, like this:

<dashboard>
   *...*
   *...*
   *...*
   <row>
      <panel>
         <html>
            <table style="width:100% !important;">
               <tr>
                  <td style="width:33% !important;">$TheGood$</td>
                  <td style="width:33% !important;">$TheBad$</td>
                  <td style="width:33% !important;">$TheUgly$</td>
               </tr>
            </table>
         </html>
      </panel>
      <panel>
         <table>
            <search base="Results">
               <query>table This, That, and More;</query>
            </search>
         </table>
      </panel>
   <row>
</dashboard> 

As there are only two panels, it splits the row evenly and gives each panel 50% of the row. It's as close as I can get and still keep things simple. Since I'm using tokens, it isn't much of a switch from displaying within a simple xml panel, or an html panel.

0 Karma
Highlighted

Re: Can I change panel width in a dashboard using Simple XML?

Motivator

hi,
this is an example of code that does the same job

<dashboard script="custom_layout_width.js">
  <label>Layout Customization: Panel Width</label>
  <row>
      <single>
        <searchString>index=_internal sourcetype=splunkd | stats count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
        <option name="underLabel">splunkd events</option>
        <option name="linkView">search</option>
        <option name="drilldown">none</option>
      </single>
      <single>
        <searchString>index=_internal sourcetype=*access | stats count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
        <option name="underLabel">access events</option>
      </single>
      <chart>
        <searchString>index=_internal | timechart count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
      </chart>
  </row>
  <row>
      <table>
        <searchString>index=_internal | stats count by sourcetype</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
      </table>
  </row>
</dashboard>

next you add the customlayoutwidth.js

require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
    // Grab the DOM for the first dashboard row
    var firstRow = $('.dashboard-row').first();
    // Get the dashboard cells (which are the parent elements of the actual panels and define the panel size)
    var panelCells = $(firstRow).children('.dashboard-cell');
    // Adjust the cells' width
    $(panelCells[0]).css('width', '20%');
    $(panelCells[1]).css('width', '20%');
    $(panelCells[2]).css('width', '60%');
});