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

Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...

New in Observability Cloud - Explicit Bucket Histograms

Splunk introduces native support for histograms as a metric data type within Observability Cloud with Explicit ...