Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
Ask a Question

Multiple single values in one panel alignment

schou87
Path Finder
‎05-19-2021 12:11 AM

Hi,

I have 2 rows in my dashboard. 3 single value elements in a panel in first row and one table in second row. These 3 single values dont seem to align themselves properly. They seem to be left aligned. Is there a way to center these elements in the panel?

Regards

Labels (3)
Labels
0 Karma
Reply

schou87
Path Finder
‎05-19-2021 06:12 AM

Hi,

My single values are in trellis mode -medium. I could adjust the alignment by changing them to large.

But now I am getting vertical and horizontal scrollbar. Is there any way to get rid of them?

Regards

0 Karma
Reply

bowesmana
SplunkTrust
SplunkTrust
‎05-19-2021 01:07 AM

Can you provide an example of that - three single value elements in a single panel in a row would normally be spaced evenly, horizontally across the row.

Can you share your XML?

0 Karma
Reply

schou87
Path Finder
‎05-19-2021 01:53 AM
@bowesmana wrote:

Can you provide an example of that - three single value elements in a single panel in a row would normally be spaced evenly, horizontally across the row.

Can you share your XML?

Below is the xml.

<form theme="dark">
<label>Data</label>
<search>
<query> base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | chart limit=13 count over Date BY comp1 | sort -Date | head 6</query>
</search>
<fieldset submitButton="false"></fieldset>
<row>
<panel id="panel_layout">
<input id="input_link_split_by" type="link" token="unused">
<label>Choose a view</label>
<choice value="table">Consolidated</choice>
<choice value="chart">Daily report</choice>
<choice value="table1">Request</choice>
<default>Table</default>
<change>
<condition value="table">
<set token="showTable">true</set>
<unset token="showChart"></unset>
<unset token="showTable1"></unset>
</condition>
<condition value="chart">
<set token="showChart">true</set>
<unset token="showTable"></unset>
<unset token="showTable1"></unset>
</condition>
<condition value="table1">
<set token="showTable1">true</set>
<unset token="showChart"></unset>
<unset token="showTable"></unset>
</condition>
</change>
</input>
<html>
<style> /* This Layout Panel Bottom Padding removed to merge Link Input with horizontal line */
#panel_layout .fieldset{
padding: 10px 12px 0px 12px !important;
}
/* Increase width of Link input to have options in Single Line */
#input_link_split_by.input-link{
width: 720px !important;
}
/* Change from flex to -webkit-box for side by side layout */
#input_radio_split_by.input-link div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
display: -webkit-box !important;
}
/* Create Button Border to make them appear as Tabs */
#input_link_split_by.input-link button{
width: 200px !important;
border-top-color: rgb(255, 255, 255);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(255, 255, 255);
border-right-style: solid;
border-right-width: 1px;
border-left-color: rgb(255, 255, 255);
border-left-style: solid;
border-left-width: 1px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* Hide link input bottom message section to merge with Horizontal line */
.dashboard-panel #input_link_split_by label,
#input_link_split_by .splunk-choice-input-message{
display: none !important;
}
/* Remove padding from horizontal line */
#panel_layout .panel-body.html{
padding: 0px !important;
}
</style>
<hr style="height:1px;border-width:0;color: black;background-color: white;margin: 0px;"/>
</html>
</panel>
</row>
<row>
<panel depends="$showTable$">
<html>
<style>
.panel1 {
width: 120% !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel id="panel1">
<single depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | where comp="new comp" | stats values(percent) by comp </query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="drilldown">none</option>
<option name="height">151</option>
<option name="numberPrecision">0.00</option>
<option name="rangeColors">["0x53a051","0x53a051"]</option>
<option name="rangeValues">[100]</option>
<option name="refresh.display">progressbar</option>
<option name="showSparkline">1</option>
<option name="trellis.enabled">1</option>
<option name="trellis.size">medium</option>
<option name="trellis.splitBy">comp</option>
<option name="unit">%</option>
<option name="useColors">1</option>
</single>
<single depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | where comp="PENDING"| stats values(percent) by comp </query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="drilldown">none</option>
<option name="height">136</option>
<option name="numberPrecision">0.00</option>
<option name="rangeColors">["0xf8be34","0xf8be34"]</option>
<option name="rangeValues">[100]</option>
<option name="refresh.display">progressbar</option>
<option name="showSparkline">1</option>
<option name="trellis.enabled">1</option>
<option name="trellis.size">medium</option>
<option name="trellis.splitBy">comp</option>
<option name="unit">%</option>
<option name="useColors">1</option>
</single>
<single depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | where comp="ERROR" | stats values(percent) by comp </query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="drilldown">none</option>
<option name="height">179</option>
<option name="numberPrecision">0.00</option>
<option name="rangeColors">["0xdc4e41","0xdc4e41"]</option>
<option name="rangeValues">[100]</option>
<option name="refresh.display">progressbar</option>
<option name="showSparkline">1</option>
<option name="trellis.enabled">1</option>
<option name="trellis.size">medium</option>
<option name="trellis.splitBy">comp</option>
<option name="unit">%</option>
<option name="useColors">1</option>
</single>
</panel>
</row>
<row>
<panel depends="$showTable$">
<html>
<style>
#table1 .table th, .table td {
text-align: center!important;
}
</style>
</html>
<table id="table1" depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | chart limit=13 count over Date comp1 | sort -Date | head 6</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="dataOverlayMode">heatmap</option>
<option name="drilldown">cell</option>
<option name="rowNumbers">true</option>
<format type="color" field="new comp">
<colorPalette type="minMidMax" maxColor="#53A051" minColor="#FFFFFF"></colorPalette>
<scale type="minMidMax"></scale>
</format>
<format type="color" field="PENDING">
<colorPalette type="minMidMax" maxColor="#F8BE34" minColor="#FFFFFF"></colorPalette>
<scale type="minMidMax"></scale>
</format>
<format type="color" field="ERROR">
<colorPalette type="minMidMax" maxColor="#DC4E41" minColor="#FFFFFF"></colorPalette>
<scale type="minMidMax"></scale>
</format>
</table>
</panel>
</row>
</form>

0 Karma
Reply
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Event Series May & June: From Network Visibility to Service Intelligence

Unifying the Network: Moving from Alert Noise to Service Intelligence with Splunk ITSI In today’s hybrid ...

Global Splunk User Group Events: May + June 2026

Your Splunk Community Awaits: Discover Upcoming User Group Events Worldwide    Staying ahead in the fast-paced ...

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas     Cisco Live 2026 is almost here, and this ...