Dashboards & Visualizations

how to rearrange visualisation with two panels vertically overlayed

zoe
Path Finder

Hi,  I have three visualisation elements: one table and two panels with single numbers. These three are now next to each other. I would like to put Table on the left and the other two panels vertically stacked on the right hand. Below is the source code. Can anyone help me out? Thanks in advance!

<panel>
<table>
<title>xx</title>
<search>
<query>........</query>
<earliest>........</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name=..........</option>
</table>
</panel>
<panel>
<single>
<title>.......</title>
<search>
.........
</search>
<option name=................</option>
</single>
</panel>
<panel>
<title>.........</title>
<single>
<search>...............</search>
<option name="....................</option>
</single>
</panel>

Labels (3)
0 Karma
1 Solution

TheFlash
Path Finder

@zoe  Here is the solution, I have used.

 

 

 

<!-- First bring two single value panel under one panel Tag, as you can see below and then add the html tag written below -->
<panel>
<html>
<style>
<!-- Here I have checked the class name used for my pannel, you can check this by clicking right mouse button on browser and then click on  inspect or ctrl+shift+I, and the check the class name, here in my case class name is "panel-element-row" should be same for you too. -->
.panel-element-row { <!-- it is class name used in html tag, so you can style it using CSS -->
display:flex; <!-- It is a CSS property, you can google about it, if you want to understand more -->
flex-direction: column;
}
</style>
</html>
<single></single> <!-- Your single value pannel -->
<single></single> <!-- your second single value panel -->
</panel>

 

 

 

 

View solution in original post

TheFlash
Path Finder

@zoe  Here is the solution, I have used.

 

 

 

<!-- First bring two single value panel under one panel Tag, as you can see below and then add the html tag written below -->
<panel>
<html>
<style>
<!-- Here I have checked the class name used for my pannel, you can check this by clicking right mouse button on browser and then click on  inspect or ctrl+shift+I, and the check the class name, here in my case class name is "panel-element-row" should be same for you too. -->
.panel-element-row { <!-- it is class name used in html tag, so you can style it using CSS -->
display:flex; <!-- It is a CSS property, you can google about it, if you want to understand more -->
flex-direction: column;
}
</style>
</html>
<single></single> <!-- Your single value pannel -->
<single></single> <!-- your second single value panel -->
</panel>

 

 

 

 

zoe
Path Finder

Thanks @TheFlash for your solution! sorry for the late reply. 

0 Karma

TheFlash
Path Finder

TheFlash_1-1617217214204.png

 

is this what you want to do ?
If yes then reply to this, I will share the details how I did that.

0 Karma

zoe
Path Finder

@TheFlash thanks for your message! yes, it is ! It would be great if you share the solution. Many thanks in advance!

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...