topic Re: Can we have any background image on a line chart in Splunk? in Dashboards & Visualizations

Can we have any background image on a line chart in Splunk?

nadlurinadluri — Sun, 10 Feb 2019 23:49:17 GMT

Can we have any background image on a line chart in Splunk? Like I will have my line chart, which does its job (with a plain background image); But, I want to have a different image (not background color alone) altogether, and I want to display my line chart on top of it, instead of that plain background image.

Please suggest.

Thanks

Re: Can we have any background image on a line chart in Splunk?

jkat54 — Mon, 11 Feb 2019 03:07:17 GMT

https://answers.splunk.com/answers/330361/how-to-apply-custom-css-to-a-dashboard.html

http://dev.splunk.com/view/webframework-developapps/SP-CAAAEQA

Do either of those help? I think you need custom css.

Re: Can we have any background image on a line chart in Splunk?

vnravikumar — Mon, 11 Feb 2019 04:00:16 GMT

Hi @nadlurinadluri

Try this and let me know

<dashboard>
  <label>chart background</label>
  <row>
    <panel>
      <html>
        <style>
           #test{
            background-image: url("/static/app/search/bg.jpg");
          }
         #test rect {
          fill:none;
          }

        </style>
      </html>
      <chart id="test">
        <title>Test Image background</title>
        <search>
          <query>index=_internal | timechart  count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">line</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
</dashboard>

Re: Can we have any background image on a line chart in Splunk?

nadlurinadluri — Mon, 11 Feb 2019 20:00:25 GMT

Thanks for the answer. It certainly worked.

Re: Can we have any background image on a line chart in Splunk?

vnravikumar — Tue, 12 Feb 2019 02:34:37 GMT

Welcome 🙂

Re: Can we have any background image on a line chart in Splunk?

preacher_15 — Tue, 12 Mar 2019 08:50:03 GMT

Hi, I have one question, in background-image: url ("/static/app/search/bg.jpg");
which URL i am supposed to put?
path: C:\Program Files\Splunk\etc\apps\aapname\appserver\static\images
this is my path.
when i put the image in above mentioned path and use the same in xml its not reflecting....can you help me out?

Re: Can we have any background image on a line chart in Splunk?

vnravikumar — Tue, 12 Mar 2019 08:53:07 GMT

Hi @preacher_15

I had image in appserver/static folder

Re: Can we have any background image on a line chart in Splunk?

vnravikumar — Tue, 12 Mar 2019 08:53:57 GMT

under search app

Re: Can we have any background image on a line chart in Splunk?

preacher_15 — Wed, 13 Mar 2019 03:38:26 GMT

I am still not able to get it....i have a placed an image under C:\Program Files\Splunk\etc\apps\aapname\appserver\static and copied the same url in xml.....what am i missing here?
and one more thing in your case if search is the app why have you put it inside the static folder? shouldn't it be something like app\search(appname)\static\image?
I am still a novice in splunk...so please help.

Re: Can we have any background image on a line chart in Splunk?

vnravikumar — Wed, 13 Mar 2019 04:08:15 GMT

Hi @preacher_15

Try the following

<html>
         <style>
            #test{
             background-image: url("/static/app/test/img/yoga-1805784_1280.png");
           }
          #test rect {
           fill:none;
           }

         </style>
       </html>

Here test is the app and I had created img folder under /opt/splunk/etc/apps/test/appserver/static/img/

check the url for the folder structures

http://dev.splunk.com/view/webframework-developapps/SP-CAAAEUC

Re: Can we have any background image on a line chart in Splunk?

preacher_15 — Wed, 13 Mar 2019 05:37:37 GMT

Hi @vnravikumar
I tried doing the way you told but no luck 😞
Anyways thank you very much for the help.

Re: Can we have any background image on a line chart in Splunk?

vnravikumar — Wed, 13 Mar 2019 08:24:35 GMT

Hi @preacher_15

Can you please inspect the corresponding div with the browser, to know whether the path is substituted correctly for the image.

Re: Can we have any background image on a line chart in Splunk?

preacher_15 — Thu, 14 Mar 2019 04:42:41 GMT

Hi @vnravikumar i did as you told..
Failed to load resource: the server responded with a status of 404 (Not Found)
this is the error its showing.

Re: Can we have any background image on a line chart in Splunk?

niketn — Thu, 14 Mar 2019 05:14:40 GMT

@preacher_15 if the following location is where you have static image: C:\Program Files\Splunk\etc\apps\aapname\appserver\static\images you should try out

 background-image: url("/static/app/aapname/images/<yourImageFileName>.png");

You can also test the static file whether it is loaded successfully or not (since static files need bump, refresh or restart of Splunk along with Internet Browser history cleanup). Typing the following in the browser URL should ideally open the image file if the same has loaded successfully.

http://<yourSplunkServer>/en-US/static/app/<yourAppName>/images/<yourFileName.png>;

When any image does not load and you get 404 error, you can always click on the Browser's console log error and expand to the the resolved URL path in the browser. If it is navigating to incorrect path you would need to correct the same.
Refer to one of my older answers: https://answers.splunk.com/answers/552333/how-do-i-add-a-picture-to-my-dashboard-v-66.html

Re: Can we have any background image on a line chart in Splunk?

preacher_15 — Thu, 14 Mar 2019 05:41:21 GMT

thank you.. it worked. 🙂

Re: Can we have any background image on a line chart in Splunk?

Bart — Tue, 22 Jun 2021 13:20:08 GMT

Hi,

how do I implement this as simple as possible in Version:7.3.5, seems not working as per above example, I have tried to play around with no avail. Thanks