topic How to change the width of panels in xml? in Dashboards & Visualizations

How to change the width of panels in xml?

auaave — Mon, 26 Mar 2018 12:09:47 GMT

Hi Guys,

On a row of my dashboard, I have a single value, statistics table and line chart. How can I make the width of the single value to 25%, statistics table to 30% and line chart to 45% of the total width in xml?

Thanks a lot!

Re: How to change the width of panels in xml?

kmaron — Mon, 26 Mar 2018 12:51:22 GMT

Splunk distributes the width evenly automatically and you can't change it using XML. The only way to customize is with a JavaScript file.

This app might help: https://splunkbase.splunk.com/app/1603/

Re: How to change the width of panels in xml?

niketn — Mon, 26 Mar 2018 13:28:24 GMT

@auaave, if you can add id to each of your panels you can use CSS override to adjust the panel width. For example <panel id="errorSinglePanel">,<panel id="errorStatsPanel">, <panel id="errorLineChartPanel"> then following CSS should do the trick

<panel depends="$alwaysHideCSS$">
  <html>
    <style>
      #errorSinglePanel{
        width:25% !important;
      }
      #errorStatsPanel{
        width:30% !important;
      }
      #errorLineChartPanel{
        width:45% !important;
      }
    </style>
  </html>
</panel>

Consider the following run any where dashboard example to test out:

Following is Simple XML code:

<form>
  <label>Adjust Width of Panels in Dashboard</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label>Select Time</label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHideCSS$">
      <html>
        <style>
          #errorSinglePanel{
            width:25% !important;
          }
          #errorStatsPanel{
            width:30% !important;
          }
          #errorLineChartPanel{
            width:45% !important;
          }
        </style>
      </html>
    </panel>
    <panel id="errorSinglePanel">
      <title>Splunkd Errors (Single Value)</title>
      <single>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">inverse</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel id="errorStatsPanel">
      <title>Top 5 Error (Stats)</title>
      <table>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| top 5 component showperc=false</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel id="errorLineChartPanel">
      <title>Splunkd Errors (Timechart)</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">line</option>
        <option name="charting.drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>

Re: How to change the width of panels in xml?

kmaron — Mon, 26 Mar 2018 13:49:50 GMT

Wow. That's awesome.

Re: How to change the width of panels in xml?

niketn — Mon, 26 Mar 2018 13:57:30 GMT

@kmaron, yup having an option to override CSS using hidden html panels in Simple XML Dashboard does allow the flexibility of avoiding static file dependency and implies changes would reflect immediately without Splunk Admin dependency and refresh of Splunk environment. 🙂

Re: How to change the width of panels in xml?

kmaron — Mon, 26 Mar 2018 13:59:05 GMT

I was always told that the CSS would be overwritten so JavaScript was the only way. This has totally made my day!

Re: How to change the width of panels in xml?

auaave — Tue, 27 Mar 2018 00:22:58 GMT

Thanks a lot @niketnilay!! This is great! 🙂

Re: How to change the width of panels in xml?

auaave — Tue, 27 Mar 2018 00:23:31 GMT

thanks kamaron 🙂

Re: How to change the width of panels in xml?

sainudaniel — Fri, 09 Nov 2018 00:47:12 GMT

Is it possible to adjust the height of some panels in same dashboard ?

Re: How to change the width of panels in xml?

sainudaniel — Fri, 09 Nov 2018 00:51:02 GMT

Thank you.That is wonderful.
The same way, is there an option to adjust the height of a panel?

Re: How to change the width of panels in xml?

niketn — Fri, 09 Nov 2018 06:14:45 GMT

@sainudaniel, there are couple of options:

1) Simple XML chart configuration allows option name height for charts (not table).

     <option name="height">400</option>

Using this approach if you increase the height of one panel other panels in the same row will adjust automatically. If you reduce you would need to reduce for all panels in the same row or else remaining will take height of biggest panel in the row. Refer to Splunk Documentation: https://docs.splunk.com/Documentation/Splunk/latest/Viz/ChartConfigurationReference#General_chart_properties

2) Use CSS Selector for each panel in the row, you can set height directly. PS: min-height would need to be reduced for panel in case you need to reduce the height.
Here is an example in Trellis Layout for finding CSS selector for override: https://answers.splunk.com/answers/562662/using-trellis-with-simple-xml-extension.html

You would need to find/adjust CSS override as per your need.

Here is an option to change table height using CSS Selector: https://answers.splunk.com/answers/684166/how-to-change-table-height-when-no-results-are-fou-1.html

Re: How to change the width of panels in xml?

jaxjohnny2000 — Tue, 11 Jun 2019 19:10:12 GMT

Works like a champ! Copy the entire codeset into and replace a test panel. Then work with the hidden panel, one per row. Done! Perfect! Can have different sized for different panels based on the panel. Terrific!

Re: How to change the width of panels in xml?

nagarajsf — Mon, 28 Oct 2019 20:34:32 GMT

Hi,

I'm trying to achieve same functionality but it throwing some exception like below,

Warning on line 3: Node is not allowed here

and here is the panel

`
test

   <html>
     <style>
       #ticketStatusPanel{
         width:25% !important;
       }
       #countTicketPanel{
         width:75% !important;
       }

     </style>
   </html>

Re: How to change the width of panels in xml?

nagarajsf — Mon, 28 Oct 2019 21:03:51 GMT

Hi,

when I trying to insert CSS panel it throwing below error,

Warning on line 3: Node is not allowed here

and here is the panel

test

<html>
  <style>
    #ticketStatusPanel{
      width:25% !important;
    }
    #countTicketPanel{
      width:75% !important;
    }

  </style>
</html>

Re: How to change the width of panels in xml?

rajaguru27902 — Wed, 20 Nov 2019 20:02:31 GMT

Thanks. It worked in new version. How to accomplish same in Version 6.0.7

Re: How to change the width of panels in xml?

maxzintel — Fri, 31 Jan 2020 16:52:43 GMT

FYI: It looks like this solution does not work on Splunk 7.3.3. Unsure why yet, will update if I figure it out. We had implemented it previously and it worked as expected, now Splunk seems to ignore the css override and equally spaces the panels anyways.

Re: How to change the width of panels in xml?

SpeschLOne — Mon, 17 Feb 2020 20:58:07 GMT

Hi, maxzintel,

I had the same issue after our update to 7.3.3, and I just found the thread below that points to a workaround. I was able to put the

Re: How to change the width of panels in xml?

maxzintel — Tue, 18 Feb 2020 14:41:47 GMT

@SpeschLOne for some reason I cannot see the end of your comment. However, we found a workaround as well. We had to create a file /opt/splunk/etc/apps/search/appserver/static/{someName}.css. In it we added the custom css required to resize the panels and then referenced that in the form element on line 1 of the XML. After deleting all the ghost panels that aren’t working anymore everything worked as expected.

Re: How to change the width of panels in xml?

Martin_Doering — Wed, 04 Mar 2020 06:25:32 GMT

We also have the same issue with 7.3.3, and have found the following workaround: simply add an empty paragraph in the HTML code before the style tag:

<html>

  <p/>

  <style>

     ...

Re: How to change the width of panels in xml?

aditi1996verma — Wed, 22 Apr 2020 10:32:07 GMT

brilliant solution, very helpful