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

paullt12345 — Tue, 12 Mar 2019 04:27:36 GMT

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

--paull

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

chrisyounger — Tue, 12 Mar 2019 04:39:02 GMT

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>

topic Re: How to apply background image for table visualization using CSS/Javascript? in Dashboards & Visualizations

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

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