Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

mrfredman — Wed, 25 Mar 2015 18:12:46 GMT

Hi,

I was wondering if it was possible to have a dashboard panel expand to multiple rows. I currently have 3 panels setup on 2 rows. By default they look like:

    A | B
    C | C

Is it possible to reorganize them so they look like:

    A | B
    A | C

Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

Tanefo — Mon, 30 Mar 2015 12:41:17 GMT

hi
it is not possible because rows are based on horizontales to function.

Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

ngatchasandra — Wed, 08 Apr 2015 16:12:37 GMT

Hi mrfredman,

This is not possible because, Splunk identifies rows as major breaks , so you can't expand a panel across two or more than three rows.

Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

woodcock — Sun, 17 Dec 2017 14:49:32 GMT

Splunk has an update to the Dashboard design that will allow this kind of thing but I have no idea if they are going to be releasing it or when. You should open an ER case so that you can get the details on that feature.

Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

niketn — Sun, 17 Dec 2017 17:35:13 GMT

@mrfredman, until the time this feature is released as @woodcock has mentioned, you can use CSS and HTML to design dashboard layout as per your needs, through Simple XML CSS Extension.

I have attached a sample dashboard with CSS override example. However, CSS would be based on need. I have added id to all panel and the first pie chart to override CSS easily with id selectors.

  <row depends="$alwaysHideCSS$">
    <panel>
      <html>
        <style>
          <!-- Panel1 and Panel3 to occupy 30% width -->
          #panel1.dashboard-cell.dashboard-layout-panel{
            width: 30% !important;
          }

          #panel3.dashboard-cell.dashboard-layout-panel{
            width: 30% !important;
          }
          <!-- Panel2 to occupy 70% width -->
          #panel2.dashboard-cell.dashboard-layout-panel{
            width: 70% !important;
          }
          <!-- Panel1 reduced to occupy half the height of Panel1-->
          #chart1 #pie.viz-controller
          {
            height: 50% !important;
          }
          <!-- Panel3 manual override to fit in 50% space created in Panel1-->
          #panel3 .panel-element-row
          {
              position: absolute !important;
              width: 99.3% !important;
              top: -180px !important;
          }
        </style>
       </html>
    </panel>
  </row>

Following is the complete run anywhere dashboard Simple XML code for reference:

<form>
  <label>Single Panel in 2 Rows</label>
  <fieldset submitButton="false">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row depends="$alwaysHideCSS$">
    <panel>
      <html>
        <style>
          <!-- Panel1 and Panel3 to occupy 30% width -->
          #panel1.dashboard-cell.dashboard-layout-panel{
            width: 30% !important;
          }

          #panel3.dashboard-cell.dashboard-layout-panel{
            width: 30% !important;
          }
          <!-- Panel2 to occupy 70% width -->
          #panel2.dashboard-cell.dashboard-layout-panel{
            width: 70% !important;
          }
          <!-- Panel1 reduced to occupy half the height of Panel1-->
          #chart1 #pie.viz-controller
          {
            height: 50% !important;
          }
          <!-- Panel3 manual override to fit in 50% space created in Panel1-->
          #panel3 .panel-element-row
          {
              position: absolute !important;
              width: 99.3% !important;
              top: -180px !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel id="panel1">
      <chart id="chart1">
        <title>Top 5 Splunkd Errors (excluding highest errors)</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| top 6 component showperc=f
| tail 5</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">none</option>
        <option name="height">388</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel id="panel2">
      <chart>
        <title>Error Timechart</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count by log_level</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="charting.chart">area</option>
        <option name="charting.chart.stackMode">stacked</option>
        <option name="charting.drilldown">all</option>
        <option name="height">390</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel id="panel3">
      <single>
        <title>Splunkd Errors - Single Value</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="underLabel">Splunkd Errors</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
</form>

Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

sssignals — Fri, 15 Jun 2018 15:44:54 GMT

Hi niketnilay, thanks so much. Just the sample code that I needed to experiment for my work.

topic Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns? in Dashboards & Visualizations

Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?

Re: Is it possible to have a dashboard panel expand to multiple rows, not just multiple columns?