Dashboards & Visualizations

How do I use HTML on multiple panels?

danielbb
Motivator

I want to use HTML on multiple panels in order to create a custom layout of my Splunk Dashboard. I want to use this layout where each rectangle is a panel -

dashboard_layout.png
Please advise. Is this possible to implement in a Splunk Dashboard?

Labels (2)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust

This is easy to do in Dashboard Studio. Either use absolute or grid layouts.

View solution in original post

tscroggins
Influencer

Hi @danielbb,

As an alternative in Simple XML, you can stack visualizations vertically by including more than one visualization in a panel:

 

<row>
  <!-- first row -->
  <panel>
  </panel>
</row>
<row>
  <panel>
    <!-- second row, first column -->
  </panel>
  <panel>
    <chart>
      <!-- second row, second column, first row -->
    </chart>
    <chart>
      <!-- second row, second column, second row -->
    </chart>
    <chart>
      <!-- second row, second column, third row -->
    </chart>
  </panel
</row>

 

Some visualizations may require an empty spacer, e.g. an <html/> section, to defeat the auto-layout code. Here's an extended example using an inverse normal macro (not shown) to generate a bit of random data:

 

<dashboard version="1.1" theme="light">
  <label>danielbb_layout</label>
  <search id="base">
    <query>| gentimes start=11/29/2024:00:00:00 end=11/30/2024:00:00:00 increment=1m 
| eval _time=starttime 
| fields + _time 
| sort 0 - _time 
| eval x=`norminv("`rand()`*(0.9999999999999999-0.0000000000000001)+0.0000000000000001", 1.3, 10)`</query>
  </search>
  <search id="stats" base="base">
    <query>| stats avg(x) as u stdev(x) as s</query>
  </search>
  <row>
    <panel>
      <html>
        <h1>Some Random Data</h1>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <chart>
        <title>Histogram</title>
        <search base="base">
          <query>| chart count over x span=0.5</query>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">600</option>
      </chart>
    </panel>
    <panel>
      <chart>
        <title>Samples</title>
        <search base="base"></search>
        <option name="charting.legend.placement">none</option>
      </chart>
      <single>
        <title>Mean</title>
        <search base="stats">
          <query>| fields u</query>
        </search>
        <option name="numberPrecision">0.000</option>
      </single>
      <html/>
      <single>
        <title>Standard Deviation</title>
        <search base="stats">
          <query>| fields s</query>
        </search>
        <option name="numberPrecision">0.000</option>
      </single>
    </panel>
  </row>
</dashboard>

 

tscroggins_0-1732993457670.png

dural_yyz
Motivator

Awesome information - thank you for demo and tips.

dural_yyz
Motivator

Classic XML dashboards wont let you extend multiple rows.

ITWhisperer
SplunkTrust
SplunkTrust

This is easy to do in Dashboard Studio. Either use absolute or grid layouts.

Get Updates on the Splunk Community!

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

This is the second post in our Splunk Observability Cloud’s AI Assistant in Action series, in which we look at ...

Elevate Your Organization with Splunk’s Next Platform Evolution

 Thursday, July 10, 2025  |  11AM PDT / 2PM EDT Whether you're managing complex deployments or looking to ...

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...