Dashboards & Visualizations

How to change the width of panels in xml?

auaave
Communicator

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!

1 Solution

niketn
Legend

@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:

alt text

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>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

maxzintel
Path Finder

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.

randyc1
New Member

The solution I found was to make the CSS panel 0% by adding an id on the CSS panel and another entry in the CSS code

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

SpeschLOne
Explorer

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

0 Karma

Martin_Doering
Explorer

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

0 Karma

maxzintel
Path Finder

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

0 Karma

nagarajsf
Explorer

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>

`

0 Karma

sainudaniel
New Member

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

0 Karma

niketn
Legend

@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:

alt text

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>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

aditi1996verma
Engager

brilliant solution, very helpful

0 Karma

rajaguru27902
New Member

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

0 Karma

nagarajsf
Explorer

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>
0 Karma

jaxjohnny2000
Builder

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!

0 Karma

auaave
Communicator

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

0 Karma

kmaron
Motivator

Wow. That's awesome.

0 Karma

sainudaniel
New Member

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

0 Karma

niketn
Legend

@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_pr...

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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

niketn
Legend

@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. 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

kmaron
Motivator

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

kmaron
Motivator

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/

0 Karma

auaave
Communicator

thanks kamaron 🙂

0 Karma
Get Updates on the Splunk Community!

Introduction to Splunk Observability Cloud - Building a Resilient Hybrid Cloud

Introduction to Splunk Observability Cloud - Building a Resilient Hybrid Cloud  In today’s fast-paced digital ...

Observability protocols to know about

Observability protocols define the specifications or formats for collecting, encoding, transporting, and ...

Take Your Breath Away with Splunk Risk-Based Alerting (RBA)

WATCH NOW!The Splunk Guide to Risk-Based Alerting is here to empower your SOC like never before. Join Haylee ...