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
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

From Data to Insight: Announcing the Winners of the Splunk Dashboard Contest

Hi Splunkers, First off, thank you to everyone who participated in our very first From Data to Insight: The ...

Splunk Developers: Construct Your Future at the .conf26 Builder Bar

Calling all Splunk architects, platform admins, and app developers: the site is open, and the blueprints are ...

Quick connection discovery mode for forwarders

When a Splunk forwarder loses connectivity to its indexers, it does not always reconnect immediately. In many ...