Splunk6 Group visualization elements horizontally inside a panel

[jeffland]

Hello.

I have two charts, both of which use values from the same two inputs (a multiselect and time picker). I would like to show the two charts side by side, inside the same panel, and also include the input in this panel. That should make it more obvious that they are related and use the same input, and it would be nice to see them share the same panel title.

I am using Simple XML. Getting the inputs and a chart into the same panel was easy, and I've also added the second chart to the panel by editing the XML code. But I am stuck at getting the two charts to group horizontally. Apparently, a panel is supposed to group visualizations vertically (Docs), but there is no option to influence this behavior, and you can't use a row inside a panel to arrange items in horizontal order.

The only related question I could find seems to use Advanced XML (see here), but is that really neccessary for the small feat I'm trying to accomplish? I can easily drag a second panel with the second chart next to the first panel containing the first chart and it looks almost perfect, except for the fact that the two separate panels don't share the same white background. Is this something I could change with stylesheets perhaps? Unfortunately, I have no experience with CSS.

Thank you for your ideas.

[jsven7]

Trying to do the same thing with simple XML.

[jeffland]

I don't think you can do this with Simple XML alone.

[jeffland · Accepted solution]

For those who may be looking for an answer, here is one way of doing it.

In the script part of the dashboard, select the rows in question (in my case, the first two rows) and the elements you want to have side by side (in my case, I select them by id, but you could also get them as the children of row1 and row2). Move the second element to the first row, delete the second row (optionally; if there is nothing else in it) and make the two elements group horizontally by making both float left. This works for me, but the source this is derived from mentions that you can force a resize with the command I commented out in this code sample:

// Grab the first rows
var row1 = $('.panel-element-row').first();
var row2 = row1.next();

// Get the  cells
var cell1 = $('#element1');
var cell2 = $('#element2');

// Move second cell to first row
cell2.appendTo(row1);

// Remove the now-empty row
row2.remove();

// Adjust the cells' width and make them group horizontally
cell1.css({'width': '50%', 'float': 'left'});
cell2.css({'width': '50%', 'float': 'left'});

// If needed, force visualizations to redraw with their new size
//$(window).trigger('resize');

Hope this is helpful for someone else.

[ngatchasandra]

Hi,
I am trying to do this with module in XML(SideView App) because when i worked with CSS the chart stay always in vertical aligns. But alignment of this charts of horizontal way in the same panel with CSS is very easy when your dashboard is in HTML not XML .
This is my XML code that is the solution of your problem. Copy and paste in your view editor . I worked with internal index.

<view autoCancelInterval="90" isSticky="False" isVisible="true" onunloadCancelJobs="true" template="dashboard.html">
    <label>Dashboard_Align_Horizontal</label>

    <module name="AppBar" layoutPanel="appHeader"/>
    <module name="SideviewUtils" layoutPanel="appHeader"/>
    <module name="Message" layoutPanel="messaging">
        <param name="filter">*</param>
        <param name="maxSize">2</param>
        <param name="clearOnJobDispatch">False</param>
    </module>

    <module name="Search" layoutPanel="panel_row1_col1" autoRun="True">
      <param name="search">
index=_internal source="*metrics.log" group="per_sourcetype_thruput" | dedup series | sort series | fields series
</param>
<param name="earliest">-1h</param>
<param name="latest">now</param>
<module name="TimeRangePicker" layoutPanel="panel_row1_col1_grp1" autoRun="True">
<param name="selected">last 4 hours</param>
 <module name="Pulldown" layoutPanel="panel_row1_col1_grp2">
 <param name="name">selectedSourcetype</param>
 <param name="label">Sourcetype</param>
 <param name="staticOptions"/>
 <param name="valueField">series</param>
          <module name="Search" layoutPanel="panel_row1_col1_grp1">



                <param name="search">index=_internal source="*metrics.log" group="per_sourcetype_thruput" series="$selectedSourcetype$" | stats min(eps) avg(eps) max(eps)</param>

                <module name="Pager">
                    <module name="Table"/>
                </module>
            </module>

            <module name="Search" layoutPanel="panel_row1_col1_grp2">



                <param name="search">index=_internal source="*metrics.log" group="per_sourcetype_thruput" series="$selectedSourcetype$" | stats min(eps) avg(eps) max(eps)</param>

                <module name="Pager">
                 <module name="FlashChart"/>
                </module>
            </module>
            </module>
           </module>
          </module>
        </view>

Please, forgive my english

[jeffland]

Thank you for your reply.

Using module with a layoutPanel="panel_row1_col1_grp1" and another one with grp2 was already suggested in response to one of the questions mentioned. Unfortunately that is not a viable solution for me, it yields an error that says "XML Syntax Error: Cannot find object mapper for panel type: module". I would prefer to stay with Simple XML, and from what I understood this is something from Advanced XML.