Dashboards & Visualizations

How to change the width of panels in xml?

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

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

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.

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

Engager

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

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

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

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

New Member

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

0 Karma

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

brilliant solution, very helpful

0 Karma

New Member

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

0 Karma

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

Contributor

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

Communicator

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

0 Karma

Motivator

Wow. That's awesome.

0 Karma

New Member

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

0 Karma

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!!!"

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

Motivator

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

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

Communicator

thanks kamaron 🙂

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!