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 -
Please advise. Is this possible to implement in a Splunk Dashboard?
1 Solution
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>
