Solved: Re: Can we have any background image on a line cha...

nadlurinadluri · ‎02-10-2019

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

vnravikumar · ‎02-10-2019

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>

View solution in original post

Bart · ‎06-22-2021

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

vnravikumar · ‎02-10-2019

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>

nadlurinadluri · ‎02-11-2019

Thanks for the answer. It certainly worked.

vnravikumar · ‎02-11-2019

Welcome 🙂

preacher_15 · ‎03-12-2019

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?

vnravikumar · ‎03-12-2019

Hi @preacher_15

I had image in appserver/static folder

vnravikumar · ‎03-12-2019

under search app

preacher_15 · ‎03-12-2019

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.

vnravikumar · ‎03-12-2019

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

preacher_15 · ‎03-12-2019

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

vnravikumar · ‎03-13-2019

Hi @preacher_15

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

preacher_15 · ‎03-13-2019

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.

niketn · ‎03-13-2019

@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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

preacher_15 · ‎03-13-2019

thank you.. it worked. 🙂

jkat54 · ‎02-10-2019

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.

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

SignalFlow: What? Why? How?

Federated Search for Amazon S3 | Key Use Cases to Streamline Compliance Workflows

New Dates, New City: Save the Date for .conf25!