How to add background image to a panel and adjust the position of the elements of a panel?

[LuiesCui]

Hello guys, I'm new to splunk and I have some problems with panels in dashboards.
I wanted to build a panel that just looks like a topology structure, and with some searching results in it.

Like it shows above, those numbers are the searching results.
Now the problem is, I can't adjust the position of those numbers and the background image doesn't show up!
One of the searching results shows below:

<row>
    <panel class="singleA">
      <single style="text-align: center; float:left">
        <title>fff</title>
        <search>
          <query>index="disk_check" | stats latest(Value) as v | table v</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
</row>

Is it possible to build the panel just like the picture? I really need your help! Thx a lot!

[martin_mueller · Accepted solution]

Take a look at how Splunk does it in the Distributed Management Console at http://yourhost:8000/en-US/app/splunk_management_console/indexing_performance_instance and adapt to your needs.

[LuiesCui]

So how to get the sources of those dashboards? I don't see any xml in this app. Thx again!

[martin_mueller]

Go to Settings -> User Interface -> Views -> select DMC -> pick a view to view its XML.

[LuiesCui]

Is it simple xml or advanced xml? Pretty hard to understand! Is there any docs about it?

[martin_mueller]

That's SimpleXML with a bit of HTML, CSS, and JavaScript added on top.

[LuiesCui]

Thank you!

[MuS]

Just in addition, take a look at the simple XML dashboard app https://splunkbase.splunk.com/app/1603/ and in there at the /app/simple_xml_examples/custom_layout_overlay_single dashboard.