Dashboards & Visualizations

How to apply background image for table visualization using CSS/Javascript?

paullt12345
Explorer

Hi

I want to set background image for a table visualization. How to handle with css/javascript.

--paull

0 Karma

chrisyounger
SplunkTrust
SplunkTrust

This looks a bit crazy, but below is one way to do it. Paste it into a new dashboard. I am assuming you have some background knowledge of how to do HTML/CSS. Otherwise this will be very hard.

<dashboard>
  <label>TestDashboard</label>
  <row depends="$hide_this$">
    <panel>
      <html>
      <style>
        #background_table {
          background:url(https://i.imgur.com/ZodtLh7.jpg);
        }
        #background_table th, #background_table td, #background_table .table  {
          background-color: transparent !important;
        }
      </style>
    </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="background_table">
        <search>
          <query>|makeresults count=10 | eval value = random()</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>
0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...