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!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

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