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!

Demo Day: Strengthen Your SOC with Splunk Enterprise Security 8.1

Today’s threat landscape is more complex than ever. Security operation centers (SOCs) are overwhelmed with ...

Dashboards: Hiding charts while search is being executed and other uses for tokens

There are a couple of features of SimpleXML / Classic dashboards that can be used to enhance the user ...

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

This is the fourth post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how ...