Can I change panel width in a dashboard using Simp...

ArthurGautesen · ‎11-17-2015

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?

gyslainlatsa · ‎01-06-2016

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 custom_layout_width.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%');
});

ArthurGautesen · ‎01-06-2016

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.

nnmiller · ‎11-17-2015

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.

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

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life