topic Re: Can a dashboard panel's shape be changed? in Dashboards & Visualizations

Can a dashboard panel's shape be changed?

roychen — Tue, 20 Nov 2012 10:03:50 GMT

Hello,

Splunk's dashboard panels, as well as single values within the panels, have a rounded rectangle shape.

Is it possible to change the dashboard panel's, and/or the single value's shape, to a circle, for example, through a combination of Advanced XML and modifying application.css?

Thanks in advance.

Re: Can a dashboard panel's shape be changed?

Drainy — Tue, 20 Nov 2012 11:18:16 GMT

Yes, through CSS. Whilst you wouldn't be able to change a div to a circle, you could certainly remove the borders and do some magic with background images or other border tricks to change the overall shape to be something else.

EDIT: I may have been slightly wrong.

Well, I thought my colleague would post an witty retort to my declaration that ITS IMPOSSIBLE!
Anyway, since he hasn't, heres the code to make a circular div, magic!

border-radius: 50% 50% 50% 50%;

padding: 13%;

Apply this as you need to whatever divs you like, also probably also worth testing it across browsers.

Re: Can a dashboard panel's shape be changed?

jonuwz — Tue, 20 Nov 2012 18:45:40 GMT

For added lulz - round single values

.SingleValue {
background-size: cover;
border-radius: 50% 50% 50% 50%;
height: 100px;
width: 100px;
}

.singleResult {
position: relative;
top: 40%;
}

.singleLabel {
position: relative;
top: 40%;
}

triangles on the other hand ...

Re: Can a dashboard panel's shape be changed?

roychen — Thu, 22 Nov 2012 09:13:50 GMT

Thanks, Drainy.

I've tried playing around with it and it works.

I'm not good enough at CSS to figure out how to re-size and re-position the single values to small circles however, but I'll go check out how it's done.