Splunk Search

How can I have 3 charts for 1 panel display on the same row instead of each on a different row?

bcronrath
Path Finder

My goal here is to save my panel as a "pre-built" one that can be distributed to other users dashboard at my company. What I'm running into is a lack of formatting options that I figure have to exist somewhere, but I am simply missing how to implement them.

Essentially if I create 3 different panels and put them within the same <row> element, it visually accomplish what I want to see, however the fact that each of them are different panels kills the functionality that I want of the user only have to add 1 panel instead of 3 different ones.

I see that I can add 3 charts to 1 panel, however, I cannot get them to all display on 1 row. Here is the current setup:

<row>
<chart>
  ....
</chart>
<chart>
 .....
 </chart>
<chart>
  .....
 </chart>
</row>

Does anyone know of a way to get all these 3 charts to display on the same row without creating more than 1 panel?

0 Karma
1 Solution

lquinn
Contributor

You can add a css stylesheet to your XML by including it in your dashboard tag:

<dashboard stylesheet="mycss.css">

Then include a stanza like the following in mycss.css (file saved to $SPLUNK_HOME/etc/apps/{your_app}/appserver/static):

.panel-element-row {
    display: inline-block !important;
    width: 33% !important;
}

Note that this will cause all charts in your dashboard to be 1/3 width and inline. If you have other charts in you dashboard that you do not want formatted in this way, you will have to make the CSS more specific.

View solution in original post

rjthibod
Champion

You need to wrap each <chart> with <panel>. You can have a <title> directly under the <panel> element or the <chart> element. I would not suggest putting a<title> under both.

 <row>
   <panel>
     <chart>
        ....
     </chart>
   </panel>
   <panel>
      <chart>
       .....
      </chart>
    </panel>
    <panel>
      <chart>
       .....
      </chart>
    </panel>
 </row>
0 Karma

bcronrath
Path Finder

I downvoted this post because did not read the question, i was asking for a single panel, not 3, of course i've tried the 3 panel approach as outlined

0 Karma

rjthibod
Champion

Sorry for the confusion, but I was a little unclear if you did try that given that you did not have an actual <panel> element (or <title> elements) in your XML snippet, even though you referred to it as a panel.

0 Karma

davebrooking
Contributor

If your panels need to be of different widths you can try this answer

Dave

0 Karma

lquinn
Contributor

You can add a css stylesheet to your XML by including it in your dashboard tag:

<dashboard stylesheet="mycss.css">

Then include a stanza like the following in mycss.css (file saved to $SPLUNK_HOME/etc/apps/{your_app}/appserver/static):

.panel-element-row {
    display: inline-block !important;
    width: 33% !important;
}

Note that this will cause all charts in your dashboard to be 1/3 width and inline. If you have other charts in you dashboard that you do not want formatted in this way, you will have to make the CSS more specific.

View solution in original post

.conf21 CFS Extended through 5/20!

Don't miss your chance
to share your Splunk
wisdom in-person or
virtually at .conf21!

Call for Speakers has
been extended through
Thursday, 5/20!