How to get multiple pie charts in one panel horizontally?

[pwilliams_splun]

I have a dashboard with a single panel and 4 pie charts. The idea of removing the panel tags to get one panel was to remove any dividers between the charts. However, the charts are stacked vertically on the dashboard now and I cannot seem to find a way to get them to stack horizontally across the top instead. I have played around with tags and options for height, etc. I assume this might have to be done with CSS.

My XML:

<form>
  <label>Filter Log Overview</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="new_int" searchWhenChanged="true">
      <label>Select firewall interface</label>
      <fieldForLabel>interface</fieldForLabel>
      <fieldForValue>interface</fieldForValue>
      <search>
        <query>sourcetype=pfsense_filterlogs | table interface | dedup interface</query>
        <earliest>0</earliest>
        <latest></latest>
      </search>
      <default>em0</default>
      <initialValue>em0</initialValue>
    </input>
    <input type="time" token="filtertime" searchWhenChanged="true">
      <label>Select time</label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <title>SRC</title>
        <search>
          <query>sourcetype="pfsense_filterlogs"  interface=$new_int$ | top s_port limit=5</query>
          <earliest>$filtertime.earliest$</earliest>
          <latest>$filtertime.latest$</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="height">50</option>
        <option name="refresh.display">preview</option>
      </chart>
      <chart>
        <title>DST</title>
        <search>
          <query>sourcetype="pfsense_filterlogs"  interface=$new_int$ | top d_port limit=5</query>
          <earliest>$filtertime.earliest$</earliest>
          <latest>$filtertime.latest$</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="height">50</option>
        <option name="refresh.display">preview</option>
      </chart>
      <chart>
        <title>Source Addresses</title>
        <search>
          <query>sourcetype="pfsense_filterlogs"  interface=$new_int$ | top s_ip limit=5</query>
          <earliest>$filtertime.earliest$</earliest>
          <latest>$filtertime.latest$</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="refresh.display">preview</option>
        <option name="height">50</option>
      </chart>

      <chart>
        <title>Destination Addresses</title>
        <search>
          <query>sourcetype="pfsense_filterlogs"  interface=$new_int$ | top d_ip limit=5</query>
          <earliest>$filtertime.earliest$</earliest>
          <latest>$filtertime.latest$</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="refresh.display">preview</option>
        <option name="height">50</option>
      </chart>
    </panel>
  </row>
</form>

[woodcock]

You could also use another dashboarding tool, like sideviewutils, which gives you much more control (programatically):
http://sideviewapps.com/apps/sideview-utils/

[lguinn2]

AFAIK, the only way to do this is to convert the dashboard to HTML. Then you have full control of the layout and the CSS.

The rule for simple XML dashboards is: single values are arranged horizontally within the panel, and charts are arranged vertically.

The most simple way to arrange pie charts horizontally is to put them in separate panels. You can get at least 3 panels per row.