Dashboards & Visualizations

How to get multiple pie charts in one panel horizontally?

pwilliams_splun
Splunk Employee
Splunk Employee

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>
0 Karma

woodcock
Esteemed Legend

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

0 Karma

lguinn2
Legend

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.

Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...